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

Question

现在我正在编写一个客户端 JavaScript 应用程序，该应用程序向 USPS 价格计算器 API 发出请求。 为了发出此请求，我需要在请求的 xml 中提供我的 API 用户 ID。 该标签看起来像这样：

<RateV4Request USERID="ThisIsWhereMyUserIdGoes">

。 我的问题是：有什么方法可以向 JavaScript 提供我的用户 ID，同时仍然对查看客户端文件的用户隐藏它。 目前，我唯一的解决方案是在服务器中创建一个包含用户 ID 的 PHP 文件，然后在客户端 javascript 中使用 AJAX 请求将其存储在全局变量中。 看起来像这样：

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

这是防止我的 API 用户 ID 被我的应用程序的用户看到的适当方法吗？ 我还能做什么？

Answer 1

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

这篇文章有更多细节

两种选择

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

Answer 2

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

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

Netlify 有这方面的文档。我猜其他提供商如 AWS lambda、Google 云函数也提供类似的东西，但不确定。

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

优点 没有服务器管理

缺点 供应商锁定

Answer 3

即使使用 PHP 解决方案，您也无法隐藏您的用户 ID。通过访问

console.log(userId);

可以轻松地在浏览器控制台中打印它。据我所知，客户端可用的任何内容都容易受到攻击并且很容易被解码。即使您混淆了 api 密钥，它仍然可以从客户端进行解码。

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