如何修复Stripe App UI扩展发起第三方API请求时的CSP错误？

Stripe App UI扩展运行在Stripe提供的前端沙箱环境中，平台默认注入严格的内容安全策略（CSP），connect-src指令默认仅放行本地开发地址（http://localhost:*）与Stripe官方域名，未做配置的情况下直接从前端上下文向第三方域名发起HTTP请求，会被策略拦截，抛出如下错误：

Refused to connect to...because it violates the following Content Security Policy directive: "connect-src http://localhost:*...

Stripe不支持开发者直接修改沙箱顶层CSP规则，可通过以下两种合规方案解决请求被拦截的问题：

方案一：使用官方SDK请求能力 + 配置域名白名单（推荐） #

这是Stripe官方支持的前端直连方案，不需要额外搭建代理服务：

• 替换原生请求方法：不要直接使用浏览器原生fetch、axios等请求库，从@stripe/ui-extension-sdk导入官方封装的fetch方法发起请求，该方法走Stripe扩展的合法请求通道，不会触发沙箱CSP拦截。
  示例代码：

  import { fetch } from '@stripe/ui-extension-sdk';
  
  const requestThirdPartyApi = async () => {
    const response = await fetch('https://example.com/api', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        // 其余自定义请求头
      }
    });
    return response.json();
  };
  

• 配置外呼域名白名单：打开项目根目录的stripe-app.json配置文件，在networkAccess.domains字段中添加你需要请求的第三方域名（仅需填写协议+根域名，不需要带路径、端口通配符）：
  配置示例：

  {
    "app_id": "你的Stripe App ID",
    "version": "你的扩展版本号",
    "networkAccess": {
      "domains": ["https://example.com"]
    },
    // 其余原有配置保持不变
  }
  

• 配置修改完成后，重启本地开发服务（重新执行stripe apps start命令），重新加载扩展预览即可正常发起请求。如果是线上版本，需要重新提交扩展版本审核，审核通过后配置生效。

方案二：自建服务端代理转发 #

如果第三方API存在跨域限制、需要存放敏感密钥（比如第三方API的Secret Key不能暴露在前端），可通过自建服务端代理的方式实现：

• 搭建你自己的后端服务，封装对应接口，由后端服务发起对https://example.com/api的请求
• 将你自己的后端服务域名添加到上述stripe-app.json的networkAccess.domains白名单中
• 前端扩展仅请求你自己的后端接口，由后端完成第三方请求转发，完全绕开前端沙箱的CSP限制

注意：不要尝试通过插入meta标签、修改响应头等方式自定义沙箱CSP规则，Stripe App的顶层CSP由平台强制注入，自行修改不会生效，还可能导致扩展提交审核时被驳回。

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