Facebook应用加载失败：Content Security Policy frame-src规则报错咨询

控制台报错：[Report Only] Refused to frame 'https://edit.ihouseelite.com/' because it violates the following Content Security Policy directive: "frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com".

问题1：Report Only标识的含义 #

• [Report Only]前缀对应CSP的仅上报模式，默认规则下该标识的报错仅做违规日志上报，不会实际拦截资源加载。如果已经出现实际加载失败的情况，需排查两个可能性：
  • Facebook同时部署了两套CSP规则，一套为仅上报模式用于测试新规则，另一套正式生效的CSP也添加了相同的frame-src限制，你可在控制台过滤所有CSP相关报错，确认是否存在不带[Report Only]前缀的正式拦截日志
  • 你的站点自身返回的CSP规则也存在iframe加载限制，和Facebook侧的CSP规则叠加导致拦截

问题2：规则理解与修复方案 #

• 你对规则的理解是正确的：这条CSP由Facebook页面返回，明确限定了仅白名单内的域名可在Facebook页面的iframe中加载，你的域名不在白名单内所以触发违规。
• 你之前在应用基础设置中配置域名未生效，是因为该配置仅作用于应用的OAuth回调、跳转等场景，和Facebook页面全局的frame-src CSP不属于同一套配置，需通过以下流程修复：
  1. 登录Facebook开发者后台，进入对应应用的配置页面，找到「Page Tab」相关的产品配置项
  2. 准确填写应用的Page Tab URL、安全域名、iframe加载域名三个字段，所有域名必须和你实际使用的edit.ihouseelite.com完全匹配
  3. 提交应用正式审核，审核通过后Facebook会自动将你的域名添加到对应页面的CSP白名单中，拦截规则会自动失效
• 临时应急方案：
  可先将应用内容托管到*.fbsbx.com域名下（该域名在Facebook默认CSP白名单内），通过Facebook提供的应用代理功能中转流量，先保障现有用户的正常使用，等审核通过后再切回原域名

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