如何在没有不安全的内联JavaScript / CSS代码的情况下使用React？ [英] How to use React without unsafe inline JavaScript/CSS code?

问题描述

我必须使用内容安全策略。

然而，原因在于，我在创建一个WebExtension / Browser Extension / add-on，而且确实有这样的< a href =https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy =nofollow noreferrer>内容安全政策，还有像'unsafe-eval'和'unsafe-inline'是严格禁止：

The reason, that is however not of a big matter here, is, that I am creating a WebExtension/Browser Extension/add-on and these do have such a content security policy, and there things like 'unsafe-eval' and 'unsafe-inline' are strictly disallowed:

扩展名为'unsafe-eval'，'unsafe-inline'，远程脚本，blob或其CSP中的远程源代码。

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 创建了应用程序本指南。
目标是能够在那里使用使用WebExtensions的默认CSP ，或者至少只进行微调。

I have created the app with create-react-app loosly following this guide. The objective would be to be able to use react there with the default CSP of WebExtensions, or, at least, only minor adjustments.

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

However note, that (such strict) CSPs should actually also be used on "normal" websites for security reasons, so this question is not only for add-on makers.

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

But when I run npm run build the generated index.html does contain more than enough inline JS code.

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

So how can I configure/use react to not do this and...

1. 或者将所有JS / CSS代码放入单独的fi中les？


2. 或添加NSP或CSP允许的其他内容？


3. 或以类似的方式解决问题？

编辑

实际上，它似乎是开发版本（在我运行时创建） npm start ）没有这样的缩小。所以我问了一个关于如何从那里获取文件的单独问题：如何在不缩小的情况下构建React的生产版本？

Edit

Actually, it seems the development version (created when I run npm start) does not have such minifications. So I've asked a seperate question for how to get the files from there: How to build a production version of React without minification?

推荐答案

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

Actually thanks to @heyimalex I found a very easy answer for my problem. Just run the build script like this:

INLINE_RUNTIME_CHUNK=false npm run build

之后，它应该与CSP兼容。

Afterwards, it should be CSP-compatible.

这篇关于如何在没有不安全的内联JavaScript / CSS代码的情况下使用React？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！