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

Question

I am creating a web app using the mean stack in angular 6 but I am getting below error message on the browser console.

"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."

Code:

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

Answer 1

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:

Content-Security-Policy header (official), X-Content-Security-Policy (supported by Mozilla Firefox and IE10) and X-WebKit-CSP (supported by Google Chrome and Safari) HTTP response headers with the list of Content Security Policy directives. (from seckit drupal module)

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.

So you need to change 'self' to one of the following:

• '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)

Wildcards (*) are allowed:

• * - load content from any source
• *.example.com - load content from example.com and all its subdomains
• example.com:* - load content from example.com via any port. -
• Otherwise, it will use your website default port

Answer 2

Adding 'self' and data: to the font-src works for me.

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