tomhoppe.com

Cross Sub Domain Javascript (Ajax, Iframe, etc)

So we’ve been dealing with an issue at work with cross sub domain JS and AJAX. Basically, JS believes that even a subdomain such as img.yourdomain.com is a different domain from www.yourdomain.com. Because of that, AJAX across pages from those two subdomains will not work. Also if you have an iframe from one to another, you will not be able to refence JS vars or functions back and forth.

After a good bit of digging, I discovered a way around this. This involves setting up an iframe html on one domain and then calling that iframe from the page on the other subdomain. You have to set the document.domain to the same thing on both the parent page and its iframe, in order for them to talk to each other.

document.domain = "yourdomain.com"

Once that is set, the two pages now think they are on the same domain.

edit 3/27: I also wrote about this subject again today. Unless you need to pull in an HTML page, don’t bother AJAXing XML, just use JSONP for your data with jQuery to pull it in.

For example, for pulling in text, create a page on www.yourdomain.com and set document.domain to yourdomain.com. If you are trying to pull in an html page using AJAX from img.yourdomain.com, setup a page that will become the iframe to do the ajax pull and set the document.domain to yourdomain.com. In your page on www. create an iframe which has the src set to your page on img. Since document.domain is set, any functions on the parent page are available to be called via the iframe.

If you are pulling in XML, you can setup the page/iframe relationship with document.domains the same as above. That iframe will make the ajax call to the XML on img.yourdomain.com and do something with it, lets say turn it into an array. At this point, the parent page can access that array on its iframe via “iframeName.arrayName”. Alternatively you can have an array read on the parent page for this information and pass it to the parent from the iframe via “parent.arrayName = iframeArray”.

25 Responses to “Cross Sub Domain Javascript (Ajax, Iframe, etc)”

  1. Anonymous says:

    Thanks! Extremely useful information! If this really works, I owe you much.(I’m after about 1-2 hours of trying and failing with this damn subdomain thing)
    Going to try it right now.

  2. Anonymous says:

    This sounds great, however some more details would be appreciated, i.e. more details on the implementation… creating the iframe.. then js to access the iframe.

    Thanks You!

  3. Greg Nacu says:

    The problem is that it _doesn’t_ work. At least, it doesn’t work in Safari. I haven’t tested in FireFox yet, but I’m not confident.

    If this only works in IE, then I think it was important that this is mentioned.

    Greg.

  4. Greg Nacu says:

    Oops! Okay, I’m wrong. It DOES work! And work it does! Holy Crap. What a great solution. It works in Safari 3, and FireFox 3, but it is critically important that you set document.domain in both DOM’s that you want to have talking to each other.

    What I was trying was the first DOM was src’d at blah.site.com and the iframe was at subdomain.blah.site.com, and I was only setting document.domain in the DOM of the iframe to try to match the src’d URL of the main page. This does not work. Even though the main page is src’d at blah.site.com you still have to explicitly set document.domain=’blah.site.com’ or it won’t work.

    Yay!

    Greg.

  5. mikosan says:

    Hi,

    after a couple of hours of try/fail maddness I would like to ask for more details / implementation example

    thanks

  6. brian says:

    can anyone post a simple “hello world” AJAX working example? I am having trouble…

  7. Tom says:

    I just setup test.tomhoppe.com and posted an easy example from it. Brian, I emailed you a snippet as well.

  8. np says:

    really great post…..but if you can tell more abt security in this design…thanks

  9. Tartifletteman says:

    Hi !
    Great stuff… But I have a problem.
    It is working well with a page under subdomain1.dev.domain.com containing an iframe with a page under subdomain2.dev.domain.com.
    It does not work (or I don’t know how to make it work) with a page under subdomain1.dev.domain.com containing an iframe with a page under search.domain.com.

    I think there is a domain problem :

    -domain.com
    |-search
    |-dev
    |-subdomain1
    |-subdomain2

    And pages under subdomain1 will never be able to access to pages under search…

    If you have any idea…

  10. Tartifletteman says:

    Sorry about the double post, need to format this stuff :

    -domain.com
    __|-search
    __|-dev
    ____|-subdomain1
    ____|-subdomain2

    (_ = space)

  11. Hi. You have a lot of useful information! It has long been looking for. Develop your project.
    —–
    My thoughts unsere Blog

  12. Matt says:

    This SAVED ME. Thanks!

  13. Joe Son says:

    What a great work around. I’ve been banging my head trying to figure out why this was failing.
    Sub-domain can’t be different. ARGH!!!

    this workaround seems to do the trick. THX!

  14. Henze says:

    New idea: if you want cross subdomain (www.domain.com and sub.domain.com) and you are working on apache. things can get a lot easier. if a subdomain actually is a subdirectory in public_html (sub.domain.com = http://www.domain.com/sub/. so if you have ajax.domain.com/?request=subject…you can do something like this: http://www.domain.com/ajax/?request=subject

    works like a charm for me, and no stupid hacks, proxies or difficult things to do for just a few Ajax

  15. tips says:

    tips…

    [...]Cross Sub Domain Javascript (Ajax, Iframe, etc) « Tom Hoppe[...]…

  16. rtdp says:

    i got this error in chrome

    Uncaught Error: SECURITY_ERR: DOM Exception 18

    this was on line, where i did document.domain = ‘mydomain.com’

  17. Daniel says:

    @RTDP
    Downgrading from subdomain to fqdn works still in Chrome. It’s switching subdomains / domains that does not work:

    > document.domain
    “www.bing.com”
    > document.domain = ‘bing.com’
    “bing.com”
    > document.domain = ‘fff.bing.com’
    Error: SECURITY_ERR: DOM Exception 18

    In other words, you can change it only one way – simplify (strip subs). Adding / changing into child subs no worky.

  18. diet says:

    A gοod diet gives you more energy and
    imprߋves your woгҡouts. Your all extrа weight will be losst
    and provide you mucɦ better self confidence which was never еver
    before inside you. But, most dieters asseѕs thе quantity oof
    calories burnt while eхerсising and the amoսnt of calories
    consumed inacсurately:Calorіes burnt are overrated and
    calories eaten underrɑtеd.

  19. pinterest says:

    It should come as no surprise, then, that Pinterest is fast becoming a
    top social networking tool. Google+ is a social networking site that has a range of different features
    that you can use to connect with patients and other healthcare
    professionals. See the action on the left hand column of
    the home page.

  20. Luke says:

    Very descriptive blog, I liked that a lot. Will there be
    a part 2?

Leave a Reply