带有 React 内联块的安全 CSP答案

【问题标题】：Safe CSP with React inline chunk带有 React 内联块的安全 CSP
【发布时间】：2021-05-11 12:12:38
【问题描述】：

我想为我的 React 前端进行最安全的设置。目前我在部署中从/build 文件夹中运行server.js，因此它处于已编译的生产状态。

但是，如果 js 被捆绑和内联，我不能使用以下限制性很强的 CSP：

<meta http-equiv="Content-Security-Policy" content=
  "default-src 'none'; 
   object-src 'self'; 
   script-src 'self'; 
   worker-src 'self'; 
   connect-src 'self'; 
   img-src 'self' data:; 
   style-src 'self'; 
   font-src 'self'; 
   manifest-src 'self';">

我也明白了

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".

因为像 Draggable 这样的一些 node_modules 似乎动态内联样式。

对我来说，有什么方法可以让我的代码相当模糊以阻止攻击者以及强大的 CSP？我听说 webpack 插件可能会有所帮助，但我真的不明白它在构建管道中是如何工作的。

【问题讨论】：

标签： reactjs content-security-policy webpack-style-loader inline-styles

【解决方案1】：

您也可以使用这种方法https://cssinjs.org/csp/?v=v10.8.2。实现一个 ExpressJs 服务器来生成标头并将它们注入到反应应用程序中。请记住，许多库已经提供 csp 支持，您必须应用生成的 nonce。

【讨论】：

【解决方案2】：

我相信我通过将.env 中的 INLINE_RUNTIME_CHUNK 值从 true 更改为 false 解决了这个问题。这个答案中有更多信息：How to use React without unsafe inline JavaScript/CSS code?

还可以考虑拆分为.env.development 和.env.production：What is the difference between .env.local and .env.development.local?

【讨论】：