Facebook Customer Chat Plugin能否在iframe环境中正常运行？

核心原因 #

你遇到的报错和你自行配置的站点CSP规则无关，是Facebook官方服务自带的CSP限制导致的。
你配置的content-security-policy: frame-ancestors IFRAME_DOMAIN仅能控制你自己站点的资源允许被哪些域名嵌套，完全无法覆盖Facebook服务返回的CSP规则。Facebook对旗下所有可嵌入资源做了严格的域名白名单限制，仅官方授权的域名可以嵌套其服务，浏览器会优先遵循资源提供方（也就是Facebook）的CSP规则执行拦截，所以才会抛出你看到的报错。

可行解决方案 #

目前没有站点侧可绕过该限制的方法，只能按照官方要求调整集成方式：

• 不要尝试直接将Facebook Customer Chat Plugin的服务地址作为iframe的src加载，这一操作本身就被Facebook的安全规则禁止
• 官方推荐的集成方案是直接把插件的SDK部署到你的站点页面源码中，不需要额外嵌套iframe即可正常运行
• 如果你确实有嵌套iframe的业务需求，可将插件的集成代码部署到你自定义iframe指向的自有页面中，而非直接嵌套Facebook的服务地址

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