2

I am attempting to load an avatar image in a React app that is being served up from a NodeJS/Express backend.

I have my content-security policy set as:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">

To be able to access the gravatar image.

However, when I run the React app in production mode, I get the following error in the console:

Refused to load the image 'https://s.gravatar.com/avatar/a57b7e3be28e9bf9b245a409b4666ee3?s=200&r=pg&d=mm' because it violates the following Content Security Policy directive: "img-src 'self' data:".

Doing a View Source on the page clearly shows that I the img-src policy is correctly set:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">

I have tried this in both Chrome and Firefox and I received the same issue where the image is getting blocked.

Please let me know what I may be doing wrong.

rhaq
  • 33
  • 2

1 Answers1

0

I realized my mistake! I was using helmet in my NodeJS backend which was overriding the CSP specified on the front-end side.

I did not think it would have an effect on the front-end but seems like it takes precedence.

Hopefully that saves someone else some time in their investigation.

rhaq
  • 33
  • 2