IT技术 javascript reactjs create-react-app content-security-policy browser-extension

2021-04-13 00:39:54

背景

我必须为react应用程序使用内容安全策略。

究其原因，在于然而，这不是一个大的事情在这里，是，我创建一个WebExtension /浏览器扩展程序/插件和这些确实有这样的内容安全策略，并有类似的东西'unsafe-eval'和'unsafe-inline'被严格禁止：

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

我已经create-react-app按照本指南松散地创建了该应用程序。目标是能够在WebExtensions 的默认 CSP 中使用 react，或者至少只进行微小的调整。

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

问题

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

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

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

2个回答

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

INLINE_RUNTIME_CHUNK=false npm run build

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

任何INLINE_RUNTIME_CHUNK=false在 Windows 系统中遇到无法识别命令的问题的人，下面是执行命令以防止构建中的内联块的正确方法。

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。

谢谢哥们。把引号真的奏效了！

2021-05-23 00:39:54

使用npmjs.com/package/cross-env保持良好和简单:) 例如：“build”：“cross-env INLINE_RUNTIME_CHUNK=false rescripts build && yarn tsc-electron”，

2021-06-16 00:39:54

其它你可能感兴趣的问题