Why is this simple app throwing this error?

Question

Having tried all that I could, finally I resort here for some expert advice.

This can't be a complex problem for someone like you to solve. Quite sure it's an easy tackle for you!

The error pooping on the screen is as follows

Following is the meta tag that the app has:

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

Tried to find the favicon.ico, but couldn't find any.

My head is spinning now!

Looking forward for your help!

Thanks a TON!

why are you using `default-src 'none';`?? cant you use `self`? — fatalcoder524, Oct 22 '20 at 05:43
Have you tried to add `http://* 'unsafe-inline'` after `img-src 'self'`? You can add also the following `default-src 'self' http://* 'unsafe-inline'` The final tag would look like: `` — juanmajmjr, Oct 22 '20 at 05:49
Definitely it could make a difference since full url for favicon.ico comes from http and that is blocked @Onthewaytosuccess — juanmajmjr, Oct 22 '20 at 07:07
@juanmajmjr Your one isn't working as well! It gives the same error — On the way to success, Oct 22 '20 at 07:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223440/discussion-between-on-the-way-to-success-and-juanmajmjr). — On the way to success, Oct 22 '20 at 08:14

score 1 · Answer 1 · answered Oct 22 '20 at 05:50

1

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

Seeing this code:

You have set default-src 'none' and overriding it with img-src 'self' data: https:.
But the protocol in use is http.

answered Oct 22 '20 at 05:50

fatalcoder524

1,428
1
7
16

I really didn't get what you said there. What do I need to replace now? – On the way to success Oct 22 '20 at 07:44
You mentioned `img-src 'self' data: https:` but the protocol you are using is `http` @Onthewaytosuccess Check this https://content-security-policy.com/ – fatalcoder524 Oct 22 '20 at 10:57
https://content-security-policy.com/img-src/ @Onthewaytosuccess – fatalcoder524 Oct 22 '20 at 11:07

granty · Accepted Answer · 2020-11-01T13:28:05.137

The CSP you shown does contain the img-src, so Chrome console warn means this CSP does not acts on the page, but on page does act some another CSP.

Looks like your app does issue a default CSP somewhere and this CSP does not contain img-src directive.

So you do have 2 CSPs at the same time, in this case acts more restrictive one.

Check the presence the second <meta http-equiv="Content-Security-Policy" tag (in the HTML code) or HTTP header Content Security Policy (in the dev tool).

Alternatively you could remove your:

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'">

and to see that the same warns still presence in the Chrome console because of second CSP.

Updated: after some researches it was found a real reason of /favicon blocking for the above case.

Why is this simple app throwing this error?

2 Answers2