Same origin policy — JavaScript calling PHP

Question

I know that this is a popular topic, but I've yet to find an answer that's completely comprehensive.

I'm trying to create a simple way for our 'customers' to place a Google Map on their website, which plots the position of our customers (or a subset thereof) on the map. The customers are in a MySQL database which is turned into XML on-the-fly by a PHP script (as per Google's example). This works fine on my website, but when I try it on another website the xmlHTTPRequest is not allowed to look at the PHP as it's on another domain.

I can circumvent this by writing another PHP file on the other domain which simply reads the PHP file on the original domain. But not all our customers will have PHP running on their servers. Is there any way that I can return the XML results from our database using JavaScript?

A couple of points:

1. The JavaScript that makes the xmlHTTPRequest still sits on our server -- our clients link to it from a script tag. I thought that might be enough, but the 'origin' (according to Chrome, anyway) is still seen as domain#2

2. This is great: if I use an absolute reference in the xmlHTTPRequest (e.g. request.open('GET', 'http://mydomain.com/api/foo.php', true)) then it will fail in IE, but if I use a relative reference ('/api/foo.php') it will work.

3. I don't know enough about it, but could I use JSON? I've seen: 'script src="http://..../someData.js?callback=some_func"' but don't know how, I would make 'someData.js' look like JSON? (I'm thinking very much in terms of functions, which probably is incorrect?).

4. I've tried adding: header("Access-Control-Allow-Origin: *"); to the top of the PHP that outputs the XML, but it's not really doing much that I can tell!

5. If I do use a PHP wrapper on the client's server, what's the advantage of using a cURL request, rather that simple file_get_contents or fopen?

Sorry, lots of questions, but any guidance would be greatly appreciated.

Massive thanks,

Mat

Answer 1

An easy way around this is to let your PHP script return something like:

callback_function(YOUR_DATA);

Then in the JS script included on the clients site you dynamically insert a <script> which has src pointing to your PHP script:

(function() {
    var scriptElement   = document.createElement('script');
    scriptElement.type  = 'text/javascript';
    scriptElement.async = true;
    scriptElement.src   = 'http://example.org/yourScript.php?data=...';
    var container       = document.getElementsByTagName('script')[0];
    container.parentNode.insertBefore(scriptElement, container);
})();

This technique is called JSONP and should do exactly what you want ;)

Another way around the problem would be allowing cross-domain XMLHttpRequest in the Content Security Policy. But I think only Firefox 4 supports that right now.

Answer 2

Can you use JSON instead of XML? If so, your option 3) is probably going to be your best bet. There are security risks with this approach, and it should only be used for known and trusted sources.

More reading: http://www.codeproject.com/KB/aspnet/JSONToJSONP.aspx

Answer 3

JavaScript is Client-Side, but the database is not. JavaScript can not pull from a MySQL database directly.