Client-side website reachability test

Question

I am building a Facebook application which runs through the apps.facebook.com system. This question is not about Facebook apps specifically (so don't stop reading if you are not familiar with these) but you'll see why this is important shortly.

Whenever a user wishes to use the app, they will go firstly to a standard website (with a more memorable address, let's use the example xyz.com) which will then automatically redirect to the Facebook application. However, there are two possible redirection destinations:

1. To the standard Facebook application page (e.g. apps.facebook.com/xyz). This should occur if the client can reach that page. Importantly, a reason that the client may not be able to reach this page is if they are on a network running a content filter (e.g. schools, universities, some workplaces) which blocks Facebook.

2. If the client cannot reach the Facebook application page they should be redirected to another page on the main website (e.g. xyz.com/nofacebook_login.html).

As you can see, the redirection decision needs to be based upon whether the client can reach the Facebook application page, or not. Therefore, the testing will need to occur on the client-side (presumably) using Javascript, jQuery, or similar. However, I am unsure how to go about this.

Any suggestions would be greatly appreciated.

Answer 1

The obvious solution (just send an AJAX request to the remote domain and see what is the response) doesn't work due to the same-origin policy.

You could ask Facebook to implement the Cross-origin resource sharing protocol. If they agree, the rest is easier. If not, however, $.ajax - or the native XmlHttpRequest - won't do.

However, while the XHRs are subject to the same-origin policy, other ways to send an HTTP request are not: You can create an image with the src of some image on apps.facebook.com, and see if it loads. The problem here is that facebook serves most of its content from akamaihd.net, which is unlikely to be co-blocked with apps.facebook.com. I did, however, find one image served from apps.facebook.com: http://apps.facebook.com/images/spacer.gif (http://facebook.com/images/spacer.gif also exists). @RobW also pointed me to the favicon (http://apps.facebook.com/favicon.ico)

To test if an image can be loaded:

1. create a new img element
2. add a load listener and an error listener to it, that will perform the redirect
3. set the img src
4. adding the image to the document should not be neccessary, but I haven't tested everywhere.

var img = document.createElement("img");
img.onload = function(){location.href = "http://apps.facebook.com/xyz"};
img.onerror = function(){location.href = "http://xyz.com/nofacebook_login.html"};
img.src = "//apps.facebook.com/favicon.ico"; //thanks @RobW
document.body.appendChild(img);

---

Note: nowhere does Facebook guarantee either image will always exist. While there seems to be a decent chance it will stay, it may disappear eventually. If this happens, everyone will appear blocked (you may want to check the error code, but I don't know what the blockers return). If it happens, please notify me or update this answer with a new working image.