为 create-react-app 开发禁用 CSP

Posted 2023-02-21

【中文标题】为 create-react-app 开发禁用 CSP

【英文标题】：Disabling CSP for create-react-app development

【发布时间】：2021-11-03 01:01:33

【问题描述】：

当 webpack 的 style-loader 尝试在 create-react-app (CRA) 中附加内联 CSS 时，style-src 的严格 CSP 似乎会不高兴：

我想知道我是否需要使用 webpack 开发服务器来利用 nonce 令牌，或者 CRA 是否有办法在发展。在这种情况下，REACT_APP_INLINE_RUNTIME_CHUNK=false 值似乎没有帮助（事实上，我没有看到在将其设置为 true 与 false 之间通过网络传输的资源有差异）。但是我运行的是npm start 而不是npm build，我认为后者可以使用环境变量正确构建，不确定CRA 开发服务器。

【参考方案1】：

据我所知，CRA 并不真正希望您凌驾于一切之上。但如果必须，您可以使用 react-app-rewired 或弹出（强烈建议不要这样做，因为它会破坏 CRA 用来保持一切良好、整洁和工作的软件包更新）。

还有在 node_modules/react-scripts/config/webpack.config.prod.js 中修改构建文件本身，尽管我目前正在做的是在开发过程中注释掉元标记并在提交时取消注释，即如果无论如何我必须重建/重新安装更新模块，我认为工作量大致相同。虽然我通常不会经常更新它。

来源：https://***.com/a/64361307/1580355