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

Question

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

我想在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的示例。基本上，您需要在称为<meta>的特殊csp-nonce属性（由JSS动态读取）和Content-Security-Policy标头中设置相同的“ nonce”（通过另一个{{1 }}或HTTP标头）<meta>：

public/index.html

如果您可以在<meta http-equiv="Content-Security-Policy" content="default-src: 'self'; style-src: 'self' 'nonce-xxxxxxxxxxxxxxxx=='"> <meta property="csp-nonce" content="xxxxxxxxxxxxxxxx==" /> 中使用任何服务来动态地执行此操作，那么它是安全的。 （显然，注入的脚本还可以动态读取随机数，但是如果发生这种情况，则说明您已经迷失了方向）。如果您必须使用固定值（例如，因为您是通过CDN提供服务），则该值不安全，但可以说比index.html更好，因为攻击者至少需要使用您特定于站点的随机数。

作为使用CDN时的一种混合方法，当CDN从原点as demonstrated here with an AWS Lambda@Edge获取页面时，可以设置随机随机数。然后，您的随机数仅在CDN高速缓存TTL的特定区域中易受攻击（对于style-src: 'unsafe-inline'这样的可变资源而言，它应该是短的）。