reactjs - 如何保护 Firebase 托管中的第三方 API key ？

Question

我在我的reactjs-firestore项目中使用不同的第三方API key 。但我找不到一种方法来保护它们在 firebase 托管中的安全。如何在 firebase 托管中隐藏这些 API key ？

例如，在 Netlify 托管服务中，它们提供了可用于保护 API key 的环境变量功能。

也就是说，我可以将 API key 存储在 netlify 的变量中，然后从那里检索它并确保其安全。

但是在 firebase 中我该怎么做？

我似乎找不到类似的设置，可以将 key 存储为托管服务中的环境变量。

如果没有这样的功能，是否有其他方法来保护这些 API key ？

对于 firebase API key ， 我已经阅读了一些答案并了解 firebase API key 不会被隐藏。

是否至少有某种方法可以将这些 Firebase API key 保护到至少一个安全 URL？ (我知道编写安全规则是最好的方法，但我也在尝试寻找其他选择)。

我似乎找不到一种方法来保护 Firebase 项目 API key 使用到一个安全 URL。

我尝试寻找保护 API key 的方法，但没有成功。

下面是我如何在reactjs代码中检索数据

axios.post(`https://data.retrieval.com/1/data?key=API_KEY`,  data)

我试图在生产代码中隐藏 API_KEY

我想保护我的托管网站中的第三方 API key 。 并且还将我的 firebase 项目 API key 限制为仅一个安全 URL。 我现在无法做到这一点。 有什么建议或解决方案吗？

感谢您尝试提供帮助。 感谢您抽出时间

Answer 1

如果您在客户端代码中使用 API key ，恶意用户总是有可能找到该 key 并滥用它。防止这种情况的唯一方法是不在客户端代码中使用 API key ，或者拥有可以基于其他内容保护访问的后端系统(例如 Firebase's server-side security rules )。

由于您的后端系统可能没有这样的安全模型，因此您通常必须将其 API 包装在您自己的中间件中，该中间件托管在受信任的环境中，例如您控制的服务器或 Cloud Functions。然后，您可以确保对 API 的所有访问均已获得授权，例如通过设置您自己的安全系统。