Calling parent window method from Iframe (differen

Question

I have a page on a domain:

http://main.mydomain.com/frame.cfm which holds an iframe, loading a domain http://www.anotherdomain.com.

This page http://www.anotherdomain.com has a script reference to http://sub.mydomain.com/somescript.js

This somescript is a tracking script like google Analytics, which loads with each request of www.anotherdomain.com.

At a certain stage, the script http://sub.mydomain.com/somescript.js in the page www.anotherdomain.com will try to call window.top.aFunction(); or parent.aFunction();

to make the parent window do something.

I know about the X-Frame-Options and the Access-Control-Allow-Origin header and tried both, but still when I browse in my iframe on www.anotherdomain.com I get a error message in Firebug telling me:

Error: Permission denied to access property 'relocate'window.top.aFunction();

In my web.config on the main.domain site i have the following rules:

<httpProtocol>
     <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://sub.mydomain.com" />
        <add name="X-Frame-Options" value="ALLOW-FROM http://sub.mydomain.com" />
     </customHeaders>
</httpProtocol>

Which in my opinion should grant the sub.mydomain.com access to the script on main.mydomain.com.

I am testing this with all the domains except the www.anotherdomain.com locally on my pc with host reference in place.

Any idea what I am missing here?

Answer 1

You can't access the parent window function's methods through a cross domain iFrame. It goes against the Same Origin Policy . The X-Frame http header response tells the browser whether it is allowed to render a page in the iFrame and does not help your situation.

The solution I recommend is to use window.postMessage() to communicate between the two frames. Look at http://ejohn.org/blog/cross-window-messaging/