Firebase Hosting配置CSP后页面空白无法正常加载如何解决

AI 小北

2026-9-1

问题结论

Firebase Hosting完全支持自定义CSP响应头，你页面空白、资源被拦截全是配置错误导致的，和平台能力无关。

核心错误点

CSP语法完全写错：你第三次尝试的配置中style-src后多写了一个冒号，导致该位置之后的所有CSP指令全部被浏览器忽略，最终仅最开头的default-src规则生效；同时CSP规定'self'/'unsafe-inline'/'none'这类关键字必须包裹单引号，你的报错信息里显示生效的规则是default-src self（无单引号），浏览器会把self识别为名为self的外部域名，自然会拦截所有你自己站点下的JS、CSS、图片、manifest资源。
指令值错配：'unsafe-inline'仅对script-src、style-src类脚本/样式指令生效，你把它塞进connect-src/img-src/font-src等指令里属于无效值，浏览器会直接跳过这些错误配置。
缺失必要白名单：Create React App默认构建的生产包包含inline运行时代码，Firebase Authentication、Functions、Storage服务需要对接专属服务域名，你之前的配置完全没有覆盖这些必需项。

可直接部署的最小可用配置

替换firebase.json中hosting字段下的headers配置，部署后即可正常加载页面，同时满足基础CSP防护要求：

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "default-src 'self'; base-uri 'self'; script-src 'self' 'unsafe-inline' https://*.firebaseapp.com https://*.firebaseio.com https://*.googleapis.com https://www.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https://*.googleapis.com https://*.firebasestorage.googleapis.com; connect-src 'self' wss://*.firebaseio.com https://*.firebaseio.com https://*.googleapis.com https://*.firebasestorage.googleapis.com https://identitytoolkit.googleapis.com; font-src 'self' data:; object-src 'none'; frame-ancestors 'none'; manifest-src 'self'"
          }
        ]
      }
    ]
  }
}

注意：配置里所有CSP关键字的单引号是语法必需部分，不可省略，否则会直接导致规则解析失效。

配置优化建议

初始部署后如果控制台仍有CSP拦截报错，直接按照报错提示把缺失的资源域名加到对应分类的指令白名单里即可，不要图省事直接写default-src *这种完全失去防护作用的规则。
如果你想移除配置里的'unsafe-inline'进一步提升安全性，可以在React构建时设置环境变量INLINE_RUNTIME_CHUNK=false重新打包，之后把控制台提示的inline脚本sha256哈希值加入script-src规则，就能去掉unsafe-inline关键字。
如果你额外接入了Google Analytics、Firebase性能监控等服务，只需要把对应服务的官方域名追加到对应指令的白名单中即可。

补充说明

你前两次写的default-src *全通配规则理论上不会拦截任何资源，如果部署后仍出现空白页面，是因为之前错误的CSP头被浏览器缓存了，执行硬刷新（Ctrl+Shift+R / Cmd+Shift+R）或者清理浏览器缓存即可恢复正常。

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