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));
  }

Throwaway

Content security policy. not sure how angular has something to do with it. this is a new standard for modern browsers (read the spec) – Sheaff

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

Sheaff

Answer 2

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

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

Henrieta

Under Response Headers for the page – Henrieta

Answer 3

font-src reference doc from MDN

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.

Example:

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

Oxytetracycline

Answer 4

just close all browser, clear cache and restart VSC or your code editor. Ir worked fro me.

Indue