如何隔离firebase变量 避免被浏览器控制台访问引发安全问题

1. 解决全局firebase变量暴露问题 #

你用IIFE无效的核心原因是：如果通过全局Script标签引入Firebase SDK，SDK会主动将firebase对象挂载到window全局上，IIFE只能避免你自己的代码变量泄露，无法阻止外部SDK挂载全局变量。可以通过以下方式修复：

• 改用模块化方式引入Firebase：通过npm安装Firebase依赖，在业务代码中按需导入API，示例如下：

  // 仅在当前模块内可用，不会泄露到全局
  import { initializeApp } from 'firebase/app';
  import { getFirestore } from 'firebase/firestore';
  
  const firebaseApp = initializeApp(你的配置);
  const db = getFirestore(firebaseApp);
  

  模块化作用域下的变量默认不会挂载到全局，只要你不主动将firebase相关变量挂载到window上，控制台就无法直接访问。
• 如果必须使用CDN引入，可以将Script标签的type设置为module，配合Import Maps引入依赖，同样不会产生全局变量。
• 生产环境打包时开启代码混淆、变量名压缩，进一步降低变量被识别的概率。

2. 核心安全防护方案 #

注意：隐藏全局变量只能降低攻击的便利性，完全无法阻止恶意用户操作你的数据。前端本身不存在绝对的安全边界，就算你隐藏了所有全局变量，攻击者依然可以通过抓包获取你的Firebase配置，自行初始化SDK发起请求。你必须通过服务端规则做底层防护：

• 配置严格的Firebase安全规则：针对Firestore、实时数据库、云存储等服务，配置细粒度的权限规则，比如仅登录用户可读写自己的数据、写入的数据必须符合格式校验、非管理员无法删除数据等，所有请求会先经过安全规则校验，不符合要求的操作会被直接拒绝。
• 开启Firebase App Check：校验请求是否来自你授权的客户端应用，阻止第三方未授权的服务调用你的Firebase资源。
• 敏感操作迁移到云函数执行：涉及数据修改、权限校验的核心逻辑不要放在前端实现，改为通过Firebase云函数处理，前端仅触发云函数调用，所有校验逻辑在服务端执行。

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