0

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

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
Sebastian Dudas
  • 3
  • 1
  • 4

1 Answers1

0

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.

Chester
  • 1,081
  • 9
  • 18
  • Thanks! I'll edit my post with screenshots. Did you try to refresh any of components beside one that launches first on the demo? For example, if I navigate to /mypokedex manually, I will get the error, but if i navigate via sidemenu, app works flawlessly. – Sebastian Dudas Mar 06 '18 at 21:51
  • I meant to make this as a comment, not an answer, but I've updated my answer with some notes. – Chester Mar 06 '18 at 22:24
  • Wow, thanks! Your link did not directly solve my problem, but it helped me view the problem from different perspective. Long story short, the problem was with routing, I needed to add **{ useHash: true })** to my routing const, so it servers index.html. @Chester, thank you again! – Sebastian Dudas Mar 06 '18 at 22:44
  • I have a similar problem, but the { useHash: true } not resolved it. 'https://lkovari.github.io/kovariLAB' – L. Kvri Jun 03 '19 at 18:08