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

I recommend having the server that sends this HTML send the headers - not the HTML meta data. This is related, but for a different header setting: https://stackoverflow.com/questions/4480304/how-to-set-http-headers-for-cache-control — Zac, Oct 19 '21 at 16:45
Generally, you don't add all the sites, just the one currently being accessed. This would be done dynamically on the server side. — Ouroborus, Oct 19 '21 at 16:51
@Ouroborus a package called helment-csp, but that doesn't work — ccurves, Oct 19 '21 at 21:01
But honestly I think there should be an option to disable the security totally, This is just messed up an app that should be running in production is held up by stupid policies I cant get rid of — ccurves, Oct 19 '21 at 21:09
I wouldn't recommend disabling it. It's there for security. But, if you really want to, I believe you'd use just `default-src: *`. See [CSP Directive Reference](https://content-security-policy.com/#directive) and [The `default-src` Directive](https://content-security-policy.com/default-src/). — Ouroborus, Oct 20 '21 at 00:07

granty · Accepted Answer · 2021-10-20T07:28:24.740

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:; 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 *.

edited Oct 20 '21 at 07:28

answered Oct 20 '21 at 07:23

granty

7,234
1
14
21

Thanks mahn, like @granty mentioned having 2 CSPs aint a nice idea and I noticed that just simply inputting the websites as https://ipfs.infura.io, https://ipfs.infura.io:5001 and *.ipfs.infura.io allowed access from all subdomains from that website. Read more on this site: https://content-security-policy.com/ – ccurves Oct 20 '21 at 21:41
The page`content-security-policy.com` which you referred, contains 5 critical errors and 3 inaccuracies. Be careful. – granty Oct 20 '21 at 21:59
could be shed more light, what are the errors and inaccuracies? – ccurves Oct 21 '21 at 08:25
1

(1) `except of 'none' which should be the only value` - in fact `none` combines with `''report-sample''`; `'none'` just ignores if it's combined with any other sources. (2) `'self' Allows loading resources from the same origin (same scheme, host and port)` - is wrong because in CSP 3 on `http:` scheme `'self'` covers `https:` too; also `'self'` covers `ws:`/`wss:`. (3) `script-src 'nonce-r@nd0m'` is wrong since `@` is not allowed in nonces. (4) `script-src 'strict-dynamic'` example of using `'strict-dynamic'` is wrong, it leads to block all scripts. (5) to be coninued... – granty Oct 21 '21 at 22:04
(5) `'unsafe-hashes'` description is wrong because it **covers** javascript:-navigation. About inaccuracies - for my sorry, the comments field size does not allow to list these. – granty Oct 21 '21 at 22:07

How to disable content security policy in react

1 Answers1