CSP - React webpack，样式组件，mui

Question

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

这是我的 config-overrides.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

我在 next.js 中的 CSP 和情感/mui 方面也遇到同样的问题

据我所知，基本上必须对内联 mui 内容使用哈希，并在服务器端使用随机数（您不能使用客户端随机数，因为它对于每个页面加载都必须是唯一的）。

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

@next-safe/中间件 | 文档

Answer 2

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

最可能的原因是您包含的组件添加了内联样式，这是您的策略不允许的。您必须将“unsafe-inline”添加到 style-src、替换组件、添加随机数（如果组件允许），或者添加哈希（如果仅使用有限的一组样式）。不建议添加 'unsafe-inline'，但如果 CSP 的其他部分很严格，那么对于样式来说并不是很糟糕，请参阅 https://scotthelme.co.uk/can-you-get-pwned-with -css/.

Answer 3

我将此配置与

csp-html-webpack-plugin

一起使用

const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const cspConfigPolicy = {
  "default-src": "'none'",
  "script-src": ["'self'", "https://url.to.dev", "blob:"],
  "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
  "img-src": ["'self'", "http:", "data:"],
  "font-src": ["'self'", "https://fonts.gstatic.com"],
  "connect-src": [
    "'self'",
    "https://*.other-company.com",
    "https://localhost:4000",
    "https://fonts.gstatic.com",
    "https://*.a-b-testing.com",
    "https://monitoring.com",
    "data:",
  ],
  // Do this from Cloudfront headers, not meta-tag
  // "frame-ancestors": "'self'",
  "base-uri": "'none'",
  "form-action": "'self'",
  "frame-src": ["'self'", "https://*.other-company.com"],
  "manifest-src": "'self'",
  "worker-src": ["'self'", "blob:"],
};

const cspOpts = {
  enabled: true,
  hashingMethod: "sha256",
  hashEnabled: {
    "script-src": true,
    "style-src": false, // Must be disabled as it doesn't work with `styled-components` (with client-side rendering)
  },
  nonceEnabled: {
    "script-src": false,
    "style-src": false, // Must be disabled as it doesn't work with `styled-components` (with client-side rendering)
  },
};
...
config.plugins.push(new CspHtmlWebpackPlugin(cspConfigPolicy, cspOpts));

如果您有服务器端渲染（SSR），上面的链接（https://github.com/styled-components/styled-components/issues/2363）将为您提供其他选项。我们目前仍使用

styled-components

v5，所以如果您使用的是更高版本，那么 YMMV。