如何解决 Chrome 扩展干扰 Stripe.js 加载的问题-js教程-PHP中文网

如何解决 Chrome 扩展干扰 Stripe.js 加载的问题

本文揭示了一个常见但易被忽视的错误根源：chrome 浏览器扩展（如广告拦截器或隐私保护工具）会主动注入 content security policy（csp）规则，阻止 stripe.js 动态执行脚本，从而导致 unsafe-eval 拒绝错误，即使你的 react 应用本身未配置任何 csp。

本文揭示了一个常见但易被忽视的错误根源：chrome 浏览器扩展（如广告拦截器或隐私保护工具）会主动注入 content security policy（csp）规则，阻止 stripe.js 动态执行脚本，从而导致 unsafe-eval 拒绝错误，即使你的 react 应用本身未配置任何 csp。

Stripe Elements 依赖动态代码评估（例如通过 Function constructor 或 eval 方式加载加密模块与令牌化逻辑），而 Stripe 官方 JS SDK（如 https://www.php.cn/link/e177b47ac0ff1efcc57cb918507e990c 或 https://www.php.cn/link/4b084ae4ac122a74d6c6b960b9f32c14）明确要求允许 'unsafe-eval' ——但这仅适用于由 Stripe 自身脚本声明的哈希白名单或可信源，并非应用层需主动开放 unsafe-eval。

真正的问题往往不在你的代码或服务器配置中，而在于浏览器环境。某些 Chrome 扩展（如 uBlock Origin、Privacy Badger、Ghostery、AdGuard 等）会在页面注入强化型 CSP 头部或内联策略，例如：

Content-Security-Policy: script-src 'self' https://www.php.cn/link/4b084ae4ac122a74d6c6b960b9f32c14 'sha256-...' ;

该策略显式移除了 'unsafe-eval'，导致 Stripe 内部用于 Web Crypto 初始化或动态模块加载的合法操作被浏览器拦截，并抛出类似以下控制台错误：

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source...

✅ 快速诊断方法：

php版微信js-sdk支付接口类

下载

打开 Chrome 开发者工具（F12）→ Console 标签页；
观察报错是否包含 m.stripe.network 及 unsafe-eval 提示；
切换至 Application → Frame → Response Headers，检查是否存在非你服务端设置的 Content-Security-Policy 字段；
关键验证步骤： 在无痕窗口（Incognito Mode）中运行应用 —— 若问题消失，基本可确认是扩展干扰。

? 解决方案：

✅ 临时排查： 禁用所有 Chrome 扩展 → 逐一启用，定位具体干扰扩展；
✅ 开发阶段推荐： 使用无痕模式 + 必要扩展（如 React DevTools）进行支付流程调试；
⚠️ 切勿妥协安全性： 不要在标签或 Express 中硬加 script-src 'unsafe-eval' —— 这会极大削弱 XSS 防护能力，且 Stripe 并不要求你开放全局 unsafe-eval；
? 生产部署注意： 确保后端（如 Express）返回的 CSP 响应头不包含冲突策略，例如避免错误地写入 script-src 'self' 而遗漏 Stripe 域：

// ✅ 正确示例（Express 中安全配置 Stripe 相关 CSP）
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "script-src 'self' https://js.stripe.com https://www.php.cn/link/4b084ae4ac122a74d6c6b960b9f32c14 'sha256-...';" +
    "frame-src 'self' https://js.stripe.com;"
  );
  next();
});