CODEWITHSUNDEEP
javascriptangularjsmean
Pramod
Pramod

Reputation: 434

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

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

Upvotes: 11

Views: 37861

Answers (4)

Franklin Ukaegbu
Franklin Ukaegbu

Reputation: 87

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

Upvotes: -1

harpreet kaur
harpreet kaur

Reputation: 101

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

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

Upvotes: 10

JohnnyJS
JohnnyJS

Reputation: 1472

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.

Screenshot of request with policy

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

Upvotes: 10

Anu
Anu

Reputation: 1079

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/

Upvotes: 0

Related Questions