How to overcome same-origin-policy from iframe?

Question

I'm basically trying to display a second website, belonging to the same organization but hosted on a different domain name, in an Iframe. And I'm trying to pass in some data from the iframe to the parent frame.

Parent frame = foo.com,

Iframe = bar.com

If I try to pass in the data from the iframe via parent.setData( data ), that gives me a same-origin policy error.

So I made a wrapper around this code, hosted at foo.com/js/wrapper.js, which contains this function:

var Foo = {};
Foo.setData = function(data)
{
    parent.setData(data);
}

So now my Iframe on bar.com is doing:

<script src="http://foo.com/js/wrapper.js"></script>
<script>
   Foo.setData( someData );
</script>

However, even that is giving me a security error on the parent.setData line, even through wrapper.js is hosted on the parent domain.

Is there any other way to overcome this?

Answer 1

You are looking for postMessage, read up on that here: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Edit: sorry, didn't see all of the comments saying the same thing

Answer 2

Another fun way to get around this policy is to hijack the child window.location.hash, as it is also visible to both scripting engines.