32

Background

I have to use a Content Security Policy for a react application.

The reason, that is however not of a big matter here, is, that I am creating a WebExtension/Browser Extension/add-on and these do have such a content security policy, and there things like 'unsafe-eval' and 'unsafe-inline' are strictly disallowed:

extensions with 'unsafe-eval', 'unsafe-inline', remote script, blob, or remote sources in their CSP are not allowed for extensions listed on addons.mozilla.org due to major security issues.

I have created the app with create-react-app loosly following this guide. The objective would be to be able to use react there with the default CSP of WebExtensions, or, at least, only minor adjustments.

However note, that (such strict) CSPs should actually also be used on "normal" websites for security reasons, so this question is not only for add-on makers.

Problem

But when I run npm run build the generated index.html does contain more than enough inline JS code.

Question

So how can I configure/use react to not do this and...

  1. either instead put all JS/CSS code into seperate files?
  2. or add nounces or something else that CSPs allow?
  3. or solve that problem in a similar way?

Edit

Actually, it seems the development version (created when I run npm start) does not have such minifications. So I've asked a seperate question for how to get the files from there: How to build a production version of React without minification?

rugk
  • 2,983
  • 2
  • 18
  • 42
  • The only thing I can think is Webpack. Maybe you can configure it in the way you want. – squeekyDave Mar 14 '19 at 10:57
  • @squeekyDave AFAIK the setup uses babel. Could not I configure it, too, in some way? – rugk Mar 14 '19 at 11:01
  • Babel its just a transpiler, what you want is module splitting I believe? So what I would do is build a baisc react app from scratch using webpack and play around to see if its possible to split the build files in the way you wanted. – squeekyDave Mar 14 '19 at 11:03
  • I don't care at all whether it is in modules or so. (it can be one single JS file as react seems to create by default) It just should not be in the main HTML file with `script` tags or so... – rugk Mar 14 '19 at 11:05
  • @squeekyDave Also, if you think you have a working idea on how to do it with WebPack, feel free to submit it as an answer. :) – rugk Mar 14 '19 at 14:47
  • Also note: React actually already uses Webpack, so maybe I just need to get it to configure? ([Which seems to be hard enough...](https://stackoverflow.com/a/55165586/5008962)) – rugk Mar 14 '19 at 15:07
  • If you post something tha tyou have tried then I might be able to help, and not only me, everyone who see the question. – squeekyDave Mar 14 '19 at 15:07
  • Thats why its better to start on a clean slate and build your dev server and react app from scratch. – squeekyDave Mar 14 '19 at 15:09
  • I'll guess that is just an opinion... At least the official React docs make no mention of this "manual way". :) – rugk Mar 14 '19 at 15:11
  • Yes, of course, it's just my opinion. I believe that it will give you more insight on module splitting rather than trying to configure something already out of the box :) – squeekyDave Mar 14 '19 at 15:14
  • That does lead to another question, however: How to configure it in such a way? – rugk Mar 14 '19 at 15:30
  • Okay, asked another follow-up question about this, @squeekyDave: [How to manually configure a minimal setup for React without create-react-app?](https://stackoverflow.com/questions/55166789/how-to-manually-configure-a-minimal-setup-for-react-without-create-react-app) – rugk Mar 14 '19 at 15:50

2 Answers2

47

Actually thanks to @heyimalex I found a very easy answer for my problem. Just run the build script like this:

INLINE_RUNTIME_CHUNK=false npm run build

Afterwards, it should be CSP-compatible.

rugk
  • 2,983
  • 2
  • 18
  • 42
21

Anyone facing issue with INLINE_RUNTIME_CHUNK=false with non recognized command in Windows system, below is the proper way to execute the command to prevent the inline chunk on the build.

set "INLINE_RUNTIME_CHUNK=false" && react-scripts build

Create a script to execute it in your package.json file.

"scripts": {
    "build": "set \"INLINE_RUNTIME_CHUNK=false\" && react-scripts build"
  }

I found that quotes around the INLINE_RUNTIME_CHUNK are necessary as well && If the command is executed in Windows default command line.

For Linux, you can follow the accepted answer.

Better way

Use the Environment variable so that you don't have to worry about running the command.

Create a .env file and add INLINE_RUNTIME_CHUNK=false.

Community
  • 1
  • 1
Ashish Yadav
  • 1,243
  • 2
  • 11
  • 21
  • 2
    Keep things nice and simple with https://www.npmjs.com/package/cross-env :) For example: "build": "cross-env INLINE_RUNTIME_CHUNK=false rescripts build && yarn tsc-electron", – Jonathan Turnock Jan 31 '21 at 14:20