84

I was trying to include JQuery on an existing website using console this way:

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

Then I got this error:

Content Security Policy: The page's settings blocked the loading of a resource at http://code.jquery.com/jquery-1.11.1.min.js ..

During development I might want to include external Javascript. I might not want to copy paste the entire JQuery code since it does not look neat. How to override the content security policy for development purposes?

This would be really useful for quick testing. I might want to convert the script I am writing to a browser extension later on.

Note (update): I am writing the script over an existing website and do not have control over setting the Content-Security-Policy header.

Pranjal Mittal
  • 10,772
  • 18
  • 74
  • 99

3 Answers3

83

You can turn off the CSP for your entire browser in Firefox by disabling security.csp.enable in the about:config menu. If you do this, you should use an entirely separate browser for testing. For example, install Firefox Developer Edition alongside your normal browser and use that for testing (and not normal Web use).

As an alternative, it should be possible to alter the Content-Security-Policy response header before it gets to your browser (via an HTTP proxy). It is also possible to do this with extensions.

A Chrome extension can set its own CSP for its own chrome-extension://... pages, but it cannot alter the CSP of a normal webpage.

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • Found a way to do it in chrome extensions. I haven't tried it so far. https://developer.chrome.com/extensions/contentSecurityPolicy – Pranjal Mittal Dec 05 '14 at 20:58
  • 2
    @pramttl That sets the CSP internally for an extension; it's not a mechanism for an extension to alter the CSP of a normal webpage. – apsillers Dec 06 '14 at 00:52
  • If the extension is installed (and active) then shouldn't the CSP be set for the pages the extension applies to? – Pranjal Mittal Dec 06 '14 at 00:57
  • 1
    @pramttl No, extension CSP applies only to extension pages, not webpages; I don't think it even applies to content scripts injected into webpages. – apsillers Dec 06 '14 at 01:38
  • 2
    I know this is incredibly old, but I came across it while trying to inject Artoo.js into a page. The chrome extension does indeed allow you to modify the page you're looking at and let any content through. – Keith Hanson Nov 01 '17 at 17:53
  • 1
    @KeithHanson You're saying that modifications made by the extension aren't subject to a page's CSP? Separately, are you saying that a Chrome extension now *can* modify the CSP in force on a page after load time? (I've been out of Chrome extension dev for a long time.) – apsillers Nov 01 '17 at 19:37
  • 1
    I wonder why there wouldn't be setting in console, much like `disable cache`? – Jikku Jose Aug 29 '20 at 06:22
  • 9
    Update: This preference was removed in Firefox 99, from both Firefox and Firefox Developer. See support question: https://support.mozilla.org/zu/questions/1374424 and original developer forum convo, discussing the potential change: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html. – mikekoscinski Jun 06 '22 at 18:53
  • gosh, everybody is pointing to this chrome extension... But if the extension can do it, then WHAT IS THE JS CODE TO DO IT ??!! – Matt Sep 30 '22 at 13:28
  • @Matt It's a necessary security feature that JavaScript cannot alter the CSP, because the CSP is *designed* in large part to limit what JS can and can't do on a page. If JS could alter it's own CSP rules, there'd be no point in having them. (I also don't let my dog decide how long his leash gets to be.) The CSP is set by HTTP headers when an HTTP server sends an HTML page. Chrome extensions aren't served over HTTP (they reside locally) so the extension system allows you mimic the same CSP-setting ability that an HTTP server has at page-load time (never at JS-exectuion time). – apsillers Sep 30 '22 at 14:47
2

I am using this Chrome extension to disable CSP on a per-tab basis.

Disable Content-Security-Policy extension:

There is a fork that disables CSP by default.

Always Disable Content-Security-Policy extension:

XP1
  • 6,910
  • 8
  • 54
  • 61
0

I found a way to do this without opening security holes. It's a bit complicated, but overriding security rules should be. You need:

  • A browser plugin that can add headers to http responses. I used simple-modify-headers for Mozilla.
  • A web server where you can host your script. I used Rebex Tiny Web Server for Windows on the local machine.

Host the .js file on the web server.

Configure the plugin to add the header Content-Security-Policy: script-src <url>; to any site you might want to load from, where <url> is the url of the script, or the directory it's in. For example, http://localhost/Programming/. Make sure your plugin modifies any existing header instead of overwriting, or the site can break.*

You can now load the script from the console or a bookmarklet:

javascript:(function() {const script = document.createElement('script'); script.src = 'http://localhost/???.js'; document.head.append(script);})();

I have tried to whitelist a file:// uri instead, which would remove the need for the web server, but it just doesn't seem to work.

*: Weirdly enough, with Simple Modify Headers, it only seems to work if I run it with "Filter URL per rules" on. (under "parameters")

Black Mantha
  • 1,147
  • 8
  • 11