CSP inline error (jss.esm.js) with React + Nginx

Question

I've implemented the CSP header in Nginx for my React application.

Unfortunately it gives me around 40 errors in my Google console, regarding jss.esm.js:

Refused to apply inline style because it violates the following Content Security Policy directive: style-src ... Either the 'unsafe-inline' keyword, a hash ('sha256-XXXXXX'), or a nonce ('nonce-...') is required to enable inline execution.

Since adding unsafe-inline seems not like the best solution and every of the error gives a different hash for the script that don't seem like an option too.

I also tried to build the application with

INLINE_RUNTIME_CHUNK=false

but that isn't working too.

After that I checked the cssinjs.org documentation, but I think their offered solution isn't compatible with Nginx.

user_9535745 · Answer

You can use this solution https://cssinjs.org/csp/?v=v10.8.2 and create a reverse proxy with nginx https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/.

You must bear in mind that many libraries need the CSP to be configured, not only is it enough to use:

INLINE_RUNTIME_CHUNK = false

Example Material UI https://mui.com/guides/content-security-policy/#what-is-csp-and-why-is-it-useful

CSP inline error (jss.esm.js) with React + Nginx

1 Answers