How do mashups work with same-orgin policy?

Question

If Javascript is only allowed to access scripts from the same domain, how can a website create mashups which must read and modify content from another domain?

Answer 1

Cross-browsers solutions

JSONP

If the API you're trying to access supports JSONP, you only have to provide a javascript function name in your request, then the JSONP returns javascript like myfunc({the:data}); which you can run like a regular javascript, which is why you would create a new <script src="www.website.com/somecall?jsonp=myfunc"> tag to "send a request" (jQuery does this automatically if you use type: jsonp in $.ajax requests).

The downside is that it requires the provider of the API to support JSONP.

Flash

Flash can access cross-domain contents as long as the target website has a crossdomain.xml file at its root that says it allows it, which is usually the case on servers that provide an API).

The downside is that it requires Flash in the user's browser and that the website you get data from must have a crossdomain.xml that allows cross-domains requests.

Server-side script on the same domain name

Server-side languages like PHP have no BS same-domain restrictions, so you could have a script that acts as proxy (e.g. download via one of the http extension like cURL).

The added benefit is that you can cleanup the data (or even mashup multiple sources) on the server, before forwarding it to your webpage/javascript, so you could even extract only the useful part of the data, which is nice when doing mobile webapp where bandwidth can be an issue.

The downside is that all requests have to go thru your server, so that increases the load on your server.

However the benefit is that it would work with any ressource as it doesn't require the target to support crossdomain or jsonp. So if nothing else works, this would.

---

Solutions specific to some browsers

Internet Explorer

Internet Explorer has Cross Domain Request

Firefox

Firefox 3.5+ has the cross-origin sharing standard, but it requires the ressource you're trying to access to include special headers, e.g. in PHP:

header("content-type: Access-Control-Allow-Origin: *");
header("content-type: Access-Control-Allow-Methods: GET");

A few other major browsers support this too, so if you don't need to support old browsers and if you can get the ressources you're trying to access to send those headers, this may be your best bet, otherwise the server-side script would be my recommendation.

---

Firefox also has a user setting capability.policy.default.XMLHttpRequest.open, but I wouldn't count on the user changing a setting in his browser.

Answer 2

You can use API(of another domain) for that. Your Javascript will call the PHP file(or other script file) that is on your web server(your domain), which will call the API(of another domain using CURL) and get the response to you.