Content Security Policy directive: "img-src data:" error

Question

I'm testing my Angular 5 app on github pages, and whenever I reload a page other than index.html, I get this error:

Refused to load the image 'https://sebamed.github.io/favicon.ico' because it violates the following Content Security Policy directive: "img-src data:".

Also, when I try to access the '404' error page, I get the same message.

Now, I tried several solutions on this, but none of them seems to do a job. I even added this to my index.html:

<meta http-equiv="Content-Security-Policy" content="img-src * 'self' data: https:">

but nothing happens.

I have changed the default Angular 5 favicon.ico with my own, put it inside my assets folder, and set a relative path for it in index.html (browser recognizes it successfully!):

<link rel="icon" type="image/x-icon" href="/pokedex/assets/png/favicon.ico">

Is there any solution for this problem? I've never had it before...

Link of my app is here

EDIT:

Screenshot of my app after manually navigating to my-pokedex component, stored in /mypokedex route! (when I navigate to my-pokedex via app sidebar, it works with no issues!):

Screenshot

Answer 1

Good job on the page. I was looking at the demo, and I'm not seeing anything wrong with the icons and I'm not getting any console error messages. Are you still seeing your issue? If you are, a screenshot of the error message is always good.

Edit 1: So the issue you're getting isn't necessarily the Content Security Policy directive, but that you're getting a 404 when you're going to a URL directly. That makes a bit more sense. This StackOverflow post about routing Angular-routing, direct URL navigation might help shed some light as to what you're experiencing.