CODEWITHSUNDEEP
javascripthtml
Mike Christensen
Mike Christensen

Reputation: 91666

How to test if a script is valid before including it

This might be a stupid question, but I'll take my chances.

On my site, I include the following script file:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Normally, this would work just fine. However, where I work we have a firewall that blocks any traffic to the facebook.com or facebook.net domains as obviously no employee has enough self-control to prevent themselves from playing Farmville all day long instead of working.

Thus, when the script loads it actually gets a bunch of HTML saying the site is blocked. Since this is HTML and not valid Javascript, the browser pops up script errors. Note, I still get an HTTP 200 so I can't catch errors that way.

I'm willing to accept this is an edge case, since only a small percentage of users would be trying to access my site from behind a firewall that happens to block Facebook traffic, but I still find myself wondering if there's something relatively easy I can do to test to make sure the link returns valid Javascript, or perhaps surround the loading of the script in a giant try/catch block and handle errors gracefully. Any ideas would be much appreciated!

UPDATE:

Here's the HTTP headers from the firewall's error page. Perhaps I can look at the "content-type" header, which I assume would be text/javascript if the content was valid.

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/html; charset=utf-8
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Content-Length: 4774

Upvotes: 4

Views: 1249

Answers (3)

josh3736
josh3736

Reputation: 145002

Unfortunately, there's no way for you to test that connect.facebook.net is not being blocked since it is served from a different Origin than your document.

This means you can't use XHR to issue a HEAD request and make sure the content type is really text/javascript – XHR won't make a cross-Origin request by default, and connect.facebook.net doesn't support CORS:

OPTIONS http://connect.facebook.net/en_US/all.js HTTP/1.1
Host: connect.facebook.net
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Origin, X-Requested-With, Accept

HTTP/1.1 501 Not Implemented
Server: AkamaiGHost
Mime-Version: 1.0
Content-Type: text/html
Content-Length: 272
Connection: close

Technically speaking, the filtering/firewall software in question is incorrect in that when it blocks a site, it provides a success status code (200) when it should be providing an error code (4xx or 5xx). If it did correctly respond with an error condition, the browswer wouldn't parse the response body as script (thus causing errors).

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Looking at your edit, you could check via ajax the content type of the response and when it's text/html don't append the script: use <xhr>.getResponseHeader("Content-Type");

Edit: As josh3736 pointed out, Cross-site request are not allowed via javascript so you will also need to call an internal resource (written in a server side language) that works as a proxy and try to get the script, returning its content type (e.g. look at this discussion: php, curl, headers and content-type)

Upvotes: 1

Simon Sarris
Simon Sarris

Reputation: 63830

This is how a fallback is done:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>  
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.4.min.js'>\x3C/script>")</script>

In this case, it attempts to load jquery from googleapis.com. If that is blocked or unavailable it loads a local jQuery.

You can use the same technique. Make a second script to detect if the facebook script file has loaded. If it has not loaded then don't run any associated script with it.

Upvotes: 1

Related Questions