我一直在使用create-react-app开发一个应用程序，最近我更新到了最新版本的React，它似乎实现了一个新的CSP。
当我尝试加载应用中的任何页面时，它会抛出30-40个违规代码。违规代码会被Chrome devtools高亮显示--下面是一个示例：
在我的代码中，这个例子是在User.js中使用的，在User.css中定义的。我不明白为什么要以这种方式呈现它，从而破坏了我的CSP。
对于上下文，csp.json如下所示：
{
"dev": {
"default-src": ["'self'", "https://*.googleapis.com"],
"style-src": ["'self'", "https://*.googleapis.com"]
},
"prod": {
"default-src": ["'self'", "https://*.googleapis.com"],
"style-src": ["'self'", "https://*.googleapis.com"],
"connect-src": ["'self'", "https://*.googleapis.com"]
}
}在Chrome中，该问题的源位置似乎是injectStylesIntoStyleTag.js。
这是完全打破我的应用程序，所以我会很感激任何想法。
谢谢你！
1条答案
按热度按时间lb3vh1jj1#
您有几个选项：
1.将injectStylesIntoStyleTag.js重写为自托管的.css文件以删除内联样式。
1.如果要插入的样式集有限：找到所有这些文件的哈希值，并将其添加到style-src。
1.在style-src中设置一个nonce，该nonce随每次页面加载而变化，并传播到injectStylesIntoStyleTag.js中设置的样式
1.在style-src中允许'unsafe-inline'，这可能不会太危险，因为您的其他CSP源代码是严格的，请参阅https://scotthelme.co.uk/can-you-get-pwned-with-css/。