如何隐藏存储在 JavaScript 中的 API 密钥？答案

【问题标题】：How can I hide my API key stored within JavaScript?如何隐藏存储在 JavaScript 中的 API 密钥？
【发布时间】：2021-12-10 05:56:12
【问题描述】：

我希望我的 API 密钥被隐藏而不是公开。

我可以想出几种方法来传输 API 密钥，通过document.getelementbyId、.queryselector、input - hidden;，但 API 密钥在 HTML 页面上仍然可见。

什么是最好的解决方案？

【问题讨论】：

如果你坚持从用户的浏览器调用 API 没有解决办法，无论你如何混淆密钥，网络检查器都会显示所有内容。
HTML 是在客户端运行的代码，永远无法完全隐藏。你需要的是一个合适的认证机制，比如 JWT

标签： javascript c# asp.net asp.net-core

【解决方案1】：

这里要注意的重要因素是任何 JavaScript 都在客户端机器上运行。

这是他们的机器，他们完全控制在上面运行的东西。

你可以缩小，你可以混淆，你可以尝试所有可能的方法，但 API 密钥最终必须以某种方式在客户端的浏览器中重新制定。而且由于客户端的浏览器是他们的，因此您基本上无法控制他们可以使用 API 密钥做什么。此外，客户端浏览器中的网络选项卡将显示 Web 应用程序发出的所有请求，包括使用 API 密钥发送的请求。

如果它是需要 API 密钥的第三方外部 API，解决方案是拥有一个端点来为您进行身份验证，充当前端应用程序和 API 之间的接口。

如果这是您自己的 API，并且您需要公开不应公开的 API 端点，您将需要一种对用户进行身份验证的方法。从JSON web tokens 开始将是一个很好的开始，但如何引入 JWT 将很大程度上取决于您的应用程序。

【讨论】：

【解决方案2】：

将其作为变量放入.env文件中，并将其导出到您需要的文件中，.env文件并不总是显示给浏览器。

示例；创建一个文件api.env 然后在文件中：

const key = "your API KEY goes here"

然后将其导出 (key) 到您需要的文件中。

.env 文件永远不会显示在前端

【讨论】：