I work more and more with HTML these days, which means I’m constantly finding solutions to little issues that are new to me.
Today I found quite a big issue however, and that has to do with communication between an iframe and its parent document when the two are living on separate domains.
As you may or may not know, cross-domain communication is always an issue. The reason for that is security (you don’t want open access to domain A from doman B), so I’m quite alright with options being limited, as it means data is safer as a result. However, these limitations can obviously work against you if you want to achieve even seemingly simple tasks.
What I needed to do was to have an iframe in a page on one domain, that loads in a page on another domain, and that iframe is shown as a full overlay on the original page. Naturally, you want to be able to close the overlay, for which we included a close button in the iframe.
However, due to these cross-domain communication restrictions, I couldn’t let the iframe content tell the parent document to remove the iframe. What now?
There is a recent solution for that, window.postMessage, that allows you to perform just this kind of simple messaging, but the catch is that it’s HTML5, and I want it to work on the older IE browsers as well. So that’s no go.
I started thinking about the root of the issue, and that is that only scripts that originate from the same domain can safely communicate with each other. So any script on domain A can interact with another script on that domain. Now, what I need to achieve is really really simple: I have a page on domain A, that contains an iframe that lives on domain B, and I want to tell domain A to remove the iframe when interacting with the page on domain B. Now, we know that we can embed pages across domains using iframes, that’s exactly what we’re doing already. Sooo… why not load a close button from domain A in an iframe on domain B? That’s right, domain A contains an iframe from domain B, which in turn contains an iframe from domain A. That way, the close button can safely communicate with the parent document, as they both live on the same domain!
What does this mean in practice?
Well, the parent page (say http://domainA.com/parent.html) loads the remote page (http://domainB.com/remote.html) in an iframe, passing along a GET variable that passes the URL for the close button (http://domainA.com/close.html). The remote page can then add this in its own iframe, and presto!
To keep it neat (or as neat as hacks get), the close button HTML only contains a transparent div, so the actual visuals aren’t divided over different domains. It only provides a handy clickable but invisible overlay that acts as a close button.