如何保护 JavaScript API 访问令牌？

Question

有许多在线资源提供 JavaScript API 来访问其服务。 为了更清楚，我将基于MapBox的示例提出我的问题，但这也适用于各个领域的许多其他服务。

当有人想要在 Web 应用程序中使用此类服务​​时（例如来自 MapBox 的地图图像），他们通常需要注册/注册并获取访问令牌以访问该服务。

现在，如果我从服务器端使用 API - 没有问题：我知道我的令牌安全地存储在服务器的某个地方，并且仅在我的服务器和服务提供商之间进行通信时“公开”。 但是，在 JavaScript API 的情况下（例如，如果我使用Leaflet从 MapBox 渲染地图），我应该将我的访问令牌放在暴露给用户的 Web 浏览器的 JavaScript 中 - 因此它非常容易找到某人的访问令牌。 在我的示例中，只需使用 Leaflet 访问任何网站并在 Firefox 中打开“开发工具”，就会在仔细阅读 JavaScript 代码的一分钟内显示他们使用的令牌。

然而，对我来说，这个令牌应该被视为一个非常安全的数据 - 服务使用是根据这个令牌提供的身份验证来跟踪的。 如果您根据使用情况支付服务费用，这将变得非常重要，但即使您不这样做（例如，如果您使用免费/入门/非付费计划） - 服务使用量是有限的，我想确定只有我在使用它。

我唯一的选择是通过我自己的网络服务器代理吗？

如果 JavaScript 在用户浏览器中执行，是否有办法保护 JavaScript API 用于访问外部服务的访问令牌？

Answer 1

使用 CORS 限制访问

使用 CORS 设置，让您的 Web 服务器根据来自您的 javascript 的 ajax 请求返回访问令牌。 可以使用此方法访问您的应用程序来捕获令牌。

向授权用户提供令牌

您还可以在您的网络服务器上添加身份验证，以提供对您允许的用户的有限访问。 可以使用此方法捕获令牌，但只能由授权用户捕获。

代理请求

完全保护该令牌的唯一方法是通过您的服务器代理请求。 无法使用此方法捕获令牌。 请注意，这可能违反服务条款。

Answer 2

Javascript API 令牌（实际上是所有客户端令牌）始终对客户端可见（除非仅在服务器端使用它们，如在节点中）。 没有办法解决这个问题。 正如您所提到的，真正保护 API 密钥并将其保密的唯一方法是将其存储在服务器中，然后请求服务器代表客户端发出请求。

Answer 3

5 年后，这不一定适用于原始海报，但对于仍然感兴趣的任何人，Mapbox 现在允许您轻松地按域限制令牌：

https://account.mapbox.com/access-tokens （假设您已登录）

Answer 4

我只会谈论像 Mapbox 这样的地图图像 API，不幸的是，似乎只有像 Google Maps、Here Maps、Bing Maps 等服务提供服务提供商的 ip/域过滤或这种类型的安全性，我遇到的所有基于 OSM 的产品都没有t 提出它。 正如 Justin Poehnelt 所说，唯一可靠的方法是构建代理，但通常是被禁止的。 我在Mapbox 的 ToU 中找到了这个：

您不得重新分配地图资产，包括从缓存、代理或使用屏幕截图或其他静态图像，而不是通过映射 API 访问地图资产。

Answer 5

您可能喜欢阅读CORS 标头这些允许您限制哪个域可以调用远程 Web 服务。