如何在Material-UI中为Content-Security-Policy设置nonce？

Question

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

我想在服务器端设置CSP-Header的nonce，这很容易做到。但是，Material-UI在运行时动态设置某些内联<style>标记，而不使用nonce值作为属性。

我已经在Material-UI网站上的指南和csp下看到了文档。它们似乎提供了一种解决方案。但是，该解决方案是针对HTML服务器端呈现的，而我并没有使用它。我使用Create-React-App并静态地提供了HTML、CSS和JavaScript。

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

Answer 1

它就是这样工作的。即使不在浏览器中显示，也会设置nonce值。

Answer 2

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

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

如果你可以在为你的index.html服务的任何东西中动态地做到这一点，那么它就是安全的。(显然，注入的脚本也可以动态读取nonce，但如果发生了这种情况，您就已经失败了)。如果你必须使用一个固定的值(例如，因为你是从CDN服务的)，它是不安全的，但仍然可以说比style-src: 'unsafe-inline'更好，因为攻击者至少需要使用你的站点特定的nonce。

作为使用CDN时的一种混合方法，您可以在CDN从源as demonstrated here with an AWS Lambda@Edge获取页面时设置一个随机nonce。那么你的nonce只在CDN cache TTL的特定区域易受攻击(这应该是像index.html这样的可变资源的缩写)。