Facebook页面自定义Tab中iframe被CSP拦截无法加载求助

我们在Facebook页面中使用了Custom Tab（自定义标签），其内容由我方自有网站的iframe承载。
近期突然出现iframe被拦截的问题，报错信息如下：

Refused to frame 'https://www.mywebsite.com/' because it violates the following Content Security Policy directive: "default-src 'self' facebook.com *.facebook.com fbcdn.net *.fbcdn.net fbsbx.com *.fbsbx.com cdninstagram.com *.cdninstagram.com data: blob: *.whatsapp.com whatsapp.com *.whatsapp.net whatsapp.net". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

我方未修改任何相关配置，推测该问题由Facebook侧的变更导致。我已尝试在页面头部添加<meta>标签配置，但仍持续报错，iframe无法在Facebook页面的自定义Tab中正常加载。
更新：该问题疑似为Facebook现有Bug，可在Facebook开发者平台bug跟踪板块查询对应编号为386260146322594、268717971719721的条目获取最新进度。

解决方案 #

1. 排查自有站点配置 #

• 该报错的CSP规则由Facebook父页面的响应头返回，你在自有站点添加<meta>标签配置CSP不会生效，父页面的CSP优先级高于子页面的所有安全配置。
• 检查自有站点的响应头配置：
  • 移除禁止外域嵌入的配置，比如X-Frame-Options: DENY或X-Frame-Options: SAMEORIGIN，如需保留可修改为X-Frame-Options: ALLOW-FROM https://www.facebook.com
  • 在站点响应头中添加CSP的frame-ancestors指令，配置示例：frame-ancestors 'self' facebook.com *.facebook.com;，注意该指令不支持在<meta>标签中配置，必须通过服务器返回响应头的方式设置。

2. 核对Facebook开发者后台配置 #

• 登录Facebook开发者平台，打开对应应用的设置页，在「基本设置」的「应用域」字段中确认已经添加了你的站点域名，拼写、协议（https）完全匹配当前使用的地址。
• 进入「产品」-「页面自定义Tab」设置页，确认「页面Tab URL」「安全页面Tab URL」均为当前使用的https地址，路径配置正确。

3. 临时规避方案 #

由于该问题已被确认是Facebook侧的已知Bug，在官方修复前可以临时调整自定义Tab的交互逻辑：将原本的内嵌iframe模式改为点击按钮后新窗口打开你的站点，等Bug修复后再切回内嵌模式。

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