在 React 中处理 API KEY 的方法?

Ways of handling API KEYs in React?

阅读大量关于人们如何处理 api 键的帖子和文章。我认为有些人可以安全地通过节点服务器获取 api 密钥,有些人将其存储在 .env 文件中。

我读过的示例帖子

  1. https://www.rockyourcode.com/secret-keys-in-react/
  2. https://github.com/react-boilerplate/react-boilerplate/issues/1744#issuecomment-303112505

我的情况:

目前我将 API KEY 存储在 .env 文件中,因为我在 React 中 uglifying 我的代码。即使通过 Inspect Element 也无法读取这些文件,但现在 我的所有 api 密钥都以可读格式公开

我的用例:

我的网站不需要登录,因此不需要身份验证。基本上它是 API 火力分析的关键。我认为在这里创建一个节点服务器来获取 api 密钥没有意义? (同样,我不需要身份验证)

如何更好地处理 API KEY?

根据这篇文章,我认为公开 Firebase 密钥不会构成安全威胁:https://medium.com/@paulbreslin/is-it-safe-to-expose-your-firebase-api-key-to-the-public-7e5bd01e637b

GCP 通常允许您restrict api keys by domain。这可能是保护您的配置并防止其他人将请求欺骗为您的项目的一种方法。

然而,在任何其他情况下,我不会在客户端代码中公开 api 密钥,而是使用中间服务器或云功能来代替它。