How to override content security policy while including script in browser JS console?
JavascriptBrowser ExtensionContent Security-PolicyBrowser SecurityJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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: