如何在HTML中隐藏外链JavaScript文件 避免私有API密钥泄露

核心结论 #

不存在任何可以完全隐藏前端JavaScript文件、避免私有密钥泄露的方案。所有发送到浏览器端的代码、资源都可以被用户获取到，无论是直接写在页面里的代码，还是通过script标签引入的独立JS文件，哪怕做了混淆、加密，都只能提高获取门槛，无法从根本上阻止密钥被提取。

可行的解决方案 #

下面是业内通用的避免私有API密钥泄露的标准方案：

• 最推荐：新增后端代理层转发请求
  所有需要携带私有API密钥的请求，都不要从前端直接发起。改成前端先把请求参数发送到你自己的后端服务，由后端在服务端将私有密钥添加到请求中，再转发到目标API接口，拿到返回结果后回传给前端即可。这种方案下私有密钥只会保存在后端，前端完全接触不到密钥信息，从根源上避免了泄露风险。
• 使用API服务商提供的安全策略
  如果你对接的是第三方公开API，优先使用官方提供的安全配置项：
  • 配置调用来源白名单：将API的调用权限限制为仅你的网站域名可调用，就算密钥泄露，其他人也无法在其他域名下使用该密钥
  • 申请临时访问凭证：由后端先向API服务商申请有时效限制的临时访问凭证下发给前端使用，凭证过期后自动失效，就算泄露也不会造成长期影响
• 无后端的轻量化场景限制密钥权限
  如果你只是做个人小型项目、暂时没有能力部署后端服务，绝对不要在前端放置高权限的API密钥。请单独申请权限最小、仅开放你需要使用的单个接口、设置了调用额度上限的密钥，就算出现泄露也不会造成大额损失。

避坑提示 #

不要尝试用JS混淆、禁止右键查看源码、隐藏JS文件路径这类方案保护密钥，这类方案只能防完全不了解前端的普通用户，稍有技术基础的人只需要几分钟就能提取到明文密钥，没有实际的安全价值。

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