This article explains iframe-to-iframe communication, when the iframes come from different domains. That you can do this effectively is only now becoming apparent to the community, and is now used in production by Google, Facebook, and others, and has powerful implications for the future of Ajax, mashups, and widgets/gadgets. I’ve been investigating the technique and working some demos, introduced in the article.
Background: Cross-Domain Communication
Ironic that in this world of mashups and Ajax, it’s not very easy to do both of them together. Ajax applications run in the browser and such applications were never intended to talk to anything but the server from whence they came. So it’s not easy to mash content from multiple sources, when everything must be squeezed through the originating web server. A few hacks have arisen over the years to deal with this, such as On-Demand Javascript, and the most recent one is a hack involving iframes, which I’ll explain in this article. As we’ll see later, the iframe technique is arguably more secure than On-Demand Javascript, and it’s also better places for communication within the browser, i.e. from one iframe to another.
Related to this article is a demo application and a couple of variants.
The first mention I’ve seen of this hack originated on James Burke’s Tagneto blog in June, 2006, though I’m fairly certain it’s been used in some quarters long before that. It’s now used in production by Google in Mapplets. It’s also used in Shindig for widget-container communication. The technique also happens to be the best way to make safe cross-domain calls from the browser directly to a third-party server, which is why it is employed by Facebook’s new Javascript Client Library.
The Demo
First, let’s see what we can do with this hack.
53 responses so far ↓
1 Lior // May 20, 2008 at 9:01 pm
Hi – thanks for a great article! We are trying to do just that . we need to READ the location.href of one iframe (from domain a, not our domain) from another – but can’t!
According to this MSDN article, http://msdn.microsoft.com/en-us/library/ms533028(VS.85).aspx
“…document.location.href Property can be set to navigate, but cannot be read….”
but that goes against your third law…
Any idea what could we be missing?
thanks very much again
Lior
2 mahemoff // Jun 6, 2008 at 4:49 pm
Lior, thanks for the comment. Someone else pointed out something similar and I’ve updated the law accordingly.
In the case of the guy who contacted me, he could still solve his problem by other means. The two iframes can still communicate with each other using the techniques described here, so there’s always a way for them to pass their URLs to each other, or any other info.
3 Silenceway // Jun 11, 2008 at 8:48 pm
[...] Guru, encontré este interesante artículo sobre comunicación entre iframes de Michael Mahemoff: Cross-Domain Communication with IFrames. Lo que tú Quieras OírOpenCourseWare del Portal Universia y del MITWeb 2.0Visita Posted in Web, [...]
4 Ninja Zoo // Aug 4, 2008 at 3:12 pm
Unfortunately child to parent communication no longer seems to work on Safari 3 on Mac and the Javascript error console reports “Unsafe JavaScript attempt to access frame with URL”. Parent to child still seems to work OK though.
5 Anton G // Sep 25, 2008 at 11:47 pm
Mahemoff,
in the example, speed up and speed down doesn’t work. getting permision denied error. Any idea ?
tks
Anton
6 gurdeep // Nov 7, 2008 at 11:04 am
what is the fix for this
7 Jeff // Dec 4, 2008 at 12:48 pm
I’m unable to pass a hash value from child iframe to parent in FF3/Mac using top.window.location.hash or parent.window.location.hash.
8 Navid Azimi // Dec 31, 2008 at 1:26 am
The “speed up / speed down” example also does not work in IE7. Such a great write up but unfortunately seems already out-dated.
I really hope this article can be updated for the latest browsers.
9 Franky // Jan 2, 2009 at 7:57 pm
I’m new to Javascript, but would this be an appropriate solution for doing something fairly simple like, replacing a stylesheet for a page over which I have no control?
I am loading an external page in an iFrame, and would like to make some style changes to the page, but have had no luck. Would this technique allow me to do that?
10 ray // Jan 7, 2009 at 2:01 pm
@Jeff: try using window.parent.parent
The child frame you’re referring to might be 2 levels down, if you spawned it from the remote iframe.
11 Tamlyn // Jan 20, 2009 at 3:43 pm
Great post. Thanks for explaining how the RPC relay stuff works in Shindig. Still doesn’t explain why I can’t get it working in IE7 though…
12 uZ // Jan 22, 2009 at 10:10 am
that’s all lies people, he just changes the src of the iframe with the same url + #color
I just investigated his ‘demo’
13 mahemoff // Jan 22, 2009 at 12:21 pm
uZ, please identify the code in question.
14 ABCoder // Feb 3, 2009 at 3:19 pm
Nice post.. but too much lengthy…
Can you provide with some working code please..
Thanks
15 Explaining the “Don’t Click” Clickjacking Tweetbomb // Feb 12, 2009 at 7:38 pm
[...] can prevent this kind of attack is to use the old “bust the iframe” idiom. As I explained in Cross-Domain Communication with IFrames, it’s possible for an iframe to access the URL of its container, and actually re-set that value. [...]
16 Kyle Simpson // Feb 14, 2009 at 5:48 am
This article is an interesting and very thorough read on this topic. I appreciate knowing with a good explanation what the iframe proxying details are all about in the minute detail.
I think however that it’s a pretty elaborate workaround for cross-domain communication. The following negatives come to mind:
iframes (in IE) use a lot of memory, especially as you generate a lot of them dynamically and kill them off (the garbage collection doesn’t always clean up all of an iframe’s usage). So, as a page lives longer, this seems like this techinque will end up consuming a lot of browser memory, and probably slowing things down.
timers/polls/intervals are definitely helpful, but if they have to run constantly in a page (not just used for short durations, like in aminations), they really slow down a page’s responsiveness.
I don’t see that the technique you mention (which facebook uses!) really guarantees that an app can opt-in (or out) of allowing such an elaborate “evil” site to take advantage. The reason is, in javascript, you can overwrite properties/functions dynamically. So for instance an evil page could fool the iframe proxy into sending along a domain (which is known to be trusted), even though that’s not the actual page domain in the browser.
17 anonymous // Apr 13, 2009 at 5:00 pm
Inside the iframe:
parent.window.location.href = “xyz.com” wasn’t allowed by IE7, but it appears that:
window.parent.location.href = “xyz.com”;
works like a champ.
thanks for the post.
18 gary laird // Apr 15, 2009 at 5:04 pm
hey guys,
the first demo where you can change the speed and colour of iframe. Is this demo only using crossframe.js. I don’t where util.js ajaxCaller.js are been used. Am I missing something here. ??
19 mahemoff // Apr 22, 2009 at 2:56 pm
@gary laird, those other libs aren’t used (I haven’t checked, but I’m fairly certain). The demo is based on the simple, hand-built, framework for all the demos I use on ajaxify, which pulls in utils and ajaxCaller by default.
20 Cross-Domain Calls with IFrames « Sandip’s Programming Zen // Apr 29, 2009 at 4:37 pm
[...] Ok, I found here on this nice guy’s blog under Cross-Domain Communication with IFrames. [...]
21 Alex // May 2, 2009 at 8:54 am
I have another solution , the most graceful one I know.
Anyone interested could contact with me.
22 Sting01 // May 19, 2009 at 10:31 am
Nice to see an old trick be revived. I used that almost 10 years ago, when Ajax was not existing (to query a server and display dynamical stuffs like ajax do). Just check the website, the result page use that trick.
Furthermore, as the iframe get data from a 3rd party site, you can simply scrap it (JS or server side), then do a mix with existing/orther 3rd party datas. But that is nothing new, I do used that before Y2000.
23 Sting01 // May 19, 2009 at 10:39 am
Just used your test page, saddly it did nto work.
My 2 cents, and I will not make the insult to give you the solution, is it might be relatedto the fact you process your various JS localy (read within the various iframes) instead of grouping them to the main window (parent) . Datas are local but processing have to be global to avoid the various security protections exising (IE7 for exemple).
Hope it make sense, and hope you can fix the broken demo
cheers mate
24 mahemoff // May 19, 2009 at 12:41 pm
Thanks for your suggestion @Sting01. Realistically, I won’t have time to revise the demo for a while at least, though someone else could grab it and try it. It’s good to know there are fixes for IE7 and beyond.
25 Cross Domain AJAX Calls and Iframe Communication How To | Life Scaling // Jun 7, 2009 at 1:50 pm
[...] domain ajax calls and communication between iframes using url hashes (fragments), but I found this great tutorial by Michael Mahemoff covering the subject inside and [...]
26 www@www » Cross-domain Communications with Iframes by Michael Mahemoff // Jun 22, 2009 at 2:52 pm
[...] You can read the full article here: Cross-domain Communications with Iframes [...]
27 links for 2009-07-14 « BarelyBlogging // Jul 15, 2009 at 1:05 am
[...] Cross-Domain Communication with IFrames (tags: javascript iframe) [...]
28 Rocco J Carello // Jul 29, 2009 at 8:53 pm
These techniques do not seem to work in current versions of Safari or Internet Explorer due to security issues. Are there workarounds for this, or are these techniques no longer usable?
29 mahemoff // Jul 29, 2009 at 10:50 pm
Rocco, I haven’t looked into specific browsers, but it’s true – the browsers have become stricter about windows sniffing each other’s sources. There are possibly workarounds (like switch the direction of the sniffing – others above have suggested it still works in one direction).
30 mahemoff // Jul 29, 2009 at 10:53 pm
window.name might be one workaround, as a global shared by all windows, but is probably also going to be unsupported by browsers in the future, and might be accessed by other windows (those also open on the page and those to be opened after the user clicks on a link).
31 Piers Lawson // Aug 17, 2009 at 10:40 pm
Great coverage… I have a slightly different technique for passing messages which I think is faster: http://shouldersofgiants.co.uk/Blog/post/2009/08/17/Another-Cross-Domain-iFrame-Communication-Technique.aspx
32 Ajaxian » Cross domain iframe communication without location polling // Aug 24, 2009 at 9:32 am
[...] post by Michael Mahemoff provides a good introduction to both [...]
33 Cross domain iframe communication without location polling | Guilda Blog // Aug 24, 2009 at 12:06 pm
[...] post by Michael Mahemoff provides a good introduction to both [...]
34 The Ashes » Blog Archive » Cross domain iframe communication without location polling // Aug 24, 2009 at 12:23 pm
[...] post by Michael Mahemoff provides a good introduction to both [...]
35 Cross domain iframe communication without location polling « LocalLab : Foire aux Infos // Aug 24, 2009 at 4:34 pm
[...] post by Michael Mahemoff provides a good introduction to both [...]
36 Ben // Sep 3, 2009 at 7:18 pm
This seems to require access to the code on both the parent page and the iframe’s page. What if the iframe is from an external URL which you can’t put JS into? Then it’s back to the permission denied errors. Or am I misunderstanding the whole thing?
37 mahemoff // Sep 11, 2009 at 8:51 am
Ben – two different domains is the problem being addressed here.
38 Kam // Oct 5, 2009 at 5:24 pm
I’m having difficulties understanding all of this, I just want to auto resize iframe heights.
39 mahemoff // Oct 7, 2009 at 12:33 am
Kam, this is indeed the right kind of stuff you need to use in order to do that, ie have an iframe tell its parent to resize.
You might try some of the libraries that are emerging in this area – I haven’t looked at them in detail, but I suggest googling for “cross-domain library” and the like.
40 Gregory Magarshak // Oct 8, 2009 at 2:00 am
Wow, this is very recent.
I didn’t know you couldn’t READ other iframes’ URLs. So it seems to me that the resizing technique is the cleanest. No timers, no creating iframes. DOES IT WORK IN ALL THE MAJOR BROWSERS? Can anyone tell me? Surely if facebook uses something similar…
41 mahemoff // Oct 8, 2009 at 9:47 am
Gregory, things have been changing with browser security getting tighter, so please research and test to make sure you get it right.
42 Gregory Magarshak // Oct 9, 2009 at 4:13 pm
What is the official word these days? Who has tried Safari 4 etc?
43 nately // Oct 20, 2009 at 2:46 pm
Thanks anonymous. window.parent.location.href is a life saver. Stupid security.
44 Jonathan // Nov 13, 2009 at 1:19 pm
Another BIG downside of using the location hash to send message t0 the parent window is that it adds an entry to the browser history each time the hash changes.
In AJAX applications it is a good thing, but not in a cross domain iframe communication because it screws up the back button behavior.
If someone knows a way to do it whitout modify the browser history please let me know ! Opera and IE6-7-8 don’t modify history, only FF, GG chrome and Safari do it :/
45 A jQuery text extractor (via Java proxy) « Eltit Golb // Nov 13, 2009 at 1:25 pm
[...] i discovered what probably I should have known already: cross site DOM inspection is forbidden (see Cross-Domain Communication with IFrames). To work around this limitation I wrote a really simple ". jsp" proxy page in order to [...]
46 John // Nov 13, 2009 at 6:58 pm
Hi,
Great article. I’ve been wrestling to cross domain iframes, and i think i’m losing. I was hoping to get some info after reading your post. Essentially what i’m trying to do is i’m opening a new window that has content hosted on another domain. within that content there’s an iframe which is content on the same domain as the popup, and in that iframe i have links that refer to the opener of the popup. the problem i’m having is when i click one of the links, instead of opening the link in the window’s opener it opens a new window, or tab instead of the opener.
is what i’m trying to accomplish even possible? It sound fairly trival, but i’m not having luck.
Thanks,
John
47 Weekly Link Roundup – November 21, 2009 « Technosiastic! // Nov 24, 2009 at 10:55 am
[...] Cross-Domain Communication with IFrames [...]
48 Stergios // Nov 25, 2009 at 12:21 pm
Hey ,
I just want to know if is any code for html that the site that appear in an iframe can overwrite/avoid proxy server and open it
49 Ivan The Terrible // Nov 30, 2009 at 11:18 am
If you need to fetch something from an iframe which is on other domain there is a simple way. It works for me in IE7 and FF2. I suppose it will work in newer browsers, but try it yourself. Just set
document.location.href = document.location.href + “#data”;
inside the iframe, and fetch that outside by parsing
document.getElementById(’iframeID’).contentWindow.location.href
Inside this you will have your data after the hash symbol. Fetch it and use it!
50 Josh Scribner // Dec 4, 2009 at 4:36 pm
We’ve been wrestling with this problem too. We have an application (A, domain a.xyz.com) which would like to display only a small portion of the data created by a legacy app (B domain b.xyz.com). B exposes its data via HTML, and can easily be placed in an iframe, but the results are ugly.
We attempted to make peace using Law II, using javascript we would tell both pages they were the same domain:
The developers of B were willing to place a small piece of code on their page, so long as they didn’t have to tangle with the data. We asked for the script document.domain=xyz.com
Then, on A, we did the same.
I’m not sure if you have any insight on this, but I’m posting it in the hopes it will help others (you are not alone). Meanwhile, I’m off to try other approaches.
51 Josh Scribner // Dec 4, 2009 at 4:38 pm
52 links for 2009-12-11 « Caiwangqin’s delicious bog // Dec 11, 2009 at 11:09 pm
[...] Cross-Domain Communication with IFrames (tags: iframe xhr cross-domain ajax web browser) [...]
53 vinay // Feb 2, 2010 at 12:53 pm
I am sick of this cross domain issue. duhhh… i have a page which has 2 iframes , but the href of both the iframes are in different domain. what i need to set a hash from one iframe to the other. i tried all the methods you guyz posted above but none of these are working. could you please help me on this.?
Leave a Comment