React + Nginx 的 CSP 内联错误 (jss.esm.js)

Question

我已经在 Nginx 中为我的 React 应用程序实现了 CSP 标头。

不幸的是，它在我的 Google 控制台中给了我大约 40 个关于 jss.esm.js 的错误：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：style-src ... 'unsafe-inline' 关键字、哈希 ('sha256-XXXXXX') 或随机数 ('nonce- ...') 是启用内联执行所必需的。

由于添加 unsafe-inline 似乎不是最好的解决方案，并且每个错误都会为脚本提供不同的哈希值，这似乎也不是一个选项。

我也尝试使用

构建应用程序

INLINE_RUNTIME_CHUNK=false

但这也行不通。

之后我查看了 cssinjs.org 文档，但我认为他们提供的解决方案与 Nginx 不兼容。

Answer 1

您可以使用此解决方案https://cssinjs.org/csp/?v=v10.8.2 并使用 nginx https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ 创建反向代理。

您必须记住，许多库需要配置 CSP，不仅足够使用：

INLINE_RUNTIME_CHUNK = 假

示例材质 UI https://mui.com/guides/content-security-policy/#what-is-csp-and-why-is-it-useful