如何在客户端Javascript中隐藏API密钥

Question

现在我正在编写一个客户端javascript应用程序,它向USPS Price Calculator API发出请求.为了发出此请求,我需要在请求的xml中提供我的API用户ID.标签看起来像这样: <RateV4Request USERID="ThisIsWhereMyUserIdGoes">.我的问题是:有什么办法可以将我的用户ID提供给javascript,同时仍然将其隐藏在查看客户端文件的用户身上.现在,我唯一的解决方案是在我的服务器中创建一个具有User ID的PHP文件,然后在客户端javascript中使用AJAX请求将其存储在全局变量中.它看起来像这样:

var userID;
$.get("/secrets.php", function( data ) { 
       userID = data;
});

这是否足以让我的应用程序用户看不到我的API用户ID？我还能做什么？

Answer 1

简而言之：不，您不能在客户端应用程序中保护API密钥。

本文将更详细地介绍

两种选择

• 使API调用在服务器端，然后从那里向客户端提供信息
• 要求客户端使用自己的API密钥

Answer 2

即使使用PHP解决方案,也无法隐藏userId.它可以通过访问轻松打印在浏览器控制台中consle.log(userId);.据我所知,客户端可用的任何东西都很脆弱,很容易被解码.即使您混淆了api密钥,它仍然可以从客户端解码.

正确的做法是围绕需要密钥的API调用创建一个PHP包装器,然后从Javascript调用该包装器.

Answer 3

如果您在 2020 年阅读此页面并且出于任何原因（节省托管成本等）不想开发服务器端代码，那么无服务器功能可能是解决方案。

这也会从服务器端调用 3rd 方 API，但您不必开发成熟的服务器端 API 代理。

Netlify 有这方面的文档。我猜其他供应商，如 AWS lambda、谷歌云功能也提供类似的东西，但不确定。

https://github.com/netlify/code-examples/tree/master/function_examples/token-hider

优点 没有服务器管理

缺点 厂商锁定