56

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?

12
  • The only thing I can think is Webpack. Maybe you can configure it in the way you want. Mar 14, 2019 at 10:57
  • @squeekyDave AFAIK the setup uses babel. Could not I configure it, too, in some way?
    – rugk
    Mar 14, 2019 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. Mar 14, 2019 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, 2019 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, 2019 at 14:47

3 Answers 3

75

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.

1
  • 2
    But, could someone throw some light on how this works? Does it affect the Lazy loading and load everything upfront?
    – Teddy
    Aug 10 at 4:39
50

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.

2
  • 7
    Keep things nice and simple with npmjs.com/package/cross-env :) For example: "build": "cross-env INLINE_RUNTIME_CHUNK=false rescripts build && yarn tsc-electron",
    – JfrogT
    Jan 31, 2021 at 14:20
  • thank buddy. putting quotes realy worked! Oct 12, 2021 at 22:50
0

Update your .env file INLINE_RUNTIME_CHUNK=false.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.