how facebook does cross domain ajax call? - javascript

I am looking forward to create a javascript API that contains most of the functions that facebook Javascript API provides.
FB.api
FB.init
FB.logout
FB.getLoginStatus
FB.login
FB.ui
I can just embed script tag in remote website and need to do all the ajax calls from that page to my server. I am creating an architecture and needs someone help in finishing it with his/her excellent ideas.

Take a look at https://github.com/facebook/facebook-js-sdk/blob/deprecated/src/core/xd.js
They use a combination of rpc workarounds (with a relay file), Flash Local Connection and postMessage, whichever is supported by the browser.

You can also take a look at Cross Site XmlHttpRequest(CORS). From your question, it seems that you can control your server that will respond to the requests. In that case, you can tune the headers to receive requests and respond to cross domain requests.
Then, your embedded script will be able to talk to your server from any web page if you configure the request header in the requests that you make from your embedded script.
I like this method as it is extremely easy to implement. Watch out for browser support though!

They are using JSONP. It's widely used and is supported by javascript frameworks like JQuery.

Related

Javascript - send and receive data from another domain

I'm trying to create a javascript plugin which needs the ability to send and receive data from another domain.
Conceptually, the plugin is simple:
The users installs a piece of javascript code
The code communicates with central server (on another domain), sends some info about the user's site (a form of query) and get's some info back
The server domain would be fully under my control , but as you can see, end-users should be able to use the plugin just by installing a piece of javascript code.
Is this possible and if yes, what would be the simplest form of implementation?
Thank you!
You basic problem will be circumventing the same origin policy of JavaScript (Wikipedia). Basically you have two options, if you want to use only JavaScript on the client side:
CORS (cross-origin resource sharing): Here you enable the sharing on your domain and the JavaScript on the user's side will be able to interact with any data as if it was on their own server, thus you have no problems with the same origin policy. You can do AJAX request in the same way as if interacting with your own server. For details on how to activate this on your server environment see here. Note however, that this is not supported by older browsers see caniuse.com for details.
JSONP: All requests use the JSONP syntax. Wikipedia on the topic

Javascript API hindered by Cross Domain API calls

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 -
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?
Is there any other better mechanism to implement this functionality?
Please suggest so that I can proceed with the implementation.
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.
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?
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...
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.

Explicitly allowing cross-domain iFrame scripting for an SDK

I'm beginning to develop a JavaScript client SDK that adds an iFrame to the DOM. The URL of the iFrame is on my domain, but the SDK is going to be used on third party domains. What is a reliable, cross platform, degradable method of allowing my client SDK to manipulate the iFrame? I want to allow the people implementing my SDK to have a set of functions to call and events to subscribe to which originate from the iFrame.
Facebook seems to do a really good job of this in their Apps & Pages system. Usually in that case, though, you're calling out from within a frame. Mine is bidirectional.
I found a great blog post detailing an older method of accomplishing this. It also links to several libraries that implement the various methods.
Porthole
XSSInterface
EasyXDM
jQuery PostMessage Plugin
Why don't you look into JSONP instead? It's JSON with Padding and allows cross-domain requests. I'm only thinking that iframes are so passé.
You have the problem with cross-domain policy. If you have it in another domain you don't have to have iframe. Use a webservice or simply send POST or GET messages to a URL.

Avoid x-domain solutions

I'm currently working on a web application that customers can add to their webpages by adding a javascript link to a js file on my server. The application read all the javascriptfiles from my sever, but I still get an error when trying to use ajax to get data from my database. I didn't think that would be a problem because the files is on my server.
Can I fix this or do I have to make a cross-browser solution? I don't have any control over the costumers server.
Thanks in advance
Mikael
This is not possible: When you execute a remote script, it runs in the context of the containing document.
There are some popular workarounds for this:
Using an iframe, which fixes the cross-domain problem but doesn't integrate well with the remote site (e.g. no custom styling)
Using JSONP to make cross-domain Ajax requests (detailed explanation here)
Using a server-side proxy script (not an option in this scenario)
Using YQL (I'm not familiar with this but it's said to work)
The same origin policy is based on the host document not the script itself.
You need to use a cross domain ajax technique.

javascript / ajax question

I'm wondering if anyone knows a javascript library where I could remotely login to a site, then browse pages upon logging in.
This is very easy with php's curl but I'm wondering if there is a javascript equivalent where I can execute multiple remote url's under a single http session.
Basically what I'm looking to do is post a username/password to one of my sites and then immediately post some other commands to a different url (same remote domain) using the authenticated session.
I haven't come across anything like this yet so I'm wondering if anyone can point me in the direction (if it's even possible). Can definitely be HTML5.
Due to same origin policy restrictions in browsers this is not possible using javascript. You need a server side script that will act as a bridge between your site and the remote sites. Then talk to this local script using AJAX.
There are some techniques available to bypass the same origin policy:
If you don't need to read the response of your POST calls, you can create a FORM by javascript with an action to any url (not limited to the same origin policy) like in this question: How do I send a cross-domain POST request via JavaScript?
But this means you rely only on session cookies for the security, this is open for XSS attacks.
As you own the other domain site, you could develop a small service that returns a JSON with the data you need, and use the JSONP technique, eg:
<script src="http://otherdomain/curl?url=page.html&callback=cb">
</script>
May be you could signin before using the POST technique above and sending a secret token that you reuse in the url to improve the security.
And finally there is a way to act/read on other pages using a bookmarklet.The idea is to inject in the other domain's page a script that can run with all the privileges, and send back information to your domain.
But this requires a manual action (click a link or a browser bookmark)

Categories