集成Stripe Elements时如何解决权限策略违规及CSP警告？

问题描述 #

我正在将Stripe Elements集成到ASP.NET Core Blazor Web应用中，功能运行正常，但浏览器控制台出现若干警告。已按照Stripe官方文档配置权限策略，Network标签显示策略设置正确，但使用需要3D验证的卡片时，加载银行3D挑战页面的<iframe>会触发以下警告：

• [Violation] Permissions policy violation: payment is not allowed in this document
• [Violation] Potential permissions policy violation: publickey-credentials-get is not allowed in this document.
• Refused to load the image 'data:image/png;base64,iVBORw0KGgo=' because it violates the following Content Security Policy directive: "img-src 'self'".

我尝试给<iframe>添加allow属性配置对应权限（代码如下），但仍出现相同警告，请问问题原因是什么？

<iframe src="whatever"
  width="600px" height="600px"
  allow="payment 'self' https://js.stripe.com
                        https://*.js.stripe.com 
                        https://api.stripe.com
                        https://maps.googleapis.com;
         publickey-credentials-get 'self' https://js.stripe.com
                        https://*.js.stripe.com
                        https://api.stripe.com
                        https://maps.googleapis.com">
</iframe>

（换行仅为可读性）

问题原因及解决办法 #

1. Permissions Policy配置无效的原因 #

手动给<iframe>添加allow属性没用，因为Stripe的3D验证<iframe>是由Stripe JS动态生成的，你无法直接修改它的属性。必须通过HTTP响应头配置全局的Permissions Policy，才能作用于动态生成的iframe。

正确的响应头配置示例：

Permissions-Policy: payment=("self" "https://js.stripe.com" "https://*.js.stripe.com" "https://api.stripe.com"), publickey-credentials-get=("self" "https://js.stripe.com" "https://*.js.stripe.com" "https://api.stripe.com")

2. CSP图片加载警告的原因 #

第三个警告是因为你的CSPimg-src指令只允许了'self'，但3D验证页面中的部分图片使用了base64格式的data URI，所以需要在img-src中添加data:协议。

修改后的CSP指令示例：

Content-Security-Policy: img-src 'self' data:; ...其他原有指令...

Blazor中配置响应头的方式 #

在Program.cs中添加中间件来设置响应头：

app.Use(async (context, next) =>
{
    // 配置Permissions Policy
    context.Response.Headers.Append("Permissions-Policy", "payment=('self' 'https://js.stripe.com' 'https://*.js.stripe.com' 'https://api.stripe.com'), publickey-credentials-get=('self' 'https://js.stripe.com' 'https://*.js.stripe.com' 'https://api.stripe.com')");
    // 配置CSP（根据实际需求补充其他指令）
    context.Response.Headers.Append("Content-Security-Policy", "img-src 'self' data:; script-src 'self' https://js.stripe.com; style-src 'self' 'unsafe-inline' https://js.stripe.com;");
    await next();
});

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