Node.js集成Stripe遇CSP错误及支付流程中断问题求助

一、CSP 配置错误修复 #

你当前的 CSP 配置存在两个核心问题：

1. 源路径匹配不精确：你添加的是 https://js.stripe.com/v3/（带末尾斜杠），但实际请求的脚本地址是 https://js.stripe.com/v3（无斜杠），CSP 对源的匹配是严格精确的，斜杠差异会导致匹配失败。
2. 缺少 Stripe 必需的其他源：Stripe 支付流程不仅需要加载脚本，还需要与 API 通信、加载结账页面，因此需要补充对应 CSP 指令。

修正后的 Helmet 配置：

appNode.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: [
          "'self'",
          'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
          'https://unpkg.com',
          'https://cdnjs.cloudflare.com',
          'https://js.stripe.com/v3', // 移除末尾斜杠
        ],
        styleSrc: [
          "'self'",
          'https://unpkg.com',
          'https://cdnjs.cloudflare.com',
          'https://fonts.googleapis.com',
          "'unsafe-inline'", // 后续使用 Stripe Elements 时必需，当前跳转场景可选
        ],
        imgSrc: [
          "'self'",
          'data:',
          'https://tile.openstreetmap.org',
          'https://unpkg.com',
        ],
        connectSrc: [
          "'self'",
          'https://unpkg.com',
          'https://cdnjs.cloudflare.com',
          'https://api.stripe.com', // 添加 Stripe API 通信源
        ],
        frameSrc: [
          "'self'",
          'https://checkout.stripe.com', // 添加结账页面 Frame 源
        ],
        fontSrc: [
          "'self'",
          'https://unpkg.com',
          'https://cdnjs.cloudflare.com',
          'https://fonts.gstatic.com',
        ],
        objectSrc: ["'none'"],
        upgradeInsecureRequests: [],
      },
    },
  }),
);

二、支付函数代码错误修复 #

你的支付函数存在逻辑错误，会导致异常提示干扰正常流程：

1. catch 块外的 showAlert 无条件执行：无论支付流程成功与否，最后一行的 showAlert 都会运行，且 err 在此作用域未定义，会抛出额外错误。
2. redirectToCheckout 错误未显式处理：该方法若失败（如 Session 无效）会返回包含 error 的对象，需手动抛出错误进入 catch 块统一处理。

修正后的支付函数：

import { showAlert } from './alerts.js';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';

export const payment = async (productId) => {
  try {
    const checkout = await axios({
      method: 'GET',
      url: `${process.env.API_URL}/api/v1/checkout-session/${productId}`,
    });
    const sessionId = checkout.data.session.id;
    const stripe = await loadStripe(process.env.STRIPE_PUBLIC_KEY);
    
    const result = await stripe.redirectToCheckout({ sessionId });
    // 捕获 redirectToCheckout 返回的错误
    if (result.error) throw new Error(result.error.message);
  } catch (err) {
    const errorMessage = err.response?.data?.message || err.message || 'Something went wrong. Please try again.';
    showAlert('error', errorMessage);
  }
};

三、验证步骤 #

1. 重启 Node.js 服务，确保新的 CSP 配置生效
2. 清除浏览器缓存（避免旧的 CSP 响应头被缓存）
3. 测试支付流程，检查浏览器控制台是否仍有 CSP 错误

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