尝试加载 Firebase 时与 Electron 发生内容安全冲突答案

【问题标题】：Content Security conflictions with Electron when trying to load firebase尝试加载 Firebase 时与 Electron 发生内容安全冲突
【发布时间】：2021-05-30 01:50:50
【问题描述】：

我正在尝试将必要的库从 firebase 加载到电子项目中，目前标题如下所示：

    <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>

但是，当我尝试运行并测试它们是否正常工作时，我收到以下错误消息：

我对 Electron、JavaScript 和 Firebase 还很陌生，所以我不确定我哪里出错了。提前感谢您的帮助。

【问题讨论】：

如果您阅读错误日志，则无法加载 Firebase 脚本，因为您在文件的前几行中编写了 Content-Security-Policy 元标记。您是要添加它们吗？
@user482594 这些是我生成电子模板时默认添加的。但是，当我尝试删除它们时，它仍然拒绝工作（并给了我一些警告）。
也许，您可能希望将 firebase 安装为 npm 模块。 npmjs.com/package/…

标签： javascript html firebase electron content-security-policy

【解决方案1】：

您有两个 content-security-policy 元标记。最初您应该删除其中一个，除非您有某些特定原因需要重复的内容安全策略，因为任何内容都必须通过所有 CSP。然后你需要在 script-src 指令中添加www.gstatic.com。

还要注意作为响应标头插入的 content-security-policy，因为某些框架可能会将 CSP 作为标头插入。您可能还希望将元标记移动到响应标头，因为元标记不支持 CSP 的所有指令。

【讨论】：