您在哪里存储在JavaScript网络应用中使用的第三方API ApiKey？

Question

如何以及在何处存储您在JavaScript网络应用中使用的第三方API ApiKey（又名AppId，AppSecret，AppKey）？如果在获取网址中使用了它并且仍然在浏览器的“网络”标签中可见，我是否应该对它保密？

示例：在我的React应用程序中，我使用OpenWeatherMap服务。我需要在他们的网站上注册并获取apikey，然后使用URL请求数据：

http://api.openweathermap.org/data/2.5/weather?APPID=96547d41585ab16c48ee1evtm1bb1g8&q=London,uk

我上面的URL中的我的appid与我的帐户相关联，我可以使用此appid进行的请求数量有限。所以我想让这个appid对任何人都隐藏。有可能在React应用程序中这样做吗？

Answer 1

您可以观看here，Google向您说明保护API密钥的所有最佳做法。 希望对您有帮助。

Answer 2

有许多方法可以安全地存储API密钥和机密。其中一些可以让您使用Git存储库并加密敏感数据。其他工具则更为复杂，可以将敏感信息解密，作为部署工作流程的一部分。

最受欢迎的工具是（当然，您的选择将取决于您的口味以及所基于的用途）

1. git-remote-gcrypt （让我们对整个存储库进行加密。非常安全：））
2. git-secret （让我们在推送特定文件之前先对其进行加密）
3. BlackBox （与＃2大致相同，但也支持加密小字符串）
4. Heroku配置和Config变量（如果在Heroku上）（让我们通过config vars访问敏感信息，您可以在其中放置密钥）
5. Docker机密（允许您定义加密变量，并在运行时将其提供给特定服务。机密在传输和静止时均被加密。）

我认为＃5最好。就像我说的那样，这完全取决于您。

Answer 3

如果您使用create-react-app创建应用程序，则可以使用https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

中定义的多个.env文件结构。

Answer 4

一个常见的解决方案是让您的应用程序 user 为相关的第三方服务创建自己的API密钥。然后，用户可以将这些密钥提供给您的应用，例如，将它们存储在自己的个人资料中（在您的应用内）。

如果您想以自己的凭据为应用程序的用户提供对第三方服务的访问，唯一正确的安全选项是通过您自己的服务器代理请求，您可以在其中安全地存储API密钥不暴露它们。