reactjs - 如何在 Material-UI 中为内容安全策略设置随机数？

Question

我有一个使用 Create-React-App (react-scripts) 和 Material-UI 的 React 应用程序。我想为我的应用程序应用强大的内容安全策略，该策略不允许不安全的内联样式。

我想在服务器端设置 CSP header 并提供一个随机数，这可以轻松完成。但是，Material-UI 设置了某些内联 <style>在运行时动态标记，无需将随机数值作为属性。

我已经在 Material-UI 网站上的指南和 csp 下看到了文档。他们似乎提供了一个解决方案。然而，该解决方案用于 HTML 的服务器端渲染，我没有使用它。我正在使用 Create-React-App 并静态交付 HTML、CSS 和 JavaScript。

有谁知道如何实现这一目标吗？

Answer 1

JSS CSP docs比 MUI CSP docs 更好地解释这一点，并提供 Express 和 Webpack 的示例。基本上，您需要在特殊的 <meta> 中设置相同的“nonce”属性名为 csp-nonce (由 JSS 动态读取)并在您的 Content-Security-Policy 中<meta> 的 header (通过另一个 public/index.html 或 HTTP header ) :

<meta http-equiv="Content-Security-Policy" content="default-src: 'self';
  style-src: 'self' 'nonce-xxxxxxxxxxxxxxxx=='">
<meta property="csp-nonce" content="xxxxxxxxxxxxxxxx==" />

如果您可以在任何适合您的情况下动态执行此操作 index.html ，那么它是安全的。 (显然，注入(inject)的脚本也可以动态读取随机数，但如果发生这种情况，你就已经输了)。如果您必须使用固定值(例如，因为您从 CDN 提供服务)，它并不安全，但仍然可以说比 style-src: 'unsafe-inline' 更好。 ，因为攻击者至少需要使用您的站点特定的随机数。

作为使用 CDN 时的混合方法，您可以在 CDN 从源获取页面时设置随机数 as demonstrated here with an AWS Lambda@Edge 。那么您的随机数仅在 CDN 缓存 TTL 的特定区域中容易受到攻击(该区域应该是可变资源的缩写，如 index.html )。