React项目配置CSP后MUI与styled-components样式失效求助

我为Create React App应用配置了CSP（通过customize-cra和csp-html-webpack-plugin），配置已生效，但使用MUI和styled-components时，它们动态注入的样式无法正常工作，找不到非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),
};

问题原因 #

MUI和styled-components会动态生成并注入内联<style>标签到页面中，但当前CSP的style-src仅允许加载自同源的外部样式文件，拦截了所有内联样式，导致组件样式失效。

解决方案 #

方案1：快速允许内联样式（适合开发/低安全要求场景） #

修改CSP配置中的style-src，添加'unsafe-inline'规则，授权所有内联样式：

const cspConfigPolicy = {
  'default-src': "'none'",
  'base-uri': "'self'",
  'object-src': "'none'",
  'script-src': ["'self'"],
  'style-src': ["'self'", "'unsafe-inline'"], // 新增授权内联样式
  'img-src': ["'self'"],
};

修改后重新构建生产环境，动态注入的样式即可正常加载。

方案2：使用Nonce实现安全授权（高安全要求场景） #

通过生成随机Nonce值，仅授权携带该Nonce的内联样式，避免使用unsafe-inline降低安全性：

1. 修改config-overrides.js生成并注入Nonce：

const { override } = require('customize-cra');
const cspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
const crypto = require('crypto');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 生成随机Nonce
const generateNonce = () => crypto.randomBytes(16).toString('base64');

function addCspHtmlWebpackPlugin(config) {
  if (process.env.NODE_ENV === 'production') {
    const nonce = generateNonce();
    // 更新CSP策略，添加Nonce授权
    const cspConfigPolicy = {
      'default-src': "'none'",
      'base-uri': "'self'",
      'object-src': "'none'",
      'script-src': ["'self'", `'nonce-${nonce}'`],
      'style-src': ["'self'", `'nonce-${nonce}'`],
      'img-src': ["'self'"],
    };
    // 注入Nonce到HTML模板，供React应用使用
    config.plugins.forEach(plugin => {
      if (plugin instanceof HtmlWebpackPlugin) {
        plugin.userOptions.nonce = nonce;
        plugin.userOptions.templateParameters = (compilation, assets, options) => {
          return {
            compilation,
            webpack: compilation.getStats().toJson(),
            webpackConfig: compilation.options,
            htmlWebpackPlugin: {
              files: assets,
              options: options,
            },
            nonce: nonce
          };
        };
      }
    });
    config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
  }
  return config;
}

module.exports = {
  webpack: override(addCspHtmlWebpackPlugin),
};

2. 在public/index.html中添加Nonce到全局变量：

<script nonce="<%= nonce %>">
  window.__CSP_NONCE__ = "<%= nonce %>";
</script>

3. 在React入口文件src/index.js中配置MUI和styled-components使用Nonce：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyleSheetManager } from 'styled-components';
import { StylesProvider } from '@mui/styles';
import App from './App';

const nonce = window.__CSP_NONCE__;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StyleSheetManager nonce={nonce}>
    <StylesProvider nonce={nonce}>
      <App />
    </StylesProvider>
  </StyleSheetManager>
);

这样配置后，只有携带正确Nonce的内联样式会被CSP允许，既保证了样式正常工作，又维持了CSP的安全性。

内容的提问来源于stack exchange，提问作者Erison alexandre