Iframe cross domain JavaScript calls

by Mads Kristensen 25. August 2009 21:26

At ZYB we have been doing cross domain JavaScript calls for quite some time now. Whenever we tell that to people, many don’t believe it is possible with standard security settings in any modern browser. This surprised me a bit since it has always been possible with a simple little trick.

The problem

Say you have a website (site A) with an iframe wherein you host another website (site B). In old and unsecure browsers it was possible to do a JavaScript call from site B to site A like this:

window.parent.doSomething();

Here the doSomething function is living on site A and is called by site B through its parent window. For security reasons, this simple way of cross iframe communication was disabled years ago by all browser vendors.

The solution

There are different scenarios with possible solutions:

1: Site B is a sub domain under/beside Site A

Let’s say that:

  • Site A is located at example.com or sitea.example.com
  • Site B is located at siteb.example.com

All you need to do is to add this line of JavaScript to both site A and B:

document.domain = 'example.com'

That tells the browser that both site A and B belongs to the app located at example.com and are therefore allowed to communicate using JavaScript. It could be by calling window.parent.doSomething(); Now Same Origin Policy principle has been enabled on both sites.

2: Site B is on a different top domain than site A

This is more tricky, because we need to let the browser think both site A and B are under the same top domain.  When it does, we can implement the trick from solution 1 above.

Let’s say that:

  • Site A is located at example.com or sitea.example.com
  • Site B is located at foobar.com

To make this work, you need to create a sub domain called e.g. siteb.example.com. Then point the new sub domain to the IP address of foobar.com. Now both site A and B is located under example.com and you can start to implement solution 1.

There is no security risk going on here because you can only implement solution 1 if both site A and B participate in the trick.

Other solutions

If you can't use either solution 1 or 2 the game isn't over. Here are some other techniques to use:

Though not as simple as the document.domain trick, these are well documented and proven techniques.

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Tags: ,

Client-side

Comments

8/25/2009 11:11:09 PM #

Bertrand Le Roy

Might be worth checking out the OpenAjax Hub 2.0: www.openajax.org/.../...Ajax_Hub_2.0_Specification

Bertrand Le Roy United States |

8/27/2009 9:57:43 PM #

Mads Kristensen

I've heard about OpenAjax Hub before but then forgot about it. Thanks for the link

Mads Kristensen Denmark |

8/26/2009 6:53:25 AM #

Kazi Manzur Rashid

It is possible to communicate between frames even it is hosted in different domain. It is a bit of hack and requires proper implementation (depends on timer and # of the location). I did it long time ago you can find the details over here geekswithblogs.net/.../103518.aspx but I would never recommend it Wink.

Kazi Manzur Rashid United States |

8/26/2009 10:21:17 PM #

pingback

Pingback from letstalkdev.com

Calling Remote JavaScript Through Iframes  @   Web Development Blog

letstalkdev.com |

8/26/2009 11:10:58 PM #

pingback

Pingback from topsy.com

Twitter Trackbacks for
        
        Iframe cross domain JavaScript calls
        [madskristensen.net]
        on Topsy.com

topsy.com |

8/26/2009 11:49:07 PM #

Balaji

Very nice!  I've been wondering about frame cross domain JavaScript calls.  Do you have  any thoughts about JavaScriptMVC - Include?

Balaji United States |

8/30/2009 9:49:37 AM #

markayi

the OpenAjax Hub 2.0 is really useful and working great for me

markayi United States |

8/31/2009 1:21:24 PM #

christian

I am surprised to know it is possible with standard security settings in any modern browser. Thanks for such a great salutation. it is very useful.

christian United States |

9/11/2009 4:46:33 PM #

Satalaj

Hi,
I have two frameset in my main page.  first frameset source set to my domain, second set to third party web
say google. Now, end user do search in google and second frameset source would be another url.

Can anyone tell me how can I notify the mainpage about what is the current url of second frame ?

Thanks, Satalaj.

Satalaj United States |

9/16/2009 6:20:07 PM #

trackback

Iframe cross domain JavaScript calls

Thank you for submitting this cool story - Trackback from PimpThisBlog.com

PimpThisBlog.com |

9/18/2009 12:14:06 AM #

pingback

Pingback from random.cgi-biz.com

ARRAY -   Iframe cross domain JavaScript calls - Random Things To Blog

random.cgi-biz.com |

9/18/2009 9:18:48 AM #

Aroop

Hey bro...i'm sick n tired of searching a solution for my data entry application. Can you help me? The logic is i have a main page in that i have an iframe...in that i frame i am opening a website...www.irda.org...which has a form...what i want it fill the form from main page to the iframe form...thats all....i have tried all the tips n tricks but in vain.....please..please..help me...very critical for my job!!!!!!

Aroop India |

9/21/2009 9:57:58 AM #

mr

test number one

mr People's Republic of China |

9/21/2009 7:22:22 PM #

pingback

Pingback from gineshkumar.wordpress.com

Interesting Posts « Gineshkumar's Blog

gineshkumar.wordpress.com |

2/18/2010 9:28:14 PM #

pingback

Pingback from devwebpro.com

Calling Remote JavaScript Through Iframes | LetsTalkDev

devwebpro.com |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008