When I'm working with developing a website, I often would like to see how a specific feature would look on a website. So I go to the chrome developer tools and often run some javascript scripts.

I often find the issue that some scripts can not run because of the Content Security Policy (CSP), which I completely understand for purposes of protecting against cross site scripting.

QUESTION: Since I am testing features with the developers console on a page that is loaded for me on my browser client, I was wondering if there was a way to disable the CSP for that specific page after it has loaded? Possibly somewhere in the source code with inspect element, or in some settings part of the developer console.

When I'm working with developing a website, I often would like to see how a specific feature would look on a website. So I go to the chrome developer tools and often run some javascript scripts.

I often find the issue that some scripts can not run because of the Content Security Policy (CSP), which I completely understand for purposes of protecting against cross site scripting.

QUESTION: Since I am testing features with the developers console on a page that is loaded for me on my browser client, I was wondering if there was a way to disable the CSP for that specific page after it has loaded? Possibly somewhere in the source code with inspect element, or in some settings part of the developer console.

• javascript
• google-chrome-devtools
• content-security-policy

3 Answers 3

I can't necessarily vouch for the best way to do that, but there is a use at own risk extension available for disabling CSP: https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden?hl=en. A quick search on the chrome google group (https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/TZaaNTPOqt0) indicates that there is not a native way to do this using only the developer tools.

The answer from @cs-qgb saved my life, unfortunately I cannot upvote it.

If you have access to http/https header just put Content-Security-Policy equal to empty string and your life will be easy after that.

This link allow-all-content-security-policy is also helpful

You have said you are developing a website so I assume you have access to http headers. But if you don't want to change the headers in your application there is another ways to do that.

One possible way is to put a proxy server between browser and the server and removing this header when delivering the content back to the client.

Here is a nodejs sample using mockttp

(async () => {
    const mockttp = require('mockttp');

    const server = mockttp.getLocal({
        https: {
            keyPath: './key.pem',
            certPath: './cert.pem'
        }
    });

   server.forAnyRequest().forHostname("example.com").thenPassThrough({
       beforeResponse: (response) => {
             response.headers['content-security-policy']="";
       }
   });

    await server.start();

})();

The sample code is from here here

disable 'Content-Security-Policy'

response.headers['Content-Security-Policy']=""