设置了font-src还是报字体加载被CSP阻止,哪里配置错了?

Good“晏鸣 阅读 39

我在页面里用@font-face引入了自定义字体,同时设置了CSP头”font-src ‘self’;”。但控制台还是报错:

Refused to load the font ‘data:application/font-woff…’ because it violates the following Content Security Policy directive: “font-src ‘self'”

我尝试过把字体文件放在同一域名下,并用<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-javascript">
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
}
</code></code></pre>这样引入,但问题依旧。为什么CSP还是阻止加载呢?
我来解答 赞 9 收藏
二维码
手机扫码查看
2 条解答
迷人的瑞云
你那个字体是base64内联的data URI格式,font-src 'self' 不会允许data协议。要加个 'self' data: 或者 font-src 'self' data: 就应该能用。

Content-Security-Policy: font-src 'self' data;
点赞 2
2026-02-12 22:04
萌新.俊娜
问题出在"data:"协议上,font-src 'self'不包含data URI。你得加上data:或者直接允许具体的字体路径。试试这个CSP头:
font-src 'self' data:;
如果还不行,确保字体文件没被其他规则挡住,比如default-src
点赞 9
2026-01-29 12:27