Facebook Webview加载Firebase部署的Angular应用报CSP拒绝加载错误

问题根因排查 #

你遇到的报错分为两类，分别对应不同的问题：

1. Facebook父页面CSP拦截（HTML渲染错误） #

报错来源是Facebook的referer_frame.php，说明是Facebook的父级页面的内容安全策略不允许嵌入你的Firebase域名，修改你自己页面的meta标签无法解决这个问题，需要操作如下：

• 登录Facebook开发者后台，找到你对接的应用（Canvas应用、Page Tab、小游戏等对应项目）
• 在应用的安全/域名配置项中，将你的Firebase域名https://yyyyyy/添加到「允许嵌入的域名」「Valid OAuth 重定向URI」「业务域名白名单」等相关配置项中，提交后等待配置生效即可。

2. 自身页面CSP配置错误（API请求拦截+配置冗余） #

你当前的CSP配置存在两个核心错误：

• 同时声明了两个独立的CSP meta标签，多个CSP的规则会取交集，所有资源必须同时满足所有CSP的要求才会放行，你第一个CSP未允许API域名，第二个CSP未允许Firebase域名，就会触发拦截
• 同一个CSP的content中重复定义了frame-src指令，后定义的会覆盖前定义的，导致你加的Firebase域名被覆盖失效

解决方案 #

第一步：修正自身页面的CSP配置 #

删除原有两个CSP meta标签，替换为以下合并后的配置：

<meta http-equiv="Content-Security-Policy" content="
default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com https://yyyyyy/;
connect-src 'self' https://xxxxxx/ https://yyyyyy/;
">

配置说明：

• 所有CSP规则合并到同一个meta标签中，不同指令用分号分隔
• 明确声明connect-src指令，避免依赖default-src fallback产生歧义，将API域名和Firebase域名都加入允许列表
• 仅保留一次frame-src定义，避免重复定义导致的覆盖问题

第二步：检查Firebase托管配置 #

如果你在firebase.json中配置了自定义响应头，确认没有额外返回CSP响应头：CSP响应头的优先级高于meta标签的CSP配置，如果服务端返回了CSP头，需要同步修改响应头中的规则和上述配置保持一致。

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