Firebase Hosting使用hellosign-embedded出现frame-ancestors iframe报错

你完全搞反了frame-ancestors CSP指令的生效逻辑，当前配置加错了作用对象，根本碰不到触发报错的规则。

• frame-ancestors 是被嵌入的目标页面在自身响应头里返回的规则，作用是声明允许哪些来源的父页面把自己嵌入iframe。浏览器做iframe加载校验时，只会读取iframe目标地址（也就是你这里的https://app.hellosign.com/）返回的这个规则，和你作为嵌入方在自己站点配的CSP规则没有任何关系。
• 你遇到的拦截本质是Hellosign的页面对外返回的CSP规则为frame-ancestors 'self'，即只允许Hellosign自有域名的页面嵌入它自己，没有给你的Firebase站点开权限。
  你在Firebase Hosting里配置的CSP头，只会附加在你自己站点返回的响应上，管不到Hellosign服务器返回的响应内容，自然不可能解决这个拦截。

按以下顺序操作即可解决问题：

• 不要直接硬编码iframe地址嵌入Hellosign根路径
  必须使用hellosign-embedded SDK配合后端调用HelloSign API生成的带签名的专属嵌入URL，直接嵌根路径默认是全局禁止外部嵌入的，不会对任何第三方域名开放权限。
• 去HelloSign（Dropbox Sign）控制台配置嵌入白名单
  1. 登录你的HelloSign账号，进入API相关设置页
  2. 找到嵌入功能对应的「允许域名/Allowed Domains」配置项
  3. 把你Firebase站点的所有访问域名精确添加进去，包括Firebase默认分配的xxx.web.app/xxx.firebaseapp.com域名、你绑定的自定义域名；本地调试用的localhost也需要一并加入
  4. 保存配置后等待1-2分钟待服务端生效，Hellosign会自动给你生成的合法嵌入URL的响应头里，把你的域名加入frame-ancestors允许列表
• 清理无效配置
  你当前Firebase配置里写的frame-ancestors 'self' *://*.hellosign.com规则，作用是控制谁能嵌入你的站点，如果你没有自己的页面需要被Hellosign嵌入的需求，这条可以直接删除，留着也不会影响Hellosign的嵌入逻辑。
• 验证生效
  配置完成后，重新调用接口生成新的嵌入签名URL（旧URL会缓存旧的响应头），再测试嵌入即可。可以打开浏览器开发者工具，查看对应Hellosign嵌入请求的响应头，确认Content-Security-Policy中的frame-ancestors值已经包含你的站点域名，就不会再触发拦截。

注意：不要尝试用反向代理、修改浏览器设置之类的方式绕过这个限制，这个CSP校验是在浏览器端强制执行的，只有Hellosign服务端主动修改返回的CSP规则才能正常通过校验，白名单配置是官方提供的唯一修改这个规则的渠道。

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