“Friendly iFrame” detection: How can I find my nested iframe in the top page?

I’ve come across a challenging iFrame detection problem in a “friendly iframe” environment. I need to identify from window.top which foreign domain iframe element in window.top.document loads inside of itself yet another iframe with the same domain, protocol, and port as window.top.

So here’s the central question: On Page A, how can you determine in JavaScript that iFrame B contains iFrame C? Again, Page A and iFrame C are of the same domain, protocol and port and can communicate with each other. iFrame B is on a different domain. I want to find the DOMElement that is associated with iFrame C on Page A.

  • Cross-Domain iframe communication
  • cross-origin resource sharing (CORS) with jQuery and Tornado
  • How can I access the DOM elements within an iFrame
  • xhr upload progress event only firing once
  • Javascript widget (similar to Facebook Like) script vs Iframe approach
  • Can I do synchronous cross-domain communicating with window.postMessage?
  • Possible things that have been tried that have not worked:

    • document.referrer matching. Page A matches the src attribute of all iframes on Page A to the document.referrer property in iFrame C. Unfortunately, this doesn’t work if multiple iframes on Page A load content with the same src on iframe B. It also doesn’t work if the src attribute of iframe B is about:blank or javascript:something.
    • window.location.hash communication by looking at the src attributes of iframes. Page A can’t get the window.location.hash of iFrame B, so no luck there.
    • This has to work in IE 6 and 7, so there is no window.postMessage support. Sorry.

    Additional information:

    This is a configuration called “Friendly iFrames”. Friendly iFrames (FIF) are common in the advertising industry. Here’s how they work:

    A page on publisher site, say Page A foo.com, injects iframe B from some-random-ad-server.com. Then inside of iframe B on some-random-ad-server.com, another iframe C is loaded from foo.com. So:

    • I have access (i.e. DOM manipulation) to Page A from iFrame C. Page A has access to iFrame C.
    • Nothing on the Page A or iFrame C has access to iFrame B.

  • Inconsistent ajax (XDR) response from IE
  • Browser doesn't load CSS with “Access-Control-Allow-Origin: *”
  • Crossdomain settings in Google Chrome
  • FB.login() fails with “Unsafe JavaScript attempt to initiate navigation for frame” on Android Chrome but not desktop Chrome
  • Origin is not allowed by Access-Control-Allow-Origin
  • SecurityError for same-origin image texImage2D
  • One Solution collect form web for ““Friendly iFrame” detection: How can I find my nested iframe in the top page?”

    I realize this is old, but I was curious about client side solutions and ran across this post. I’m using server-side to handle this, why not use server side as last resort? Granted referrer is sketchy on server side, however when dealing with iframed pages, the referrer is pretty reliable and can be compared against the host of the local application and the referring application.

    Here is how I’ve done it in ASP.NET/C# (same thing can be done in PHP, etc)

    // set referrer
    if (Request.UrlReferrer != null && Request.Url.Host != Request.UrlReferrer.Host)
    {
        Session["Referrer"] = Request.UrlReferrer.OriginalString;
    }