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

Question

背景

我必须使用Content Security Policy对于 react 应用程序。

原因是，这在这里不是什么大问题，是我正在创建一个 WebExtension/浏览器扩展/附加组件，并且它们确实有这样一个 content security policy ，像 'unsafe-eval' 和 'unsafe-inline' 是 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.

我已经使用create-react-app创建了应用程序，大致遵循this guide 。 目标是能够在那里使用 React with the default CSP of WebExtensions ，或者至少，只进行微小的调整。

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

问题

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

问题

那么我如何配置/使用react来不这样做......

1. 要么将所有 JS/CSS 代码放入单独的文件中？
2. 或者添加公告或 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。