CODEWITHSUNDEEP
javascripthtmlfirebaseelectroncontent-security-policy
PressAZ5
PressAZ5

Reputation: 17

Content Security conflictions with Electron when trying to load firebase

I am trying to load in the necessary libraries from firebase into an electron project, currently the header looks like this:

    <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com ">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <link rel='stylesheet' type='text/css' href="./css/index-style.css">
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script>
    <!--Analytics-->
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
    <!--Authentication-->
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script>
    <!--Firestore-->
    <!--<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-performance.js"></script>
    <!--Performance Monitoring-->-->
    <!--<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.js"></script>
    <!--Cloud Messaging-->-->

    <script>
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        var firebaseConfig = {
            apiKey: "AIzaSyASwpwU4gScouDb52SgtITzJGlhVlUaAeM",
            authDomain: "bindr-b1182.firebaseapp.com",
            projectId: "bindr-b1182",
            storageBucket: "bindr-b1182.appspot.com",
            messagingSenderId: "834172641970",
            appId: "1:834172641970:web:9ff63deccdc2ac41b7dfab",
            measurementId: "G-26JDS2433R"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
    </script>

    <script src="../../src/model/database/dbManager.js"></script>
</head>

However, when I try and run and test if they're working, I get the following error messages: Various error messages recieved

I'm quite new to Electron, JavaScript, and Firebase, so I'm not sure where I'm going wrong here. Thank you in advance for your help.

Upvotes: 0

Views: 595

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3465

You have two content-security-policy meta tags. Initially you should remove one of them unless you have some specific reason for having a duplicate content-security-policy, as any content must pass all CSPs. Then you need to add www.gstatic.com into the script-src directive.

Also watch out for content-security-policy inserted as a response header as some frameworks may insert CSP as a header. You may also want to move your meta tag to response headers as meta tags don't support all directives of CSP.

Upvotes: 1

Related Questions