create-react-app中内联样式违反CSP问题求助

问题根源 #

最新版Create React App在开发模式下，会通过style-loader将CSS文件注入为内联<style>标签（对应报错来源injectStylesIntoStyleTag.js），而你的CSP配置中style-src未允许这种内联样式，因此触发大量违规。

解决方案 #

1. 开发环境快速修复（推荐） #

开发环境安全性要求较低，直接在CSP配置中添加'unsafe-inline'允许内联样式：
修改csp.json的dev字段：

{
  "dev": {
    "default-src": ["'self'", "https://*.googleapis.com"],
    "style-src": ["'self'", "https://*.googleapis.com", "'unsafe-inline'"]
  },
  "prod": {
    "default-src": ["'self'", "https://*.googleapis.com"],
    "style-src": ["'self'", "https://*.googleapis.com"],
    "connect-src": ["'self'", "https://*.googleapis.com"]
  }
}

2. 生产环境安全解决方案 #

生产环境不建议使用'unsafe-inline'，可通过以下两种方式处理：

方式一：使用Nonce允许可信内联样式

Nonce是一次性随机值，仅允许带有该值的内联样式执行：

• 第一步：在public/index.html的CSP meta标签中加入Nonce占位：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*.googleapis.com; style-src 'self' https://*.googleapis.com 'nonce-%NONCE%'; connect-src 'self' https://*.googleapis.com;">

• 第二步：构建时生成随机Nonce，同步传递给style-loader和HTML模板：
  如果使用craco或customize-cra修改Webpack配置，添加如下代码：

// craco.config.js
const crypto = require('crypto');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const nonce = crypto.randomBytes(16).toString('base64');

module.exports = {
  webpack: {
    configure: (config) => {
      // 给style-loader添加nonce属性
      config.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.forEach(oneOfRule => {
            if (oneOfRule.test && oneOfRule.test.toString().includes('css')) {
              oneOfRule.use = oneOfRule.use.map(loader => {
                if (loader.loader === 'style-loader') {
                  return {
                    loader: loader.loader,
                    options: {
                      ...loader.options,
                      attributes: { nonce }
                    }
                  };
                }
                return loader;
              });
            }
          });
        }
      });

      // 将nonce注入HTML模板
      config.plugins.forEach(plugin => {
        if (plugin instanceof HtmlWebpackPlugin) {
          plugin.userOptions.nonce = nonce;
        }
      });

      return config;
    }
  }
};

• 第三步：更新csp.json的prod字段，将style-src改为包含动态生成的Nonce（或直接在HTML meta中动态生成CSP）。

方式二：强制提取CSS为单独文件

禁止内联样式注入，强制将CSS提取为单独的.css文件，完全符合style-src: 'self'规则：
使用craco修改Webpack配置，替换style-loader为MiniCssExtractPlugin.loader：

// craco.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: {
    configure: (config) => {
      // 替换style-loader为MiniCssExtractPlugin.loader
      config.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.forEach(oneOfRule => {
            if (oneOfRule.test && oneOfRule.test.toString().includes('css')) {
              oneOfRule.use = oneOfRule.use.map(loader => {
                if (loader.loader === 'style-loader') {
                  return MiniCssExtractPlugin.loader;
                }
                return loader;
              });
            }
          });
        }
      });
      // 添加MiniCssExtractPlugin插件
      config.plugins.push(new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:8].css' }));
      return config;
    }
  }
};

修改后，无论是开发还是生产环境，CSS都会被打包为单独文件，不会产生内联样式，自然不会触发CSP违规。

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