Refused to load the image because it violates the following Content Security Policy directive (favicon)

Question

When I start the server I get the following error:

Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

I haven't changed the favicon or anything, it's all by default.

Answer 1

It seems like it can be anything.

A method prototyped without curly braces for me.

Answer 2

For me the error was coming from module declarations at angular.

Edit declarations and exports parts at @NgModule fixed the error.

Answer 3

For me the error was comming as I had the below line commented in server.js (Express)

app.use(express.static('../dist/alpha/'));

I don't know why but I uncommented it and everything started working for me.

Answer 4

I found another reason that you might get such an error:

In my case, it had nothing to do with the favicon loading, or the CSP header. Rather the sequence in which the express server was started up. There were some asynchronous calls leading up to the express.listen command. This meant that express started listening before it was finished setting up. The net effect of this was, that the CSP header DEFAULT(because my settings not loaded yet) would not allow the favicon to load, in addition to the route path was not being resolved correctly (again, not loaded yet).

Used some .then promise chaining to ensure the correct sequencing of the express startup, and the error vanished - magic :)

Hope this can help someone else with similar issues.

Answer 5

In my case, I was running Angular app in express server and misspelled folder in which website files were located. So apparently, there's no specific answer to this problem.

Answer 6

As others told already, the error is only masking the real problem.

For me it was the fact that my global Angular CLI version was lower than the one of my project.
Running npm i -g @angular/cli@<desired version> solved the problem and the real error could be displayed and fixed.

Answer 7

My issue turned out to be that I had done a mass update (we know this is wrong, why do we always do this?) and another library, fuse.js had major breaking changes and broke my app. ng build went fine and ng serve/ionic serve was hiding the real culprit so it took quite a bit of trial and error to figure out.

Do yourself a favor and don't mass update your package.json

Answer 8

I had the same problem under Linux Mint with Angular 9. Our project worked perfectly on MAC OS X and Windows. After assembling a new desktop and installing Linux I got the same error. All options like upgrade node version, angular version, delete node_modules did not solve the problem. On my machine, the problem was:

!!! The path to the project contained special characters like: %20.

That's because we use Microsoft TFS and the repository name contains spaces, which get translated into %20 and other characters... So if you are frustrated like me, check out your project path, maybe changing your path will fix the issue

Answer 9

You need to check properly in your terminal logs.I was having an error of import in my routing file and correcting that helped me solve this error. I hope it helps someone.

Answer 10

For me, the node js backend was using the same port 4200, change the node or serve angular on different ports and it should work.

Answer 11

I had the same issue tried all the answers I could find online and some that were about "resource" as well.

For Example:

angular/angular - Angular 8 upgradation - Error on Content Security Policy directive #30802

Refused to load the font 'data:font/woff…'it violates the following Content Security Policy directive: “default-src 'self'”. Note that 'font-src'

Unfortunately, I ignored an error in the command-line when I started my server ng servethat was about the Global Angular version I use (8.3.5) being newer than the local Angular version (8.0.6) in my project.

I upgraded my local Angular version using ng update @angular/cli --force and after upgrade the real reason to the error was revealed, a stupid mistake I made in the app.component.html file I made a type mistake: I closed a <td> with </tc> (instead of </td>).

My conclusion: Next time when I get this kind of mistakes (I am a developer, so I believe it will happen again) - I need to check my recent changes first!

Hope this helps.

Answer 12

I got this working by running ng update @angular/cli --force

my dependencies below

"dependencies": {
 "@angular/animations": "~8.2.0-next.2",
 "@angular/cdk": "~8.1.1",
 "@angular/common": "~8.2.0-next.2",
 "@angular/compiler": "~8.2.0-next.2",
 "@angular/core": "~8.2.0-next.2",
 "@angular/flex-layout": "^8.0.0-beta.26",
 "@angular/forms": "~8.2.0-next.2",
 "@angular/material": "^8.1.1",
 "@angular/platform-browser": "~8.2.0-next.2",
 "@angular/platform-browser-dynamic": "~8.2.0-next.2",
 "@angular/router": "~8.2.0-next.2",
 "angularfire2": "^5.2.1",
 "core-js": "^2.5.4",
 "firebase": "^6.2.3",
 "hammerjs": "^2.0.8",
 "rxjs": "~6.5.2",
 "tslib": "^1.9.0",
 "zone.js": "~0.9.1"
},
 "devDependencies": {
 "@angular-devkit/build-angular": "~0.801.2",
 "@angular/cli": "^8.1.2",
 "@angular/compiler-cli": "~8.2.0-next.2",
 "@angular/language-service": "~8.2.0-next.2",
 "@types/jasmine": "~2.8.8",
 "@types/jasminewd2": "~2.0.3",
 "@types/node": "~8.9.4",
 "codelyzer": "^5.0.1",
 "jasmine-core": "~2.99.1",
 "jasmine-spec-reporter": "~4.2.1",
 "karma": "~4.0.0",
 "karma-chrome-launcher": "~2.2.0",
 "karma-coverage-istanbul-reporter": "~2.0.1",
 "karma-jasmine": "~1.1.2",
 "karma-jasmine-html-reporter": "^0.2.2",
 "protractor": "~5.4.0",
 "ts-node": "~7.0.0",
 "tslint": "~5.11.0",
 "typescript": "3.4.5"
}

Answer 13

I came here to find an answer to the same question but I solved it myself. I had an angular compilation error in my app (I hadn't run ng build) and the error above was masking this problem. I had missed some properties on an object I was using in a resolver.

I'm running Angular ~7.x