How to disable content security policy in react

Question

I have searched and I have seen many articles saying how the content security policy is for my benefit and it secures my application, but why is it so frustrating. Currently this is my meta tag and my content security policy settings

<meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; script-src 'self' 'unsafe-inline'; connect-src 'self' https://polygon-rpc.com/ https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false https://ipfs.infura.io:5001/api/v0/* img-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self'; font-src 'self' https://fonts.gstatic.com;
" 
    />

In my application, I connect to the polygon network, and users can upload files to IPFS. Now the problem is that although the above allows the successful upload of files, IPFS sends the url of the uploaded image to show the file preview to the user and the url changes on every request but that is blocked by CSP. So what I wanna know now is how to disable the goddamn thing completely. I don't want it, because if I had to manually add all external websites I call to the meta tag. That just seems stupid

I tried setting the content security policy from the server side using this, but it does not seem to do anything and only the settings from the meta tag in the react html file that works.

app.use(
  contentSecurityPolicy({
    useDefaults: true,
    directives: {
      defaultSrc: ["'none'"],
      connectSrc: [
        "'self'",
        "https://polygon-rpc.com/",
        "https://ipfs.infura.io:5001",
        "https://ipfs.infura.io:5001/api/v0",
        "https://ipfs.infura.io",
      ],
      upgradeInsecureRequests: [],
    },
    reportOnly: false,
  })
);

Its a MERN application hosted on heroku. So any idea how to go about that? Thanks

Answer 1

I tried setting the content security policy from the server side using this, but it does not seem to do anything and only the settings from the meta tag in the react html file that works.

As a result, you have 2 CSPs acting simultaneously - from the meta tag and from the HTTP header. All sources must pass through both CSPs, so the strictest rules from both CSPs will be applied as a result.
Use either a meta tag or an HTTP header.

IPFS sends the url of the uploaded image to show the file preview to the user and the url changes on every request but that is blocked by CSP.

It's enough to set img-src * to allow images from any host.
Note you have 2 errors in the CSP in the meta tag:

• is missed semicolon ; before img-src 'self'; . Fix it as ; img-src * data: blob:; ; img-src * data: blob:; to allow images from any sources including data:-Urls and blob:-Urls.
• the https://ipfs.infura.io:5001/api/v0/* source is wrong because CSP does not support * in the path-part. Remove * .