1

My firebase authentication is working fine in development but the errors started after it was deployed to heroku. It is a react app with an express backend. My index.html has the following meta tag

<meta 
      http-equiv="Content-Security-Policy" 
      content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.firebase.com https://*.firebaseio.com https://*.firebaseio.com; object-src 'self'; connect-src 'self' 'unsafe-inline' 'unsafe-eval' https://googleapis.com https://*.googleapis.com ; "
    />

I keep getting the following errors whenever I try to use any of the firebase features

Refused to connect to 'https://securetoken.googleapis.com/v1/token?key=AIzaSyCoZVOHUdschTajsOfqttGL2QLlGUhLIOg' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the image 'https://res.cloudinary.com/iamxxx777/image/upload/v1638485595/mvghlsnx3vsmd1sfqjry.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data:".

Any solutions please?

Hope Tomiwa
  • 11
  • 2
  • Duplicate of [this question](https://stackoverflow.com/questions/69811800/how-to-fix-the-content-security-policy-on-my-heroku-deployed-app). You have 2 CSPs published at the same time - via meta tag and via HTTP header. That's why you see: *because it violates the following Content Security Policy directive: **"default-src 'self'**"* while your CSP in meta does not have a `default-src` directive. You should deliver the CSP either through the meta tag or through the header, but not both at the same time. – granty Dec 08 '21 at 15:05
  • Thanks for the observation. How do i deliver the CSP via the header? – Hope Tomiwa Dec 09 '21 at 16:53
  • Thanks, i figured it out, i had a third-party package interfering with the CSP – Hope Tomiwa Dec 09 '21 at 17:47

0 Answers0