font-src 配置了 CDN 地址为什么字体还是加载失败?
我在项目里用了 Google Fonts,CSP 里也加了对应的域名,但浏览器控制台一直报「Refused to load font from…」的错误。明明其他资源比如 script-src 引第三方 CDN 都没问题,就字体不行。
我的 CSP 头是这样设置的:
Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
是不是漏了什么?还是 Google Fonts 还有别的域名要加?
建议把 CSP 改成这样:
Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://*.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
注意几个点:
1. fonts.googleapis.com 主要提供 CSS 文件,字体文件实际是从 gstatic.com 或 gstatic.cn 下载
2. 使用通配符 *.gstatic.com 覆盖所有子域名情况
3. 确保服务端正确设置了 CSP 头,别漏了某个域名
我之前也遇到过类似问题,查了半天才发现是二级域名的问题,搞得很头疼。记得测试的时候清除下浏览器缓存,有时候旧的 CSP 策略还在生效。
要是还不行,打开浏览器开发者工具的 Network 面板看看具体请求地址,就能确认到底缺了哪个域名。
font-src指令可能没有完全覆盖所有需要的域名。Google Fonts 使用两个主要的域名:https://fonts.googleapis.com和https://fonts.gstatic.com。你在 CSP 中已经添加了https://fonts.gstatic.com到font-src,但是https://fonts.googleapis.com实际上提供的是 CSS 文件,这些 CSS 文件中引用的字体文件才真正从https://fonts.gstatic.com加载。所以,你需要将
https://fonts.googleapis.com添加到style-src中,而不是font-src。这是因为https://fonts.googleapis.com提供的是样式表,而https://fonts.gstatic.com才是真正的字体文件源。具体来说,你的 CSP 应该这样设置:
这里的关键是确保所有加载的资源都在 CSP 中得到授权。
style-src允许从https://fonts.googleapis.com加载样式表,而font-src允许从https://fonts.gstatic.com加载字体文件。如果你仍然遇到问题,检查一下浏览器控制台是否有更多的错误信息,或者查看网络请求,确认是否还有其他的域名或者路径被阻止。有时候,浏览器的缓存也可能导致一些奇怪的问题,试着清除浏览器缓存再看看。
另外,如果你的项目不需要
'unsafe-inline',尽量避免使用它,因为它允许所有的内联样式,可能会带来安全风险。可以考虑使用非内联样式或者使用'nonce-value'或者'hash-value'来替代'unsafe-inline'。