Why doesn't setting document.domain work to allow AJAX requests to a parent domain?

Question

I have two files, domain.com/test2.php:

&l         


        

Answer 1

The document.domain mechanism is intended for allowing client-side communication between frames, rather than client-to-server communication. If you have one frame containing a page from example.com and another frame containing a page from foo.example.com then the two cannot access each other's DOM unless the latter sets document.domain to example.com as you showed in your example.

The modern preferred mechanism for cross-domain AJAX requests is Cross-Origin Resource Sharing, or "CORS". This mechanism involves having the target resource return a special HTTP response header that indicates that cross-domain requests are allowed. In your scenario you'd make your test3.php return the following HTTP response header:

Access-Control-Allow-Origin: sub.domain.com

In PHP you'd do this as follows:

header("Access-Control-Allow-Origin: sub.domain.com");

You can also set this header value to just * in order to allow cross-domain requests from any origin, but be aware that this will allow requests from sites you don't control.

Requests from client-side JavaScript libraries often also include the additional header X-Requested-With that is not in the standard set allowed by CORS, so it may be necessary to explicitly allow this header via an additional response header:

Access-Control-Allow-Headers: X-Requested-With

CORS is only supported in modern browsers. For older browsers the common convention is to use JSON-P, which is a trick exploiting the fact that a page on one server is able to load and execute a script file from another server. This technique requires that the target resource be a valid JavaScript program that calls a function in the page, so it's not as elegant and seamless as CORS but it should work in any browser that supports JavaScript.