Bypassing Content-Security-Policy for Websites

I was in the process of answering this question

Is it possible to connect to a local Python server using secure web sockets from a browser console on an HTTPS webpage? stackoverflow.com
so i thought i'd write a blog post about it anyway
Discover how to overcome the content-security-policy for a website.

Browser Extensions Manifest v2

so right off the bat, manifest v2 is capable of removing the contest-security-policy on a web request
firefox still ( currently, at the time of writing ) supports manifest v2, it has the bindings for manifest v3 but they are just stubs that do nothing
chromium and hence google chrome, edge, brave, opera and any of the myriad of browsers that are based on chromium do not support manifest v2
google's official stance on manifest v3 changes
"To prevent extensions from weakening site security. Allowing CSP removal would undermine protections against XSS and remote code injection."
Improve extension security developer.chrome.com
for those who wish to develop using the old manifest v2, previous versions of chromium can be downloaded from
Downloading old builds of Chrome / Chromium chromium.org
manifest V3 is supported generally in Chrome 88 ( January 19th, 2021 ) or later.

Firefox Manifest V2 Extension Remove CSP

to load an unpacked extension goto about:debugging#/runtime/this-firefox

Google Chrome Manifest V3 Extension Remove CSP ( doesn't work )

How to Tell if it Worked? Were the Headers Actually Removed.

Well the test in question was on a webpage protected with a content-security-policy, create a websocket to a local server ( or other )

So i thought this would make for some interesting code
Its worth noting here that when a server uses a certificate not in the trsuted root store, self-signed or otherwise, it requires top-level navigation to get the browser to accept that certificate, any other form of navigation will fail silently
Its also worth noting that often when extensions modify the headers, dev tools reports the original headers, if you look at the test-server, it provides a simepl webpage that 1. allows top level navigation to accept the self-signed ( unrecognised ) certificate, 2. it also displays the page headers as received after the extension has modified them.
Here is a minimal websocket server, supports text only, upto 125 bytes

And the code to connect onto it

bypassing content-security policy with a mitm proxy

so, we can bypass the content-security-protocol header with a mitm proxy and remove the header before sending it to the browser

for chrome, i believe chrome can be started with flags chrome --proxy-server="http://127.0.0.1:8080"
for firefox, you set a proxy by going to Settings → General → Network Settings → Settings…, then choosing Manual proxy configuration and entering your proxy details
this mitm proxy requires a x.509 key and certificate, they can be generated
Generate HTTPS Certificate ext-code.com

test-server.js, checking the input / output of the mitm proxy

by connecting onto the server below we can check the actual input and output of the mitm proxy, should you wish to adapt the code, its always good to be able to check exactly what is happening

Running Code in the Webpage

The original question identified that they opened dev tools and then pasted in the websocket client code, to be able to run the code

so i thought i'd create a little extension that allows code to be easily run in a webpage