如何隐藏存储在JavaScript中的API密钥，避免其被公开暴露？

核心前提：所有放在前端侧（浏览器端）的API密钥，无论用什么方式隐藏，都不可能绝对安全。用户只要打开开发者工具查看源码、抓包，总能找到密钥内容，你提到的通过document.getElementById、querySelector读取hidden input等方式完全起不到防护作用。

这是唯一能彻底避免API密钥暴露的方案，逻辑是把密钥完全保存在不会公开的服务端：

• 前端放弃直接调用目标第三方API，所有相关请求先发送到你自己可控的后端服务
• 后端从服务端环境变量/私有配置中读取API密钥，拼接进请求后转发给第三方API
• 后端拿到第三方的返回结果后，再回传给前端
• 额外收益：你可以在后端层自由添加请求频率限制、参数校验、权限控制、额度预警等能力，避免密钥泄露或恶意调用带来的损失

如果暂时没有搭建后端服务的条件，可以用以下方式降低泄露概率：

• 在云服务商/API提供方的后台为该密钥配置严格的调用限制，包括仅允许绑定你的域名的请求、设置单日调用额度上限、IP白名单等，即使密钥泄露也能快速止损
• 通过构建工具的环境变量能力注入密钥，不要将密钥硬编码在代码仓库中，打包时再替换对应变量

注意：以上临时方案都不能完全避免密钥泄露，只要有请求从前端发出，密钥就有被拦截获取的可能，有条件时优先选用后端代理方案。

内容的提问来源于stack exchange，提问作者Adam