Blazor WASM升级至v6.0.7后OIDC认证iframe的CSP错误解决问询

问题原因 #

.NET 6.0.7版本中，Blazor WASM的OIDC认证模板默认添加了更严格的CSP（内容安全策略）头，其中frame-ancestors 'none'规则会阻止Identity Server的认证页面被嵌入到iframe中，而OIDC认证流程恰好依赖iframe完成回调操作，因此触发了错误。

正确配置CSP头的方法 #

你需要调整CSP的frame-ancestors指令，允许你的认证服务器域名，同时保留其他必要的安全规则。不同托管环境的配置方式如下：

1. IIS托管 #

打开站点的web.config文件，找到<system.webServer>节点，添加或修改<httpProtocol>下的自定义响应头：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' https://xxx.xxx.xx; default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

将https://xxx.xxx.xx替换为你的Identity Server 4实际域名即可。

2. NGINX托管 #

修改NGINX的站点配置文件，在server块中添加add_header指令：

server {
  # 保留现有配置不变
  add_header Content-Security-Policy "frame-ancestors 'self' https://xxx.xxx.xx; default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';";
}

如果需要允许多个域名，用空格分隔添加即可。

3. Azure静态Web Apps托管 #

登录Azure门户，找到你的静态Web Apps资源，进入配置→应用程序设置，新增一条配置项：

• 名称：Content-Security-Policy
• 值：frame-ancestors 'self' https://xxx.xxx.xx; default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';

关键注意事项 #

• frame-ancestors指令只能通过HTTP响应头配置，无法通过HTML的<meta>标签生效。
• 不要过度放宽CSP规则，仅添加实际需要的认证服务器域名，保障应用安全性。
• 如果应用依赖外部资源（如CDN脚本、样式），需要在对应的CSP指令（如script-src、style-src）中补充对应的资源域名。

验证配置 #

修改配置后重启托管服务，打开应用触发认证流程，检查浏览器控制台是否还有CSP错误。也可以通过浏览器开发者工具的网络标签，查看应用首页的响应头，确认Content-Security-Policy已正确配置。

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