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

Question

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

“拒绝加载字体 '<URL>'，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，未明确设置 'font-src'，因此使用了 'default-src'作为后备。”

代码：

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

Answer 1

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

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

Content-Security-Policy标头（官方）、X-Content-Security-Policy（由 Mozilla Firefox 和 IE10X-WebKit-CSP支持）和（由 Google Chrome 和 Safari 支持）带有内容安全策略指令列表的 HTTP 响应标头。（来自seckit drupal 模块）

您可以设置不同类型的DOM元素（例如不同的政策<img>，<script>，<object>，<embed>，<iframe>等...），以限制的请求，从该元素起源。

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

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

允许使用通配符 (*)：

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

Answer 2

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

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

Answer 3

来自 MDN 的font-src参考文档

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

例子：

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