Facebook Javascript SDK Security. How do Facebook

There are few questions with same name but none of them intended to ask what I have in my mind. So we initialize FB js sdk with only app id. It's easy to know other web site's app id by looking at their facebook initialization source code. One might think that it's possible that a hacker might try to initialize FB JS SDK with other's app id and try to get their user access tokens. But facebook doesn't allow such stuff. You have to load js sdk from the same domain you specified in the site url property in Facebook Developer Apps page. So the question is how do they know that the jsonp whatever calls coming from the right client? It's not safe to that checking in client side since people can copy and modifty the javascript as they wish. So it has to be server side checking. I can only think of "referer checking" but I feel it cannot be considered a safe way.

Well, I'm not sure so this is only speculation..

First of all, when making an http request the HTTP referer header is added, and so when you load the sdk the url from which you're making the request is added as a referer. Facebook can check on their servers where the request was originated from and compare that to what they have for the app settings.

It's possible of course to modify this header when making the request, which is why you don't get any error just by loading the sdk for an app if you're in the wrong domain. The error will only occur when you try to interact with the sdk, for example trying to execute the FB.login method will open the auth dialog pop-up which will show the following error message:

An error occurred. Please try again later.

If you check the url of this auth dialog (which the sdk constructs) you'll notice these two query string parameters:

domain=THE_DOMAIN_OF_THE_PAGE
redirect_uri=FACEBOOK_URL which will contain origin, domain and relation=opener

What (probably) happens is that facebook checks the domain against the app settings, if it's ok it presents the user with the auth dialog, when he finished the process he is redirected to the redirect_uri.

Since the redirect_uri opens in the pop-up it can only communicate with it's opener if they are both in the same domain, a facebook domain which no one can have on his page other than pages served from facebook.

When the sdk loads it adds an iframe into the fb-root container which loads a facebook js which is loaded from the same domain as the redirect_uri, because of that the pop-up window can communicate back with the iframe and inform it with the auth response.

After the iframe got the response, the pop-up closes and the iframe informs the loaded sdk in the main page of the response. I'm not sure which technique they use for that communication, but you can easy find more info about that by googling "cross domain iframe communication".

That's how I see it, but I can't be sure. You can check the code for the js sdk @ github if you want to really know what's going on.