Stripe Checkout内容安全策略(CSP)错误排查求助

数据老陈

2026-7-29

解决Stripe Checkout集成中的Content Security Policy（CSP）错误

问题背景

测试环境下Stripe Checkout支付流程可正常完成，但控制台出现大量CSP错误，影响开发体验且存在线上风险。

解决方案

CSP错误的核心原因是当前安全规则未允许Stripe Checkout所需的资源加载，需添加包含Stripe相关域名的CSP配置。

1. 前端页面添加CSP Meta标签

在index.html的<head>中插入以下CSP配置标签，允许Stripe的脚本、样式、iframe等资源：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval' stripe.com m.stripe.com js.stripe.com;
  style-src 'self' 'unsafe-inline' stripe.com m.stripe.com js.stripe.com;
  frame-src stripe.com m.stripe.com;
  img-src 'self' data: stripe.com m.stripe.com *.stripe.com;
  connect-src 'self' api.stripe.com;
">

配置说明：

default-src 'self'：默认仅允许自身域名资源
script-src：允许加载Stripe官方脚本域名，unsafe-inline/unsafe-eval为测试环境兼容所需，生产环境可根据Stripe规范调整
style-src：允许Stripe的样式资源加载
frame-src：允许嵌入Stripe Checkout的iframe
img-src：允许Stripe的卡片图标等图片资源
connect-src：允许向Stripe API发起请求

2. Firebase Hosting环境额外配置

如果使用Firebase Hosting部署，需在firebase.json中配置服务器级CSP Header（优先级高于页面meta标签）：

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' stripe.com m.stripe.com js.stripe.com; style-src 'self' 'unsafe-inline' stripe.com m.stripe.com js.stripe.com; frame-src stripe.com m.stripe.com; img-src 'self' data: stripe.com m.stripe.com *.stripe.com; connect-src 'self' api.stripe.com;"
          }
        ]
      }
    ]
  }
}