CSP - React webpack, styled-component, mui

Question

我按照这篇文章将CSP添加到我的react应用程序中，它工作了，但是当使用MUI和样式组件时，它们注入的样式不起作用，并且我找不到任何不使用Next.js SSR的解决方案。

这是我的config- rides.js文件:

const { override } = require('customize-cra');
const cspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
const cspConfigPolicy = {
'default-src': "'none'",
'base-uri': "'self'",
'object-src': "'none'",
'script-src': ["'self'"],
'style-src': ["'self'"],
'img-src': ["'self'"],
};
function addCspHtmlWebpackPlugin(config) {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
}
return config;
}
module.exports = {
webpack: override(addCspHtmlWebpackPlugin),
};

我也遇到了这个问题，没有解决方案适用于客户端

Answer 1

如果您能添加遇到的错误消息将会很有帮助。

最可能的原因是您包含的组件添加了内联样式，这是您的策略不允许的。你必须在style-src中添加'unsafe-inline'，替换组件，如果组件允许的话添加nonce，或者如果只使用有限的样式集就添加哈希值。不建议添加'unsafe-inline'，但如果CSP的其他部分是严格的，那么它对样式来说并不是很糟糕，请参阅https://scotthelme.co.uk/can-you-get-pwned-with-css/。

Answer 2

我在next.js中有同样的CSP和emotion/mui问题

据我所知，你基本上必须对你的内联mui内容使用哈希，对服务器端使用nonce(你不能使用nonce客户端，因为它必须是每个页面加载唯一的)。

我发现这个库似乎有帮助，但到目前为止还没有实现它的乐趣

@next-safe/middleware | docs