您将在 javascript Web 应用程序中使用的第三方 API ApiKey 存储在哪里?

IT技术 javascript reactjs frontend api-key app-id
2021-05-03 06:37:27

您如何以及在哪里存储您在 javascript 网络应用程序中使用的第三方 API ApiKey(又名 AppId、AppSecret、AppKey)?如果它用于获取 URL 并且无论如何在浏览器网络选项卡中可见,我是否应该注意对公众保密?

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

http://api.openweathermap.org/data/2.5/weather?APPID=96547d41585ab16c48ee1evtm1bb1g8&q=英国伦敦

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

3个回答

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

如果您想以您自己的凭据向您的应用程序用户提供对第三方服务的访问权限,唯一适当安全的选择是通过您自己的服务器代理请求,您可以在其中安全地存储 API 密钥而不会暴露它们.

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

最受欢迎的工具是(当然,您的选择取决于您的品味以及您正在构建的内容和目的)

  1. git-remote-gcrypt(让你加密整个 repo。所以非常安全:))
  2. git-secret(让你在推送之前在本地加密特定文件)
  3. BlackBox(或多或少与#2 相同,但也支持加密小字符串)
  4. Heroku 配置和配置变量(如果在 Heroku 上)(让您通过配置变量访问敏感信息,这是您放置密钥的地方)
  5. Docker Secrets(允许您定义加密变量并使它们在运行时可用于特定服务。秘密在传输期间和静止期间都被加密。)

在我看来,#5 是最好的。但就像我说的,这完全取决于你。

如果您使用 create-react-app 创建您的应用程序,您可以使用https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/ 中定义的多个 .env 文件结构模板/README.md#adding-custom-environment-variables