Content Security Policy Firebase

Question

I have a problem with CSP and Firebase. In my index.html I've included the following:

<meta http-equiv="Content-Security-Policy"
    content="style-src 'self'; script-src 'self' https://cdn.firebase.com https://www.gstatic.com;">

These scripts are loaded from other domain:

https://www.gstatic.com/firebasejs/4.0.0/firebase.js
https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js

I'm still getting some errors in the console.

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src http://server https://cdn.firebase.com https://www.gstatic.com"). Source: call to eval() or related function blocked by CSP.

Content Security Policy: The page's settings blocked the loading of a resource at self ("style-src http://server"). Source: @charset "UTF-8";[ng:cloak],[ng-cloak],....

Can you help please?

Answer 1

I had the same Problem for maybe 5 hours now. Now after alot of try and error I ended up using

<meta http-equiv="Content-Security-Policy" content="
    connect-src * 'self';
    default-src 'self';
    script-src 'self' https://cdn.firebase.com https://*.firebaseio.com 
    https://www.gstatic.com/gtag/ 
    https://www.gstatic.com/firebasejs/;
    object-src 'self';
    style-src 'self' 'unsafe-inline';
    img-src 'self' data:;
    font-src 'self' https://fonts.gstatic.com;
    frame-src 'self' https://*.firebaseio.com;
">

Now it works. Another Person wrote in another post that doing connect-src * 'self'; was the solution for his problem. I used that and in combinatio with ChatGTP I go that solution. I hope this will help you