嵌入第三方站点触发Content Security Policy frame-ancestors错误如何解决

你遇到的是内容安全策略(CSP)的嵌套限制错误，错误说明如下：

Refused to frame 'https://website.com' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

该规则是被嵌入的https://website.com站点在响应头中返回的，含义是仅允许同域名下的页面嵌套该站点内容，你的自有站点域名不在允许列表中，因此被浏览器拦截。

你在另一台同版本Chrome的VM访问正常，通常是两个原因导致：

• 该VM的出口IP被https://website.com的服务端识别为特殊白名单，返回的CSP规则未限制frame-ancestors
• 该VM的Chrome安装了可跳过CSP校验的扩展，绕过了浏览器的安全限制

是否需要修改IIS还是站点代码，取决于你是否有权限控制被嵌入的https://website.com的服务端配置：

如果你拥有https://website.com的管理权限 #

两种修改方式二选一即可：

• 修改站点代码：在站点页面的<head>标签中添加CSP配置meta标签，把你的自有站点域名加入允许列表，示例：

  <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' https://你的自有站点域名;">
  

• 修改IIS配置：在IIS的「HTTP响应头」功能中，新增/修改Content-Security-Policy响应头，将你的自有站点域名添加到frame-ancestors的允许列表中。

如果你无法控制https://website.com的配置 #

你无法通过修改自有站点的IIS或代码解决iframe嵌套拦截问题，只能调整自有站点逻辑，改用跳转、接口拉取内容渲染等其他方式展示相关内容。

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