在 React 应用程序中保护 Firebase API 密钥使其无法公开访问的最佳方法是什么？

Question

我目前有一个使用 Firebase 身份验证的 React 应用程序，并使用 Firestore 作为数据库。

我目前使用亚马逊的 Amplify 服务部署了该应用程序。我的 Firebase API 密钥，包括数据库 URL 和 firebase 应用程序 ID，都作为环境变量添加到 AWS 控制台中。

当我检查公共包时，我可以看到所有 API 密钥都是公共的。

我的问题是：

• 这听起来对吗？
• 是否有处理这种情况的最佳实践？
• 我是否需要构建一个后端来处理这个问题？

Answer 1

您的 API 密钥、数据库 URL、应用程序 ID 等都是公开的。

根据firebase 文档：

内容被视为公开内容，包括您特定于平台的 ID（在 Firebase 控制台设置工作流程中输入）和特定于您的 Firebase 项目的值，例如您的 API 密钥、实时数据库网址和存储分区名称。鉴于此，请使用安全规则来保护实时数据库、Cloud Firestore 和 Cloud Storage 中的数据和文件。

您旨在确保与 firebase 的连接安全的方法是使用安全规则。您可以添加自定义规则以确保您的数据库安全。

例如：您可以确保只有 userId 12345 有权创建、读取、更新和删除 userId12345 的记录。