【问题标题】：How to use React without unsafe inline JavaScript/CSS code?如何在没有不安全的内联 JavaScript/CSS 代码的情况下使用 React？
【发布时间】：2019-08-05 05:46:08
【问题描述】：

背景

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

原因，但这不是什么大问题，我正在创建一个 WebExtension/Browser Extension/add-on，它们确实有这样一个 content security policy，还有像 'unsafe-eval' 和 @ 这样的东西987654329@是strictly disallowed：

由于重大安全问题，addons.mozilla.org 上列出的扩展不允许在其 CSP 中包含“unsafe-eval”、“unsafe-inline”、远程脚本、blob 或远程源的扩展。

我用create-react-app 松散地跟随this guide 创建了应用程序。目标是能够在 with the default CSP of WebExtensions 那里使用 react，或者，至少，只有很小的调整。

然而请注意，出于安全原因，（如此严格的）CSP 实际上也应该在“普通”网站上使用，所以这个问题不仅仅用于附加组件制造商。

问题

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

问题

那么我怎样才能配置/使用 react 不这样做......

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

编辑

实际上，开发版本（在我运行npm start 时创建）似乎没有这样的缩小。所以我问了一个关于如何从那里获取文件的单独问题：How to build a production version of React without minification?

【问题讨论】：

我唯一能想到的就是 Webpack。也许你可以按照你想要的方式配置它。
@squeekyDave AFAIK 设置使用 babel。我不能以某种方式也配置它吗？
Babel 它只是一个转译器，我相信你想要的是模块拆分？所以我要做的是使用 webpack 从头开始构建一个 baisc react 应用程序，并尝试看看是否可以按照你想要的方式拆分构建文件。
我根本不在乎它是否在模块中。（它可以是一个单独的 JS 文件，因为 react 似乎默认创建）它不应该在带有 script 标签左右的主 HTML 文件中......
@squeekyDave 另外，如果你认为你对如何使用 WebPack 有一个可行的想法，请随时提交它作为答案。 :)

标签： javascript reactjs create-react-app content-security-policy browser-extension

【解决方案1】：

其实thanks to @heyimalex 我为我的问题找到了一个非常简单的答案。只需像这样运行构建脚本：

INLINE_RUNTIME_CHUNK=false npm run build

之后，它应该与 CSP 兼容。

【讨论】：

【解决方案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 周围的引号也是必要的 && 如果命令在 Windows 默认命令行中执行。

对于 Linux，您可以按照接受的答案。

更好的方法

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

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

【讨论】：

使用npmjs.com/package/cross-env 让事情变得简单明了 :) 例如："build": "cross-env INLINE_RUNTIME_CHUNK=false rescripts build && yarn tsc-electron",
谢谢哥们。引用真的很管用！