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

Answer 1

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 2

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 3

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 4

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 5

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