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

Question

背景

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

但是，这里并不是什么大问题，原因是，我正在创建WebExtension /浏览器扩展/附加组件，并且它们确实具有这样的content security policy，并且类似{{1 }}和'unsafe-eval'是strictly disallowed：

  

由于重大安全问题，addons.mozilla.org上列出的扩展不允许使用其CSP中带有'unsafe-eval'，'unsafe-inline'，远程脚本，blob或远程源的扩展。

我创建了'unsafe-inline'且紧随this guide之后的应用。 目的是能够在此处with the default CSP of WebExtensions进行反应，或者至少仅进行较小的调整。

但是请注意，出于安全原因，实际上也应该在“正常”网站上使用（如此严格的）CSP，因此，此问题并非仅用于附件制造商。

问题

但是当我运行create-react-app时，生成的npm run build确实包含了足够多的inline JS代码。

问题

所以我该如何配置/使用反应来不这样做并...

1. 要么将所有JS / CSS代码放入单独的文件中？
2. 还是添加名词或CSP允许的其他内容？
3. 还是以类似的方式解决该问题？

编辑

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

Answer 1

在Windows系统中，任何人遇到extension Notification.Name { static let needsNetworkReload = Notification.Name("NeedsReload") } 带有无法识别的命令的问题，下面是执行该命令以防止在构建中插入行块的正确方法。

INLINE_RUNTIME_CHUNK=false

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

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

我发现 INLINE_RUNTIME_CHUNK 周围的引号也是必需的。 && 如果命令是在Windows默认命令行中执行的。

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

更好的方式

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

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

Answer 2

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

INLINE_RUNTIME_CHUNK=false npm run build

此后，它应该与CSP兼容。