javascript 拒绝加载字体“<URL>”，因为它违反了以下内容安全策略指令 default-src ，因此 default-src 用作后备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50560054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
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
提问by Pramod
I am creating a web app using the mean stack in angular 6 but I am getting below error message on the browser console.
我正在使用 angular 6 中的平均堆栈创建一个 Web 应用程序，但我在浏览器控制台上收到以下错误消息。
"Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback."
“拒绝加载字体 '<URL>'，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，'font-src' 未明确设置，因此使用了 'default-src'作为后备。”
Code:
代码：
getUsers() {
return this._http.get("/api/users")
.pipe(map(result => this.result = result.json().data));
}
回答by harpreet kaur
Adding 'self' and data: to the font-src works for me.
将 'self' 和 data: 添加到 font-src 对我有用。
Content-Security-Policy: font-src 'self' data:;
回答by JonnieJS
Content security policy is a way for modern browsers, to define a set of restrictions when loading remote resources.
内容安全策略是现代浏览器在加载远程资源时定义一组限制的一种方式。
Response headers from the HTTP protocol can set those policies:
来自 HTTP 协议的响应头可以设置这些策略：
Content-Security-Policyheader (official),X-Content-Security-Policy(supported by Mozilla Firefox and IE10) andX-WebKit-CSP(supported by Google Chrome and Safari) HTTP response headers with the list of Content Security Policy directives. (from seckit drupal module)
Content-Security-Policy标头（官方）、X-Content-Security-Policy（受 Mozilla Firefox 和 IE10X-WebKit-CSP支持）和（受 Google Chrome 和 Safari 支持）带有内容安全策略指令列表的 HTTP 响应标头。（来自seckit drupal 模块）
You can set different policies to different types of elements in the DOM (e.g <img>, <script>, <object>, <embed>, <iframe>and so on...), to restrict requests that originates from that element.
您可以设置不同类型的DOM元素（例如不同的政策<img>，<script>，<object>，<embed>，<iframe>等...），以限制的请求，从该元素起源。
So you need to change 'self'to one of the following:
因此，您需要更改'self'为以下之一：
'none'- block content from any source'self'- allow content only from your domain'unsafe-inline'- allow specific inline content (note, that it is supported by a subset of directives)'unsafe-eval'- allow a set of string-to-code API which is restricted by default (supported by script-src directive)
'none'- 阻止任何来源的内容'self'- 仅允许来自您域的内容'unsafe-inline'- 允许特定的内联内容（注意，它由指令的子集支持）'unsafe-eval'- 允许一组默认限制的字符串到代码 API（由 script-src 指令支持）
Wildcards (*) are allowed:
允许使用通配符 (*)：
*- load content from any source*.example.com- load content from example.com and all its subdomainsexample.com:*- load content from example.com via any port. -- Otherwise, it will use your website default port
*- 从任何来源加载内容*.example.com- 从 example.com 及其所有子域加载内容example.com:*- 通过任何端口从 example.com 加载内容。——- 否则，它将使用您网站的默认端口
回答by Anu
font-srcreference doc from MDN
来自 MDN 的font-src参考文档
The Content-Security-Policy header is set by your api. Check your api response for its value. As per the error, I think your fonts are loaded from a different domain than your application domain. Unless your api whitelists that domain, your browser will not load the font.
Content-Security-Policy 标头由您的 api 设置。检查您的 api 响应的值。根据错误，我认为您的字体是从与应用程序域不同的域加载的。除非您的 api 将该域列入白名单，否则您的浏览器将不会加载该字体。
Example:
例子：
Content-Security-Policy: font-src https://example.com/
