如何在React应用中保护Firebase凭证？

首先得明确一个关键事实：Firebase提供的客户端配置信息（包括apiKey、authDomain、projectId等）本身就是设计为公开的，这些不属于需要隐藏的敏感密钥。Firebase的安全机制不是靠隐藏这些配置，而是通过安全规则和用户身份验证来限制资源访问的——就算用户拿到这些配置，没有正确的权限也无法随意操作你的Firebase资源。

那如果是真正敏感的密钥（比如Firebase Admin SDK的私钥、数据库的管理员密钥），绝对不能放在前端环境变量里，必须按以下方式处理：

• 使用Firebase Cloud Functions：把需要敏感权限的操作（比如批量修改数据、访问敏感资源）封装成云函数，前端只需要调用云函数的API接口，不需要直接接触敏感密钥。
• 自建后端服务：如果有自己的服务器，把敏感密钥存在服务器的环境变量中，前端通过调用服务器的接口来间接操作Firebase，服务器作为中间层处理权限验证和敏感操作。

对于客户端配置，即使按React规范使用REACT_APP_前缀的环境变量（Create React App会自动注入这类变量到构建代码），构建后这些配置还是会出现在源码里，但这是正常现象，不需要刻意隐藏——你要做的是通过以下方式加固安全：

• 配置严格的Firebase安全规则：比如Firestore规则只允许认证用户读写自己的数据，Storage规则限制文件的访问权限，Realtime Database规则设置角色权限等。
• 启用用户身份验证：要求用户登录后才能访问敏感资源，结合安全规则进一步限制操作范围。

内容的提问来源于stack exchange，提问作者U. Watt