8

我正在使用角度 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));
  }
4

3 回答 3

8

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

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

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

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

带有策略的请求的屏幕截图

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

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

允许使用通配符 (*)：

  • *- 从任何来源加载内容
  • *.example.com- 从 example.com 及其所有子域加载内容
  • example.com:*- 通过任何端口从 example.com 加载内容。-
  • 否则，它将使用您的网站默认端口
于 2018-05-28T06:36:12.230 回答
5

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

Content-Security-Policy: font-src 'self' data:;
于 2019-08-05T05:26:57.143 回答
0

来自 MDN的 font-src参考文档

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

例子：

Content-Security-Policy: font-src https://example.com/
于 2018-05-28T06:18:13.220 回答