有一个使用 Material-ui 版本 4 的 React UI。在生产中，Web 服务器嵌入到 JVM 应用程序中。 UI 是使用 npm 构建的，然后捆绑包与服务器端代码一起部署。
要求应用程序使用内容安全策略。使用其中包含静态值的随机数是可以接受的。我能够通过在服务器代码中设置标头并按照我在 Material UI 网站上找到的说明来完成此操作：https://v4.mui.com/styles/advanced/#how-does-one-implement-csp .
基本上我在index.html的元标记中包含了一个nonce，如下所示：
<html><head><meta property="csp-nonce" content="mynoncevalue" />在服务器端我发送以下 CSP：
"default-src 'self' https://mywebserver.mydomain.com;script-src 'self' https://mywebserver.mydomain.com;style-src 'self' 'nonce-mynoncevalue';"UI 已渲染，但有一个问题。控制台出现以下错误：
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-mynoncevalue'". Either the 'unsafe-inline' keyword, a hash (...), or a nince ('nonce-...') is required to enable inline execution.当我单击“问题”按钮并查看“1 页错误”并单击“元素”图标（具有工具提示“单击以在元素面板中显示违规 DOM 节点”的图标）时，“ Elements”面板看起来像我的index.html，里面添加了一堆标签。以下元素突出显示：
<style id="muiDetectElementResize" type="text/css">(...)</style>有趣的是，在该元素上方有一堆样式元素，如下所示：
<style data-jss data-meta-"Mui(Something)" nonce>(...)</style>任何人都可以建议有问题的“style”标签（id =“muiDetectElementResize”）可能来自哪里以及如何以与“data-jss”标签相同的方式包含随机数？
您遇到的问题是由于 Material-UI 生成的特定样式标签没有您提供的随机数属性造成的。该错误专门指出了 Material-UI 用于处理元素调整大小检测的标签。
识别元素来源：
此样式元素 () 可能来自 Material-UI 中负责检测元素大小变化的组件或实用程序。如果您正在使用 TextareaAutosize 之类的组件或任何其他响应大小变化的组件，他们可能会在幕后使用此实用程序。
修补源（如果可能）：
如果您有能力并且愿意修补 Material-UI 的源代码（或生成此代码的任何库），您可以手动将随机数添加到此样式标签。不过，一般不建议给库打补丁，因为这会使升级和维护变得复杂。
运行时猴子修补：
作为解决方法，您可以添加一个脚本，该脚本在页面加载后立即运行并查找此样式标记。如果找到了，它可以添加 nonce 属性：
document.addEventListener("DOMContentLoaded", function() {
const styleElement = document.getElementById("muiDetectElementResize");
if (styleElement) {
styleElement.setAttribute("nonce", "mynoncevalue");
}
});这也是一个hacky解决方案，但它不涉及修改Material-UI源代码。