Frank DENIS random thoughts.

Cross-subdomain AJAX made simple

Cross-domain AJAX is possible, but really lousy to achieve in a clean and portable way, especially if you want to support POST operations.

There’s a bunch of articles about the subject, with different approaches (iframe with dynamic anchors to communicate with the parent, dynamic script tags, Flash bridge, browser-specific tricks) but they all have limitations and they are quite bloated.

If you only need cross-subdomains AJAX calls, there is a way, way, way easier way.

I looked for a long time before spotting this, and I would really love to give a big thank you to Abe Fettig for writing about this.

The trick is simple: document.domain

If a document and an iframe share the same value for their document.domain property, the iframe can access the parent DOM without any security violation.

and

The document.domain property can be changed anytime, as long as it’s the original value or as long as it shares the same suffix. For instance, if the current value for document.domain is www.example.com the property can be set to example.com but not to example.net.

See the trick ?

Set the parent and the iframe document.domain property to the domain name (for instance) when you need the iframe to send back data to the parent. And reset the original document.domain in the iframe before doing AJAX calls.

Download that simple example and see by yourself. The parent URL can be anything.jedi.devteam while the iframe (and so, the authorized host name for AJAX requests) is subdomain.jedi.devteam . Both set document.domain to jedi.devteam so that the iframe can call window.parent.update_me(), with any local argument like the result of an AJAX call.

Thanks again to Abe Fetting for that very useful hint.