JSS CSP docs比MUI CSP文档更好地解释了这一点，并提供了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获取页面时设置一个随机现时值，这样您的现时值仅在CDN缓存TTL（对于index.html这样的可变资源，TTL应该是缩写）的特定区域中存在漏洞。

它的工作方式是这样的。nonce值被设置，即使它没有显示在浏览器中。

我能够让它的工作，通过以下部分文件的MUI的SSR，即使我们没有使用SSR。
最初我尝试将webpack_nonce添加到我们的入口文件中，但这并不能将nonce应用到mui样式中。
这对我很有效：

const cache = createCache({
  key: 'my-prefix-key',
  nonce: nonce,
  prepend: true,
});

function App(props) {
  return (
    <CacheProvider value={cache}>
      <Home />
    </CacheProvider>
  );
}