已配置CSP unsafe指令仍出现Stripe JS脚本违规问题求助

问题描述 #

在ASP.NET 8 Pages项目中集成Stripe支付功能时，已通过meta标签配置了包含'unsafe-inline'、'unsafe-eval'、'wasm-unsafe-eval'及'self'指令的Content-Security-Policy，但Chrome和Firefox仍抛出Stripe JS脚本违反CSP的错误。

错误截图：

当前CSP配置代码：

<meta http-equiv="Content-Security-Policy" content="img-src data: https: http:;
 script-src-elem 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' 'self';
 style-src 'unsafe-inline' 'self';" />

问题原因 #

1. Stripe的核心JS脚本托管在官方域名https://js.stripe.com，而非当前项目的'self'域名，现有script-src-elem指令未允许该外部源，导致脚本被拦截。
2. 若使用Stripe支付弹窗或嵌入式元素，还会涉及Stripe的框架资源，现有配置未允许对应frame-src来源。

解决办法 #

1. 修正CSP的脚本与样式源 #

在script-src-elem中添加Stripe官方脚本域名，同时为样式源补充Stripe域名（部分Stripe组件会加载内联样式）：

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

2. 若使用ASP.NET CSP中间件配置（推荐） #

如果项目通过ASP.NET中间件而非meta标签配置CSP，在Program.cs中修改配置：

builder.Services.AddCsp(options =>
{
    options.DefaultSources(s => s.Self());
    options.ImageSources(s => s.Data().Https().Http());
    options.ScriptSources(s => s.Self()
                               .UnsafeInline()
                               .UnsafeEval()
                               .WasmUnsafeEval()
                               .CustomSources("https://js.stripe.com"));
    options.StyleSources(s => s.Self()
                               .UnsafeInline()
                               .CustomSources("https://js.stripe.com"));
    options.FrameSources(s => s.CustomSources("https://*.stripe.com"));
});

// 注册中间件
app.UseCsp();

3. 优化安全性（可选） #

若想避免使用'unsafe-inline'，可以为Stripe脚本生成哈希值或使用nonce：

• 哈希值：将Stripe脚本的内容哈希后添加到script-src-elem中（适合固定脚本）
• Nonce：生成随机nonce值，在meta标签和Stripe脚本标签中同时使用，确保只有带对应nonce的脚本被允许

验证方法 #

修改配置后，打开浏览器开发者工具的Security面板，查看CSP报告，确认是否还有资源被拦截；同时测试Stripe支付流程，验证功能正常。

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