CODEWITHSUNDEEP
reactjscontent-security-policywebpack-style-loaderinline-styles
A13X
A13X

Reputation: 436

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.

Upvotes: 0

Views: 3169

Answers (2)

Carlos Osvaldo Chao Cortes
Carlos Osvaldo Chao Cortes

Reputation: 77

You can use this approach too https://cssinjs.org/csp/?v=v10.8.2. Implement a ExpressJs server that generates the headers and inject them into the react application. Keep in mind that many libraries already come with csp support and you must apply the generated nonce.

Upvotes: 1

A13X
A13X

Reputation: 436

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?

Upvotes: 1

Related Questions