React应用中因Content Security Policy导致Stripe JS文件加载失败

问题根源 #

你没手动设置CSP但出现这个错误，大概率是这两个原因：

• React（尤其是搭配craco时）在构建或开发模式下自动注入了基础CSP规则，限制了unsafe-eval，但Stripe Elements内部部分逻辑需要用到这个权限。
• Stripe Elements加载时会动态生成代码，浏览器的CSP机制判定这些代码需要unsafe-eval权限，但当前生效的CSP规则里没放行。

解决办法 #

1. 在Craco配置里加CSP规则 #

修改craco.config.js，用插件添加符合要求的CSP指令：

module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-security-headers'),
      options: {
        headers: {
          ContentSecurityPolicy: {
            directives: {
              scriptSrc: [
                "'self'",
                "https://m.stripe.network",
                "https://js.stripe.com",
                "'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='", // 错误提示里的哈希值
                "'unsafe-eval'" // 如果哈希值不够用再加这个
              ],
            },
          },
        },
      },
    },
  ],
};

2. 直接在HTML模板里加meta标签 #

不想用插件的话，改public/index.html，添加上CSP的meta标签：

<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' https://js.stripe.com https://m.stripe.network 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls=' 'unsafe-eval';
">

提示：生产环境尽量优先用哈希值替代unsafe-eval，如果哈希能生效就不用加unsafe-eval。

3. 检查Stripe Elements加载方式 #

确保你是按官方文档正确加载Stripe：

// React组件里的正确写法
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('你的Stripe公钥');

别用eval或者动态创建脚本的方式加载，不然会加重CSP冲突。

4. 开发环境临时调整（只用于开发） #

如果是开发环境出的问题，可以在Craco里暂时放宽CSP，生产环境必须改回去：

module.exports = {
  devServer: {
    headers: {
      "Content-Security-Policy": "script-src 'self' 'unsafe-eval' https://js.stripe.com https://m.stripe.network;",
    },
  },
};

验证 #

改完配置后重启开发服务器或者重新构建项目，测试支付流程，确认错误消失。

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