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

Question

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

  

“拒绝加载字体'＆lt;＆gt;＆gt;'因为它违反了以下规定   内容安全策略指令：“default-src'self'”。注意   'font-src'未明确设置，因此'default-src'用作a   回退“。

代码：

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

Answer 1

在font-src中添加“自我”和数据：对我有用。

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

Answer 2

  来自MDN的

font-src参考文档

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

示例：

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

Answer 3

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

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加载内容。 -
• 否则，它将使用您的网站默认端口