Since the early days, browsers have prevented cross-site scripting by ensuring that JavaScript cannot access files loaded from another domain, such as the source of an iframe. Unfortunately, the same logic was applied to subdomains, so JavaScript code on subdomain1.mattsnider.com cannot access subdomain2.mattsnider.com. This causes problems if you organize your site by subdomains that need to communicate with each other via JavaScript or AJAX. Fortunately, browser makers added the document.domain property to allow you to change the domain used for page origin checks to a parent domain, instead of the subdomain.

This means that if I wanted subdomain1.mattsnider.com to be able to communicate with subdomain2.mattsnider.com I would need to set document.domain="mattsnider.com"; in a script tag in the head of each page. This causes the browser to treat both sites as coming from "mattsnider.com" when performing the site-origin security check, allowing them to access each other.

Now document.domain only works with a parent domain to the current subdomain. Meaning, you could not set it to a different domain, such as mattsnider2.com, or a different subdomain like files.mattsnider.com. However, if you had these two subdomains subdomain1.test.mattsnider.com and subdomain2.test.mattsnider.com, you could set document.domain to test.mattsnider.com, since it is a parent subdomain in the subdomain hierarchy.

Lastly, document.domain is supported by all major browsers, so we don&rsquot;t have to worry about crossbrowser issues. I have tested it in Firefox 2,3, IE6,7,8, Chrome, and Safari 3 and 4, Opera 9. Let me know your experiences.