Content Security Policy的frame-src规则失效问题排查求助

问题原因 #

1. 响应头CSP规则限制：你的页面响应头中已配置content-security-policy，其中frame-src仅允许加载https://cdn.jsdelivr.net的iframe，而你要嵌入的https://yt.localtest.me不在允许范围内，这是导致阻止的直接原因。
2. Meta标签CSP不生效：当页面同时通过HTTP响应头和meta标签设置CSP时，两者规则会合并并取更严格的交集。由于响应头的frame-src未包含目标域名，即使meta标签中添加了*.localtest.me也无法覆盖响应头的限制。
3. 残留的X-Frame-Options：虽然你提到已移除Nginx的X-Frame-Options:Deny配置，但响应头中仍存在该字段。不过此字段作用是限制当前页面被其他页面嵌入，不影响当前页面嵌入外部iframe，属于次要问题但建议清理。

解决方法 #

• 更新响应头的CSP规则：修改服务器返回的content-security-policy字段，在frame-src中添加目标域名。例如：

  content-security-policy: script-src 'self' https://cdn.jsdelivr.net 'nonce-Hc3huW7RDIa1gqTxo/n05+MhyPwBpRiokpv12+2uNN4='; default-src 'self'; frame-src https://cdn.jsdelivr.net https://yt.localtest.me; img-src 'self' https://cdn.jsdelivr.net data:; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; base-uri 'none'; font-src 'self' https://cdn.jsdelivr.net; connect-src 'self' * ws: wss: localhost:* localtest.me:*
  

  如果需要允许所有localtest.me子域名，可将frame-src改为：

  frame-src https://cdn.jsdelivr.net https://*.localtest.me;
  

• 清理冗余配置：移除页面中的meta标签CSP，避免规则冲突；同时彻底检查服务器（Kestrel/Nginx）配置，确保X-Frame-Options:Deny不再出现在响应头中。

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