在反应应用程序中保存 api 密钥的真正位置/方式是啥？

Posted 2023-02-22

【中文标题】在反应应用程序中保存 api 密钥的真正位置/方式是啥？

【英文标题】：What is the true place/way to save api keys in react app?在反应应用程序中保存 api 密钥的真正位置/方式是什么？

【发布时间】：2020-04-28 02:00:06

【问题描述】：

我正在团队中处理一个 React 项目。我们正在使用一些第三方服务，这些服务需要 api 密钥。现在我们将这些密钥存储在代码中。据我所知，这既不好又危险。

I tried to find some recommendations in that regard。我现在看到的解决这个问题的所有方法都是：

创建.env 文件并将所有密钥存储在那里（但在这种情况下，我需要与团队的其他成员共享我的密钥） 或将所有密钥移至服务器并始终调用服务器以获取所需信息（但在这种情况下，我不知道如何使用需要密钥的外部组件，例如谷歌地图/地点/绘画等）。

您在团队中使用哪种方式，为什么？我想了解什么是对我来说最好的解决方案。 谢谢！

【问题讨论】：

这取决于按键。如果它是 public key 那么没关系，你可以在面向公众的东西中使用它（因为这毕竟是 public 密钥的想法），但如果它是 PRIVATE 键，那么您绝对 需要 将这些服务器端作为环境变量，并通过调用您自己的 API 来利用它们。你不能将这些嵌入到前端应用程序中，因为这些键可以让人们做邪恶的事情。关于与团队共享它们，如果它们是私有环境变量，那么您可以与他们共享，而不是与公众共享。

那些“外部”组件不是。它们与所有其他组件在同一页面中运行。它们以相同的方式接收属性 - 它们可以是硬编码的，它们可以是组件属性的一部分，或者您可以在每次调用中检索它们并将它们传递给下游。它们可以加载一次并存储在商店中。

作为the answers to this question explain 将密钥放入.env 是不够的。这些值包含在构建中，因此您将与整个世界共享该密钥，而不仅仅是您的团队

您已经链接到具有实际答案的文章。 环境变量无论如何都会发送给客户端。它们可以直接从源中查看。从服务器请求密钥更安全但有人可以使用开发工具中的“网络”选项卡检查往返。您发布的链接解释说 safe 选项是在服务器端进行调用并将输出发送到客户端

@IvanBanha 我会的。想象一下，您有自己的 node.js 服务器，它将存储所有密钥。您可以从此服务器调用外部资源并从它们那里获取响应。您应该在自己的服务器上编写多个端点以从前端触发它，然后您将拥有所有数据而没有安全风险

【参考方案1】：

您无法真正隐藏用于客户端 API（例如 javascript API 及其服务）的 API 密钥。保护 API 密钥的正确方法是添加 API 密钥限制。

在API Key Best Practices 上查看 Google 指南。您可能还想看看this answer。

希望这会有所帮助！