为什么设置了CSP后图片和字体资源还是被阻止了?
我在开发博客项目时配置了CSP头,但图片和字体资源还是被浏览器拦截了。我明明设置了和,控制台报错显示:
Refused to load the image 'https://images.example.com/pic.jpg' because it violates the following Content Security Policy directive: "img-src https://fonts.example.com".
我的配置是这样写的:
Content-Security-Policy: default-src 'self'; img-src https://images.example.com; font-src https://fonts.example.com;
已经确认域名拼写正确,但为什么字体源会出现在图片的错误信息里?尝试过添加nonce和星号通配符都没用,求指点哪里配置错了
img-src https://images.example.com和font-src https://fonts.example.com没有问题,但default-src 'self'会影响其他未明确指定的资源类型。图片被拦截的原因是,虽然你设置了
img-src,但字体资源的加载规则继承了default-src 'self',而字体域名https://fonts.example.com不在default-src的范围内。这导致字体加载失败,进一步影响了图片资源的解析。解决办法很简单,改一下就行:
这里加了
style-src是因为字体通常通过CSS加载,如果CSS本身被拦截,字体也加载不了。另外,确认一下页面上的图片和字体请求是否真的匹配了你设置的域名,有时候路径或者协议(http/https)不一致也会导致问题。最后提醒一句,调试CSP的时候打开浏览器的开发者工具看网络请求和控制台报错,能省不少时间。