静态网站集成Stripe遇CSP报错，如何修复？

问题 #

按照Stripe官方简易指南，在简单HTML页面中导入<script src="https://js.stripe.com/v3/"></script>，并用ws --spa index.html启动本地服务器运行页面。打开页面后，Stripe触发大量CSP相关报错。已修改meta标签添加多个js.stripe.com相关URL，但内联脚本与样式的问题仍未解决。

当前index.html代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <title>Test</title>
    <meta http-equiv="Content-Security-Policy" content="
        script-src 'self' 'unsafe-inline' https://js.stripe.com https://m.stripe.network; 
        style-src 'self' 'unsafe-inline' https://js.stripe.com;; 
        frame-src 'self' https://js.stripe.com https://hooks.stripe.com;
        connect-src 'self' https://api.stripe.com https://q.stripe.com;">
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body></body>
</html>

报错信息 #

Content-Security-Policy: 页面设置阻止了内联脚本（script-src-elem）的执行，违反指令：“script-src 'self'” preload.js:139:16
Content-Security-Policy: (仅报告策略) 页面设置将阻止内联脚本（script-src-elem）的执行，违反指令：“script-src 'self'” preload.js:139:16
Content-Security-Policy: 页面设置阻止了内联样式（style-src-elem）的应用，违反指令：“style-src 'self'” <匿名代码>:50:18
Content-Security-Policy: (仅报告策略) 页面设置将阻止内联样式（style-src-elem）的应用，违反指令：“style-src 'self'” <匿名代码>:50:18
Content-Security-Policy: 页面设置阻止了内联样式（style-src-elem）的应用，违反指令：“style-src 'self'” <匿名代码>:55:39
Content-Security-Policy: (仅报告策略) 页面设置将阻止内联样式（style-src-elem）的应用，违反指令：“style-src 'self'” <匿名代码>:55:39
页面完全加载前强制进行了布局。如果样式表尚未加载，这可能导致无样式内容闪烁。 markup.js:250:53
Content-Security-Policy: 页面设置阻止了内联脚本（script-src-elem）的执行，违反指令：“script-src 'self'” index.js:7764:27
Content-Security-Policy: (仅报告策略) 页面设置将阻止内联脚本（script-src-elem）的执行，违反指令：“script-src 'self'” index.js:7764:27

Content-Security-Policy: 页面设置阻止了内联脚本（script-src-elem）的执行，违反指令：“script-src https://m.stripe.network 'sha256-5DA+a07wxWmEka9IdoWjSPVHb17Cp5284/lJzfbl8KA=' 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='” preload.js:139:16
Content-Security-Policy: 页面设置阻止了内联样式（style-src-elem）的应用，违反指令：“style-src https://m.stripe.network” <匿名代码>:50:18
Content-Security-Policy: 页面设置阻止了内联样式（style-src-elem）的应用，违反指令：“style-src https://m.stripe.network” <匿名代码>:55:39
Content-Security-Policy: 页面设置阻止了内联脚本（script-src-elem）的执行，违反指令：“script-src https://m.stripe.network 'sha256-5DA+a07wxWmEka9IdoWjSPVHb17Cp5284/lJzfbl8KA=' 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='” index.js:7764:27

TypeError: styleElement.sheet is null
element-collapser.js:91:9
Content-Security-Policy: 页面设置阻止了内联样式（style-src-elem）的应用，违反指令：“style-src 'self'” element-collapser.js:88:57
Content-Security-Policy: (仅报告策略) 页面设置将阻止内联样式（style-src-elem）的应用，违反指令：“style-src 'self'”

解决方案 #

1. 修复CSP标签的语法错误 #

你的style-src指令末尾多了一个分号，这会导致CSP规则解析异常，先修正这个问题：

style-src 'self' 'unsafe-inline' https://js.stripe.com https://m.stripe.network; 

2. 补充Stripe所需的完整CSP规则 #

Stripe.js运行时会从多个Stripe子域名加载资源、生成内联脚本和样式，需要覆盖所有相关域名，同时保留必要的内联权限：

• script-src：添加https://*.stripe.com覆盖所有Stripe子域名，保留'unsafe-inline'（Stripe部分内联脚本无法用哈希替代）
• style-src：添加https://*.stripe.com，保留'unsafe-inline'（Stripe的内联样式依赖此规则）
• img-src：添加https://*.stripe.com（Stripe会加载图标等图片资源）
• font-src：添加https://*.stripe.com（Stripe可能加载自定义字体）

修正后的完整CSP meta标签：

<meta http-equiv="Content-Security-Policy" content="
    script-src 'self' 'unsafe-inline' https://*.stripe.com; 
    style-src 'self' 'unsafe-inline' https://*.stripe.com; 
    frame-src 'self' https://*.stripe.com;
    connect-src 'self' https://*.stripe.com;
    img-src 'self' https://*.stripe.com;
    font-src 'self' https://*.stripe.com;">

3. 规避ws --spa的潜在冲突 #

ws的SPA模式可能会额外注入脚本或修改响应头，导致你的CSP规则被覆盖。可以尝试：

• 改用普通模式启动：ws index.html
• 或者换用其他本地服务器工具，比如npx serve .

4. 验证CSP规则 #

如果仍有报错，打开浏览器开发者工具的Security面板，查看具体的CSP违规详情，确认是否遗漏了某个Stripe域名。Stripe官方明确要求使用Stripe.js时允许所有*.stripe.com子域名的资源加载。

内容的提问来源于Stack Exchange，提问作者K. Anbar