5

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.

Samy Dindane
  • 17,900
  • 3
  • 40
  • 50
skyrail
  • 139
  • 1
  • 7

1 Answers1

9

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.
webextensions.org
  • 731
  • 6
  • 15
  • 1
    Do you know if it is possible to load external scripts via browser extensions? I have a bookmarklet that is loading a lot of code and is meant to be used by people who wont run a local webserver under any circumstances. – Max Jan 11 '13 at 15:47
  • Try https://builder.addons.mozilla.org/ and https://developer.mozilla.org/en-US/docs/XUL/School_tutorial ... you should be able to generate such extensions for Firefox ... you will need to go through Mozilla's policies if you wish to publish it publicly ... similarly you should be able to find resources for Chrome & Opera ... OR ... you can just let the JS files load and enable caching so that the repeat usage works fine (the cache-control HTTP header does that ... as you can see for bookmarklets at http://jsbookmarklets.com/) – webextensions.org Jan 11 '13 at 18:35
  • Putting all the code into the bookmarklet won't work if you need to load another site in a hidden IFRAME in order to make requests to a server in that domain which would otherwise be prevents by cross-domain restrictions. "browser bookmarklets shouldn't be affected by CSP...But, none of the browsers get this correct. All cause CSP violations and prevent the bookmarklet from functioning." https://github.com/blog/1477-content-security-policy So really, this is a bug which needs to be fixed in all browsers. – Michael Jan 15 '14 at 21:12