API 密钥是否通过 get 请求公开？答案

【问题标题】：Is API key exposed through get request?API 密钥是否通过 get 请求公开？
【发布时间】：2021-06-29 22:12:26
【问题描述】：

我正在构建一个 Node/React 应用程序，其中我已将我的 API 密钥放在一个 .env 文件中，该文件位于我的 .gitignore 中。前端使用 Axios 和 UseEffect 钩子使用通过 process.env 提供的 API 密钥向 API 端点发出 get 请求。我理解为什么隐藏 API 密钥而不将该信息提交给 git 是一种很好的做法，但是我的问题是是否仍然需要做（或可以做）关于通过检查 chrome 开发人员中的请求暴露 API 密钥的事情工具？

//on component mount fetch the images
    useEffect(async ()=>{
        const results = await axios(
            `https://pixabay.com/api/?key=${process.env.PIXA_API_KEY}`
        );
    },[])

例如，如果用户在我的项目的浏览器中使用 chrome 工具，他们仍然可以在请求中看到我的 API 密钥。就我而言，这并不是什么大问题，因为这个特定的 API 是免费的，而且该项目仅供个人使用，但我想知道在可能使用付费 API 的商业项目中如何解决这个问题？是什么阻止我在其他人的应用上使用 chrome 开发工具并窃取他们的 API 密钥来提出我自己的请求？

【问题讨论】：

好的，首先“是”，它将在开发工具中可见，您可以阻止解密，因此您不应直接发送令牌，而是加密并发送密钥。
API Key 与 Front-end 结合起来没有多大意义。当您开发并向人们销售 API 时，您不会向他们提供前端（他们可以免费使用任何语言和库）并为他们提供用户特定的 API 密钥来跟踪滥用和/或向他们收费（生成于运行时并且不能驻留在文件中）。对于公共 API（可能只是 React 前端的后端），您不需要对用户进行身份验证，因此不需要 API 密钥。

标签： reactjs api security environment-variables

【解决方案1】：

这是一个非常好的观察。事实是，您的客户端代码中不能有任何秘密。再多的模糊、混淆甚至加密都无法阻止攻击者窃取您的秘密。客户端代码可供任何人阅读，因此需要这样处理。

如果涉及带有您不想公开的密钥的私有 API，则需要从服务器调用它们。所以流程看起来像这样：

【讨论】：