How to override content security policy while including script in browser JS console?

Question

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.

Answer 1

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.

Answer 2

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 that doesn't work. Makes sense, since that would allow web pages to access your drive.

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

Answer 3

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

Disable Content-Security-Policy extension:

• https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden

There is a fork that disables CSP by default.

Always Disable Content-Security-Policy extension:

• https://chrome.google.com/webstore/detail/always-disable-content-se/ffelghdomoehpceihalcnbmnodohkibj