font-src 配置了还是报 CSP 字体加载错误?

东方好妍 阅读 52

我在项目里加了 Content Security Policy,字体文件老是被拦,明明 font-src 已经配了 cdn.jsdelivr.net,但浏览器控制台还是报错说违反策略。

我用的是 Webpack 打包的 React 项目,字体是从 CDN 引入的。试过把 ‘self’、https: 都加上,甚至用了 * 通配符(虽然知道不安全),但还是不行。是不是哪里漏了?

const style = document.createElement('style');
style.textContent = <code>
  @font-face {
    font-family: &#039;CustomFont&#039;;
    src: url(&#039;https://cdn.jsdelivr.net/npm/@example/font.woff2&#039;) format(&#039;woff2&#039;);
  }
</code>;
document.head.appendChild(style);
我来解答 赞 7 收藏
二维码
手机扫码查看
2 条解答
Designer°佼佼
检查了一下你的代码和 CSP 配置,有几个地方需要注意。首先,确保你在设置 CSP 头的时候,font-src 确实包含了 https://cdn.jsdelivr.net。有时候 CSP 可能被覆盖或者拼写错误,要仔细检查一下。

其次,你的 @font-face 写法没问题,但要注意如果 CSP 中还有其他限制,比如 base-uri 或者 default-src,这些也可能影响到字体的加载。你可以尝试在 CSP 中单独列出所有可能的资源源,确保没有遗漏。

最后,确保你的服务器正确设置了 CSP 头。如果你是在开发环境中测试,可以暂时用 console.log 或者浏览器的开发者工具查看当前生效的 CSP 策略,确认是否是你预期的那个。

举个例子,如果你在 HTTP 响应头中设置 CSP,应该是这样的:
Content-Security-Policy: default-src 'self'; font-src 'self' https://cdn.jsdelivr.net


如果是通过 HTML 标签设置,应该是:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://cdn.jsdelivr.net">


注意引号的使用,有时候单双引号不对也会导致问题。

如果以上都确认无误,可以尝试清除浏览器缓存,有时候旧的 CSP 设置会被缓存住。

希望这些建议能帮到你,如果还有问题再找我哈。
点赞
2026-03-23 17:11
IT人姿言
检查一下你的 CSP 头设置,确保没有拼写错误或者多余的空格。有时候这些小细节会搞人心态。还有,确认你的 CSP 是在服务器端设置的,而不是通过 meta 标签,因为 meta 标签可能会有兼容性问题。试试这个配置:

Content-Security-Policy: default-src 'self'; font-src 'self' https://cdn.jsdelivr.net;


然后重启下服务器,再看看控制台。拿去改改。
点赞
2026-03-20 14:47