如何在没有不安全内联 JavaScript/CSS 代码的情况下使用 React？

Question

背景

我必须使用 Content Security Policy 作为 React 应用程序。

原因，但在这里不是什么大问题，是我正在创建一个 WebExtension/Browser Extension/add-on 而这些确实有这样一个 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.

我在 this guide 之后使用 create-react-app 创建了应用程序。 objective 将能够在那里使用 react with the default CSP of WebExtensions，或者，至少，只有很小的调整。

但是请注意，出于安全原因，（如此严格的）CSP 实际上也应该用于 "normal" 网站，所以这个问题不是仅用于插件制作者。

问题

但是当我运行 npm run build 时，生成的 index.html 确实包含了足够多的 inline JS 代码。

问题

那么我怎么能 configure/use 反应不这样做并且...

要么将所有 JS/CSS 代码放入单独的文件中？
或添加公告或 CSP 允许的其他内容？
或以类似的方式解决该问题？

编辑

实际上，开发版（我运行 npm start时创建的）似乎没有这样的缩小。所以我问了一个关于如何从那里获取文件的单独问题：

Answer 1

实际上 thanks to @heyimalex 我找到了一个非常简单的答案来解决我的问题。只是运行像这样的构建脚本：

INLINE_RUNTIME_CHUNK=false npm run build

之后，它应该与 CSP 兼容。

Answer 2

在 Windows 系统中使用无法识别的命令遇到 INLINE_RUNTIME_CHUNK=false 问题的任何人，以下是执行命令以防止构建中的内联块的正确方法。

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

创建一个脚本以在您的 package.json 文件中执行它。

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

我发现 INLINE_RUNTIME_CHUNK 周围的引号也是必要的 && 如果命令在 [=42 中执行=] 默认命令行。

对于Linux，您可以按照已接受的答案进行操作。

更好的方法

使用环境变量，这样您就不必担心运行命令。

创建一个.env文件并添加INLINE_RUNTIME_CHUNK=false.

如何在没有不安全内联 JavaScript/CSS 代码的情况下使用 React？

How to use React without unsafe inline JavaScript/CSS code?

javascript

browser-extension

content-security-policy

reactjs

create-react-app

背景

问题

问题

编辑

更好的方法