为什么设置了CSP后图片和字体资源还是被阻止了?

子源 阅读 50

我在开发博客项目时配置了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和星号通配符都没用,求指点哪里配置错了

我来解答 赞 8 收藏
二维码
手机扫码查看
1 条解答
长孙璐莹
问题出在你的CSP配置上,浏览器的错误提示其实已经给了很明确的线索。你写的 img-src https://images.example.comfont-src https://fonts.example.com 没有问题,但 default-src 'self' 会影响其他未明确指定的资源类型。

图片被拦截的原因是,虽然你设置了 img-src,但字体资源的加载规则继承了 default-src 'self',而字体域名 https://fonts.example.com 不在 default-src 的范围内。这导致字体加载失败,进一步影响了图片资源的解析。

解决办法很简单,改一下就行:

Content-Security-Policy: default-src 'self'; img-src https://images.example.com; font-src https://fonts.example.com; style-src 'self' https://fonts.example.com;


这里加了 style-src 是因为字体通常通过CSS加载,如果CSS本身被拦截,字体也加载不了。另外,确认一下页面上的图片和字体请求是否真的匹配了你设置的域名,有时候路径或者协议(http/https)不一致也会导致问题。

最后提醒一句,调试CSP的时候打开浏览器的开发者工具看网络请求和控制台报错,能省不少时间。
点赞 1
2026-02-14 16:04