jQuerify not working with facebook on chrome

Question

jQuerify is a small bookmarklet to add jquery support to the web page currently displayed. Take a look at this page: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/

This demo let me know if jquery is already downloaded, load it if not, then display the active version. My problem is: nothing is displayed on some pages, when browsing with google chrome, like facebook, google (not a cached page but page results) It is working on these pages when using IE.

I tried to disconnect user google session on chrome, but I still have the problem. I thought it was caused by https url. But it display fine in IE after I confirm "display all content".

May be there is a misconfiguration in Chrome? Is there any fix for jQuerify or should I give up and find another solution to load jquery and remote script?

Thanks for advice.

Answer 1

In Google Chrome, you can see the error message in browser's console.

It says: Refused to load the script 'http://code.jquery.com/jquery.min.js' because it violates the following Content Security Policy directive: "script-src https://.facebook.com http://.facebook.com https://.fbcdn.net http://.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net .google.com 127.0.0.1: *.spotilocal.com:* chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl 'unsafe-inline' 'unsafe-eval' https://.akamaihd.net http://.akamaihd.net".

This is due to the fact that Facebook has implemented a security feature which is implemented with an HTTP header "X-WebKit-CSP".

That is why current implementation on Facebook affects loading external scripts in the webkit based browsers (Chrome and Safari) jQuerify bookmarklet works fine on Firefox and IE.

Solutions for Chrome, you can do it with the following approaches:

• Since you can see in the details above, 127.0.0.1:* is supported. Just run a simple web host on your system (eg: Apache web server). Copy jquery javascript file into your Apache linked directory on your system. Now this file would be accessible with a path like http://127.0.0.1/jquery.js (Note: do not use http://localhost/ here). In the jQuerify bookmarklet, change the path of jQuery file from http://code.jquery.com/jquery.min.js to http://localhost/jquery.js . Now the bookmarklet would work fine.

       OR

• Load the whole jQuery code into the bookmarklet so the it does not load external script files. Not recommended since this would not as helpful as the first approach if you wish to use it for debugging through jQuery file as well.