disabling Content Security Policy

Question

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.

Carbamidine

Answer 1

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.

Heterosexual

I did install this plugin but that still didn't really remove that error from my chrome dev tools. – Radcliffe

Answer 2

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

Phosphorate

Answer 3

disable 'Content-Security-Policy'

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

Catchword

How/where is that code snippet supposed to be used? – Inch

The question is about disabling CSP in the browser after page load, so your answer is not relevant. Anyway, in general, please add more context, i.e. the language, framework, platforms, file names (if relevant). Also references to related documentation. All of it makes for a usable and useful answer that will make you earn good points :) – Inch

yo this helped. @Inch this is used in the server by setting in response headers. – Ramiah