拒绝加载字体 '<URL>' 因为它违反了以下内容安全策略指令 default-src ，所以使用 default-src 作为后备

Posted 2023-03-24

【中文标题】拒绝加载字体 \'<URL>\' 因为它违反了以下内容安全策略指令 default-src ，所以使用 default-src 作为后备

【英文标题】：Refused to load the font '<URL>' because it violates the following Content Security Policy directive default-src ,so default-src is used as a fallback拒绝加载字体 '<URL>' 因为它违反了以下内容安全策略指令 default-src ，所以使用 default-src 作为后备

【发布时间】：2018-11-06 16:11:23

【问题描述】：

我正在使用 Angular 6 中的平均堆栈创建一个 Web 应用程序，但我在浏览器控制台上收到以下错误消息。

"拒绝加载字体''，因为它违反了以下内容 内容安全策略指令：“default-src 'self'”。注意 'font-src' 没有明确设置，所以 'default-src' 被用作 后备。”

代码：

 getUsers() 
    return this._http.get("/api/users")
      .pipe(map(result => this.result = result.json().data));
  

【问题讨论】：

Content security policy。不知道角度与它有什么关系。这是现代浏览器的新标准（阅读spec）

【参考方案1】：

内容安全策略是现代浏览器在加载远程资源时定义一组限制的一种方式。

来自 HTTP 协议的响应标头可以设置这些策略：

Content-Security-Policy 标头（官方）、X-Content-Security-Policy（受 Mozilla Firefox 和 IE10 支持）和 X-WebKit-CSP（受 Google Chrome 和 Safari 支持）HTTP 响应标头以及内容安全策略指令列表。 （来自seckit drupal module）

您可以为 DOM 中不同类型的元素设置不同的策略（例如 <img>、<script>、<object>、<embed>、<iframe> 等等...），以限制源自的请求从那个元素。

因此您需要将'self' 更改为以下之一：

'none' - 阻止任何来源的内容 'self' - 只允许来自您的域的内容 'unsafe-inline' - 允许特定的内联内容（注意，它由指令子集支持） 'unsafe-eval' - 允许一组默认限制的字符串到代码 API（由 script-src 指令支持）

允许使用通配符 (*)：

* - 从任何来源加载内容 *.example.com - 从 example.com 及其所有子域加载内容 example.com:* - 通过任何端口从 example.com 加载内容。 - 否则，它将使用您的网站默认端口

【参考方案2】：

将 'self' 和 data: 添加到 font-src 对我有用。

Content-Security-Policy: font-src 'self' data:;

【讨论】：

在页面的响应标题下

【参考方案3】：

font-src来自 MDN 的参考文档

Content-Security-Policy 标头由您的 api 设置。检查您的 api 响应的值。 根据错误，我认为您的字体是从与您的应用程序域不同的域加载的。除非您的 api 将该域列入白名单，否则您的浏览器将不会加载字体。

例子：

Content-Security-Policy: font-src https://example.com/