Firebase Hosting添加多规则CSP后Next.js应用崩溃求助

你的Content-Security-Policy（CSP）配置过于严格，没有允许Next.js应用运行必需的各类资源，导致浏览器阻止了关键资源加载，最终引发界面崩溃。

Next.js作为SSR/SSG框架，除了脚本外，还依赖样式、静态资源（图片/字体）、网络请求等资源，而你设置default-src 'none'后，所有未明确授权的资源都会被浏览器拦截。

必需补充的CSP规则： #

• 样式资源：Next.js会加载CSS文件，且服务器渲染的页面通常包含内联样式，需添加：
  style-src 'self' 'unsafe-inline';
• 静态资源：应用中的图片、字体需要允许加载，可添加：
  img-src 'self' data:; font-src 'self';（data:用于允许base64格式图片，若无相关需求可移除）
• 脚本权限：Next.js的初始化逻辑依赖内联脚本，需给script-src补充'unsafe-inline'；如果使用Firebase SDK，还需允许其脚本域名（比如https://www.gstatic.com），示例：
  script-src 'self' 'unsafe-inline' https://www.gstatic.com;
• 网络请求：若应用有API路由调用、Firebase服务通信，需添加对应域名的权限，示例：
  connect-src 'self' https://*.firebaseio.com https://*.firebaseapp.com;

修正后的CSP配置示例： #

"value": "frame-ancestors 'self'; default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://*.firebaseio.com https://*.firebaseapp.com;"

调试建议： #

打开浏览器开发者工具的控制台，查看具体的CSP报错信息，里面会明确指出被拦截的资源类型和来源，可根据报错针对性调整规则，这样能更精准地配置CSP。

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