导入Stripe时出现'unsafe-eval'错误，添加至CSP后仍未解决

问题重现 #

报错信息：

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'"

• 环境：部署在Heroku的Node.js服务器
• 触发场景：集成Stripe支付后出现，仅Chrome浏览器有此问题
• 已尝试操作：在CSP的script-src中添加'unsafe-eval'，但报错仍存在

用户当前的CSP配置（使用helmet）：

app.use(helmet.contentSecurityPolicy({
directives: {
  defaultSrc: ["'self'"],
  connectSrc: ["'self'", "https://checkout.stripe.com","https://api.stripe.com", "https://maps.googleapis.com", "https://api.alternative.me/fng/"], // Allows connections to Stripe Checkout
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'","https://checkout.stripe.com","https://js.stripe.com", "https://maps.googleapis.com", "https://connect-js.stripe.com", "'unsafe-eval'"],
  frameSrc: ["'self'", "https://checkout.stripe.com", "https://js.stripe.com/","https://hooks.stripe.com","https://connect-js.stripe.com"], // Allows frames from Stripe Checkout
  imgSrc: ["'self'", "https://*.stripe.com", "data:"], // Allows images from Stripe
  baseUri: ["'self'"],
  objectSrc: ["'none'"],
  upgradeInsecureRequests: [],
},
}));

排查与解决方案 #

1. 移除重复的defaultSrc配置 #

配置中重复声明了两次defaultSrc: ["'self'"]，这会导致helmet解析配置时出现异常，可能覆盖或忽略部分规则。删除其中一行重复的配置：

修改后的配置：

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    connectSrc: ["'self'", "https://checkout.stripe.com","https://api.stripe.com", "https://maps.googleapis.com", "https://api.alternative.me/fng/"],
    // 补充Stripe官方文档要求的'unsafe-inline'，部分场景下Stripe SDK需要该权限
    scriptSrc: ["'self'","https://checkout.stripe.com","https://js.stripe.com", "https://maps.googleapis.com", "https://connect-js.stripe.com", "'unsafe-eval'", "'unsafe-inline'"],
    frameSrc: ["'self'", "https://checkout.stripe.com", "https://js.stripe.com","https://hooks.stripe.com","https://connect-js.stripe.com"],
    imgSrc: ["'self'", "https://*.stripe.com", "data:"],
    baseUri: ["'self'"],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: [],
  },
}));

2. 强制清除Chrome缓存 #

Chrome会缓存页面的响应头，可能导致新的CSP配置未生效。可以通过以下方式刷新：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面
• 打开Chrome DevTools的「Network」面板，勾选「Disable cache」选项后重新加载页面

3. 验证CSP响应头是否正确生效 #

在Chrome DevTools的「Network」标签页，找到页面的主请求，查看「Response Headers」中的Content-Security-Policy字段，确认script-src中确实包含'unsafe-eval'、'unsafe-inline'以及所有Stripe相关域名，确保配置没有被其他中间件或Heroku的默认设置覆盖。

4. 更新helmet版本 #

旧版本的helmet可能存在CSP解析的bug，执行以下命令更新到最新稳定版：

npm update helmet

5. 确认Stripe SDK加载方式 #

确保使用Stripe官方推荐的脚本加载方式，直接引入官方CDN链接：

<script src="https://js.stripe.com/v3/"></script>

避免使用本地打包或修改过的Stripe SDK版本，防止出现额外的eval调用触发CSP限制。

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