在Chrome扩展中使用FlutterFire遭遇CSP错误的解决求助

初始错误 #

部署后出现内联脚本CSP违规：

main.dart.js:36994 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-YBHx8OpTDOL4+BciDWDJCan2nXW4/AjhyYodJv5SvZg='), or a nonce ('nonce-...') is required to enable inline execution.

添加engine.js后的问题 #

尝试通过动态导入Firebase脚本的方式解决，添加代码如下：

window.ff_trigger_firebase_core = async (callback) => {
  callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js"));
};
window.ff_trigger_firebase_app_check = async (callback) => {
  callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-app-check.js"));
};
window.ff_trigger_firebase_remote_config = async (callback) => {
  callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-remote-config.js"));
};
window.ff_trigger_firebase_firestore = async (callback) => {
  callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-firestore.js"));
};

结果原有错误未解决，新增远程脚本加载违规：

engine2.js:22 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://www.gstatic.com/firebasejs/9.11.0/firebase-remote-config.js

Refused to load the script 'https://www.gstatic.com/firebasejs/9.11.0/firebase-firestore.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(此类错误还有很多)

修改manifest.jsonCSP后的问题 #

尝试修改CSP配置：

"content_security_policy": {
    "extension_pages": "script-src 'self' https://www.gstatic.com; object-src 'self'"
},

导致扩展完全无法加载，重启Chrome后自动卸载，提示：

Failed to load extension
File
~/StudioProjects/yilong_ma/build/web
Error
'content_security_policy.extension_pages': Insecure CSP value "https://www.gstatic.com" in directive 'script-src'.
Could not load manifest.

1. 正确配置符合Chrome扩展规则的CSP #

Chrome扩展的extension_pages CSP不允许直接放开整个域名，需要限定具体路径，同时用哈希放行特定内联脚本：

"content_security_policy": {
    "extension_pages": "script-src 'self' 'sha256-YBHx8OpTDOL4+BciDWDJCan2nXW4/AjhyYodJv5SvZg=' https://www.gstatic.com/firebasejs/; object-src 'self'; script-src-elem 'self' https://www.gstatic.com/firebasejs/;"
}

• 'sha256-YBHx8OpTDOL4+BciDWDJCan2nXW4/AjhyYodJv5SvZg='：直接用错误提示里的哈希值放行违规的内联脚本
• https://www.gstatic.com/firebasejs/：限定Firebase脚本的具体路径，避免被判定为不安全源
• script-src-elem：单独指定脚本元素的加载源，解决动态导入的权限问题

2. 优先打包本地Firebase代码（推荐） #

Chrome扩展更建议将第三方脚本打包到本地，而非远程加载：

• 直接通过pubspec.yaml引入Firebase的Flutter SDK
• 执行flutter build web时，将Firebase相关代码打包到本地main.dart.js中
• 彻底规避远程脚本的CSP限制，同时提升扩展加载速度

3. 确认使用Manifest V3 #

确保manifest.json的manifest_version为3，V2版本的CSP规则已被废弃，V3对权限管控更严格但适配性更强。

内容的提问来源于stack exchange，提问作者TSR