reactjscontent-security-policywebpack-style-loaderinline-styles

Safe CSP with React inline chunk

I would like to have the safest possible setup for my React front-end. Currently I run server.js out of the /build folder in deployment, so it is in a compiled, production state.

However, I can't use the following CSP which is fairly restrictive, if the js is bundled and inlined:

<meta http-equiv="Content-Security-Policy" content=
  "default-src 'none'; 
   object-src 'self'; 
   script-src 'self'; 
   worker-src 'self'; 
   connect-src 'self'; 
   img-src 'self' data:; 
   style-src 'self'; 
   font-src 'self'; 
   manifest-src 'self';">

I also get

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".

Since some node_modules like Draggable seem to dynamically inline styles.

What is an approach for me so that I can keep my code fairly obfuscated to deter attackers as well as a strong CSP? I've heard a webpack plugin might help but I don't really understand how that works in the build pipeline.

Solution

  • I believe I resolved this by changing from true to false the INLINE_RUNTIME_CHUNK value in .env. There is a little more info in this answer: How to use React without unsafe inline JavaScript/CSS code?

    Also consider breaking up into .env.development and .env.production: What is the difference between .env.local and .env.development.local?