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

Question

背景

我必须使用Content Security Policy进行反应。

原因在于，这不是一个大问题，我正在创建一个WebExtension / Browser Extension / add-on，这些确实有这样的content security policy，而像'unsafe-eval'和'unsafe-inline'这样的东西是strictly disallowed：

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

我跟随create-react-app在this guide上创建了应用程序。目标是能够使用with the default CSP of WebExtensions做出反应，或者至少只进行微调。

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

问题

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

题

那么如何配置/使用反应来做不到这一点......

1. 或者将所有JS / CSS代码放入单独的文件中？
2. 或添加NSP或CSP允许的其他内容？
3. 或以类似的方式解决这个问题？

编辑

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

Answer 1

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

INLINE_RUNTIME_CHUNK=false npm run build

之后，它应该是CSP兼容的。