60

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
  • 8,544
  • 14
  • 63
  • 91

2 Answers2

67

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
  • 101,930
  • 15
  • 206
  • 224
  • 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
  • 1
    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
  • I wonder why there wouldn't be setting in console, much like `disable cache`? – Jikku Jose Aug 29 '20 at 06:22
-3

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,112
  • 7
  • 48
  • 59