create-react-app issue: Refused to load the image '' because it violates the following Content Security Policy directive:

Question

I am attempting to deploy a react app to Heroku. I have a NodeJs/Express API and it is serving my app created with create-react-app.

I am trying to display images in an tag from an external API (https://www.thecocktaildb.com) on my site and I continue to receive the following error in production:

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:".

I have tried to get around this using many variations of the following code snippet in my public/index.html file but nothing has worked so far.

<meta
    http-equiv="Content-Security-Policy"
    content="img-src 'self' https://www.thecocktaildb.com data:;"
/>

I have run out of things to try and cannot find a solution anywhere. Please help.

score 0 · Answer 1 · answered Aug 25 '20 at 04:29

0

https://stackoverflow.com/a/40360666/11624647

try add in your tag

img-src * 'self' data: https:

code:

<meta http-equiv="Content-Security-Policy" content="default-src *;
   img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *">

answered Aug 25 '20 at 04:29

Balaji

9,657
5
47
47

Sadly this did not work. I received ```Refused to load the image '' because it violates the following Content Security Policy directive: "img-src 'self' data:".``` Could create-react-app be configuring this somewhere else? – David Aug 25 '20 at 05:00
ensure cors enabled in https://www.thecocktaildb.com that particular website allowed to access third parties – Balaji Aug 25 '20 at 05:03

create-react-app issue: Refused to load the image '' because it violates the following Content Security Policy directive:

1 Answers1