Node.js站点Content Security Policy拦截图片、字体资源加载求助

你遇到的两类拦截本质是当前配置的CSP规则没有覆盖对应资源的加载源，按以下步骤逐个排查修复即可：

• 数据库读取的图片被拦截
  先找CSP配置里的img-src规则项：
  • 若数据库返回的是base64编码图片、blob格式流图片，需要在img-src的规则列表中追加blob: data:两个源声明
  • 若图片存储在独立资源服务、对象存储上通过专属域名访问，需要将该资源域名完整加入img-src白名单；本地开发阶段记得把本地服务地址（localhost、127.0.0.1及对应开发端口）也加入白名单，避免本地资源被误拦截
• Google字体资源被拦截
  Google字体加载会涉及两类不同资源，需要分别配置对应CSP指令的白名单，缺一项都会触发拦截：
  1. 字体样式CSS文件：需要在style-src指令中加入字体样式服务的源；如果是通过JS动态import加载字体样式，还要同步检查script-src规则是否放开对应源权限
  2. woff2/woff/ttf格式的字体实体文件：需要在font-src指令中加入字体静态资源服务的源

配置避坑提示 #

严禁直接配置default-src *全通配规则绕过拦截，这种写法会彻底丧失CSP的XSS防护能力，所有白名单配置都要遵循最小权限原则，只加实际用到的源

• CSP配置可能存在于两个位置：入口HTML文件的meta标签、服务端接口响应的安全头，两处配置必须完全一致——浏览器会对两处规则取交集执行，只改一处很容易出现配置不生效的问题
• 调整规则时建议先切换到Content-Security-Policy-Report-Only模式，该模式下只会上报拦截日志不会实际阻断资源加载，等确认所有业务资源都在白名单内、没有漏拦截的报错后，再切回正式阻断模式
• 遇到内联脚本、内联样式拦截时，不要直接加unsafe-inline规则绕过，优先用nonce随机值或文件hash的方式做白名单校验，避免降低CSP的安全防护等级
• 可以对照报错信息里列出的被拦截资源URI、触发拦截的具体CSP指令项，精准补全对应规则，不用盲目加白名单

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