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

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.

117798 次浏览

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.

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:

Content-Security-Policy is designed to prevent websites from security attacks like cross-site scripting (CSS) and clickjacking. CSP is a directive to browsers that tells the safe domains to load content from. You can see different attributes in the content-security-policy directive like

default [Default directive]
script-src [URL patterns from where scripts can be loaded]
image-src [URL patterns from where images can be fetched
...

CSP can also restrict browsers to load incline scripts or run unsafe commands like eval.

Having said that It is recommended against loading Chrome in unsafe mode (disabling content-security-policy for all domains) unless you are only doing development and not doing regular Internet browsing.

You can use any Chrome Extension that allows you to modify HTTP request & response headers. In this case, you only need to modify response headers. You can try using Requestly in Chrome or Firefox and create a new Modify Headers rule to remove CSP response header like this

Removing content-security-policy header on apple.com (Screenshot)

You can replace apple.com with the domain on which you want to Inject the script.

Removing content-security-policy header on apple.com

Here's a small youtube video explaining what is content security policy and how you can bypass it in your local dev & QA.

Feel free to use any browser extension to modify the CSP header to solve your problem. Requestly is just one of the ways. If you prefer writing your own browser extension, here's an open-source Github extension template - https://github.com/requestly/modify-headers-manifest-v3 that you can quickly use & roll-out your own.