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

Question

现在我正在编写一个客户端 javascript 应用程序，它向 USPS 价格计算器 API 发出请求。 为了发出此请求，我需要在请求的 xml 中提供我的 API 用户 ID。 标记如下所示： <RateV4Request USERID="ThisIsWhereMyUserIdGoes"> 。 我的问题是：有什么方法可以将我的用户 ID 提供给 javascript，同时仍然对查看客户端文件的用户隐藏它。 现在，我唯一的解决方案是在我的服务器中创建一个具有用户 ID 的 PHP 文件，然后在客户端 javascript 中使用 AJAX 请求将其存储在全局变量中。 它看起来像这样：

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

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

Answer 1

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

这篇文章有更详细的介绍

两种选择

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

Answer 2

即使使用您的 PHP 解决方案，您也无法隐藏您的用户 ID。 它可以通过访问consle.log(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

优点没有服务器管理

缺点厂商锁定