Firebase 实时数据库内容安全策略错误 - script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'

Question

我有一个使用 firebase 实时数据库和身份验证的 Chrome 扩展。在chrome扩展中，一个用户有多个配置文件，这些配置文件存储在实时数据库中。我在检索用户帐户下的配置文件时遇到问题。我在控制台中随机看到此错误（一开始工作得很好，一段时间后停止工作），我必须卸载并重新加载 chrome 扩展才能再次工作。

我收到以下错误：

Refused to load the script '(firebase link)' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我相信问题源于我的manifest.json？这是我的manifest.json 文件

{
    "manifest_version": 3,
    "name": "dummy text",
    "version": "1.0",
    "description": "dummy text",
    "background": {
        "service_worker": "background.js",
        "service-worker":"firebase.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": [
        "storage",
        "activeTab",
        "webRequest",
        "scripting",
        "tabs"
    ],
    "content_scripts": [
        {
            "matches": [[website], [website], "https://www.gstatic.com/firebasejs/*"],
            "js": ["contentScript.js"],
            "css": ["styles.css"]
        }
    ]
}

非常感谢任何帮助，我已经被困在这个问题上有一段时间了。非常感谢！

Answer 1

您遇到的错误与 Chrome 扩展程序的内容安全策略 (CSP) 有关。 CSP 是一组规则，规定您的扩展可以加载和执行哪些资源。您看到的错误消息表明正在从违反 CSP 规则的源加载脚本。

在您的manifest.json 文件中，您应该指定允许您的扩展程序访问 Firebase 资源的 CSP 规则。这是您的

manifest.json

的修改版本，其中包含必要的 CSP 规则：

{
    "manifest_version": 3,
    "name": "dummy text",
    "version": "1.0",
    "description": "dummy text",
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": [
        "storage",
        "activeTab",
        "webRequest",
        "scripting",
        "tabs",
        "https://*.firebaseio.com/"  // Add Firebase Realtime Database permission
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],  // Match all URLs
            "js": ["contentScript.js"],
            "css": ["styles.css"]
        }
    ],
    "web_accessible_resources": [
        "firebase.js"  // Allow the extension to access this resource
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"  // Modify the CSP as needed
}