如何解决Chrome扩展中CSP拒绝加载Stripe脚本的问题？

开发者阿泽

2026-7-22

解决Chrome扩展加载Stripe脚本的CSP错误

核心原因

Chrome扩展的Content Security Policy（CSP）完全由manifest.json控制，你在index.html中设置的meta标签CSP不会生效——这是扩展的安全机制决定的，优先级高于页面自身的CSP配置。当前错误是因为你的扩展CSP的script-src规则没有包含Stripe脚本的源https://js.stripe.com。

具体修复步骤

根据你的扩展使用的Manifest版本（V2或V3），修改manifest.json的content_security_policy字段：

如果你用的是Manifest V3

Manifest V3的CSP采用对象结构配置：

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://js.stripe.com 'wasm-unsafe-eval' 'inline-speculation-rules'; object-src 'self';",
    // 若扩展包含service worker，需额外配置对应字段
    "service_worker": "script-src 'self' 'wasm-unsafe-eval';"
  },
  // 其他原有配置...
}

注意：extension_pages覆盖扩展内所有页面（popup、options页等），必须将https://js.stripe.com显式加入script-src列表。

如果你用的是Manifest V2

V2采用字符串格式配置：

{
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://js.stripe.com 'wasm-unsafe-eval' 'inline-speculation-rules'; object-src 'self';",
  // 其他原有配置...
}

额外检查

无需在permissions字段添加https://js.stripe.com——CSP已允许加载该源的脚本，权限字段主要控制扩展能否发起网络请求（若后续代码需向Stripe API发送请求，才需添加对应host权限）。
修改完成后，务必在chrome://extensions/页面点击「重新加载」，让新的CSP配置生效。