带有 React 内联块的安全 CSP

Question

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

但是，如果 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'".

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

对我来说有什么方法可以让我的代码相当模糊以阻止攻击者以及强大的 CSP？我听说 webpack 插件可能有帮助，但我不太了解它在构建管道中的工作原理。

Answer 1

我相信我通过将 .env 中的 INLINE_RUNTIME_CHUNK 值从 true 更改为 false 解决了这个问题。此答案中有更多信息：

也考虑分解成.env.development和.env.production：

Answer 2

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

带有 React 内联块的安全 CSP

Safe CSP with React inline chunk

inline-styles

content-security-policy

reactjs

webpack-style-loader