title: Content security policy blocking all firebase features
body: <p>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</p>
  <pre><code>&lt;meta 
        http-equiv=&quot;Content-Security-Policy&quot; 
        content=&quot;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 ; &quot;
      /&gt;
  </code></pre>
  <p>I keep getting the following errors whenever I try to use any of the firebase features</p>
  <blockquote>
  <p>Refused to connect to 'https://securetoken.googleapis.com/v1/token?key=AIzaSyCoZVOHUdschTajsOfqttGL2QLlGUhLIOg' because it violates the following Content Security Policy directive: &quot;default-src 'self'&quot;. Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.</p>
  </blockquote>
  <blockquote>
  <p>Refused to load the image 'https://res.cloudinary.com/iamxxx777/image/upload/v1638485595/mvghlsnx3vsmd1sfqjry.jpg' because it violates the following Content Security Policy directive: &quot;img-src 'self' data:&quot;.</p>
  </blockquote>
  <p>Any solutions please?</p>