Javascript API hindered by Cross Domain API calls

Question

I need to provide a functionality similar to "Share with Facebook" for my social networking site. Facebook uses nested iframes and also xd_receiver concepts. I want to write a JavaScript API(JS file hosted on my domain), which can be used by different sites to call my web server APIs in order to share, post or recommend on my social networking site. I have a few questions -

1. Even though I provide the JS API, and diff sites load the JS file using the source, if any API call is made, it will again be a cross domain call(If I am comprehending correctly) and will be rejected on the server? How to overcome such situation?

2. Is there any other better mechanism to implement this functionality?

Please suggest so that I can proceed with the implementation.

Answer 1

I think the default way is to use jsonp to get around cross domain limitation. http://en.wikipedia.org/wiki/JSONP. It might require a change in your api though. A user requests your api through the src of a script tag passing in a function callback. Your api would return pass your json response to the function specified.

Answer 2

Do you know why they use iframes and not simple get requests with JSONP/Images/scripts?

The answer is security. I cannot write a script that clicks their button which will automatically "like" the page.

Using plain old JavaScript with a JSONP will allow the developer to automatically click the button. Do you want that to happen?

Answer 3

The requests are made by the browser and not from the JS file, so, your requests will be cross-domain every time they did from another domain site.

Your server will only reject cross-domain requests if you implement a referrer validation.

And you can use JSONP if your API needs custom contents from your site...

Answer 4

To allow cross domain requests, you need to set the following Header in your HTTP Response:

Access-Control-Allow-Origin: *

The implementation will vary depending on the back-end you are using.

If the host in the Origin header of the request is anything but the host of the request, the response must include the listed Origin in the Access-Control-Allow-Origin header. Setting this header to * will allow all origins.

For very specific information on cross origin resource sharing see http://www.w3.org/TR/cors/. If you're not big on reading w3c documents, check out MDN's primer.

Note: Internet Explorer does its own thing with regards to cross domain requests. This answer is a good start if you have issues with IE.