如何在 Material-UI 中为 Content-Security-Policy 设置随机数？
How can I set a nonce in Material-UI for the Content-Security-Policy?
我有一个使用 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。
有人知道如何实现吗？
它按原样工作。随机数值已设置，即使它未显示在浏览器中。
JSS CSP docs explain this much better than the MUI CSP docs，并提供Express和Webpack的例子。基本上，您需要在一个名为 csp-nonce（由 JSS 动态读取）的特殊 <meta> 属性 和您的 Content-Security-Policy header（通过另一个 <meta> 或 HTTP header） of public/index.html:
<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' 更好，因为攻击者至少需要使用您的 site-specific 随机数。
作为使用 CDN 的混合方法，您可以在 CDN 从源 as demonstrated here with an AWS Lambda@Edge 获取页面时设置一个随机数。那么你的 nonce 只在 CDN 缓存 TTL 的特定区域容易受到攻击（它应该是像 index.html 这样的可变资源的缩写）。
我有一个使用 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。
有人知道如何实现吗？
它按原样工作。随机数值已设置，即使它未显示在浏览器中。
JSS CSP docs explain this much better than the MUI CSP docs，并提供Express和Webpack的例子。基本上，您需要在一个名为 csp-nonce（由 JSS 动态读取）的特殊 <meta> 属性 和您的 Content-Security-Policy header（通过另一个 <meta> 或 HTTP header） of public/index.html:
<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' 更好，因为攻击者至少需要使用您的 site-specific 随机数。
作为使用 CDN 的混合方法，您可以在 CDN 从源 as demonstrated here with an AWS Lambda@Edge 获取页面时设置一个随机数。那么你的 nonce 只在 CDN 缓存 TTL 的特定区域容易受到攻击（它应该是像 index.html 这样的可变资源的缩写）。