如何保护JavaScript API访问令牌？

Question

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

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

现在，如果我将从服务器端使用API​​ - 没有问题：我知道我的令牌安全地存储在服务器上的某个地方，并且只有＆＃34;暴露＆＃34;在我的服务器和服务提供商之间进行通信。但是，对于JavaScript API（例如，如果我使用Leaflet从MapBox渲染地图），我应该在JavaScript中显示我的访问令牌用户的网络浏览器 - 因此可以非常轻松地找到某人的访问令牌。在我的例子中，只需使用Leaflet访问任何网站并打开＆＃34; Dev Tools＆＃34;在Firefox中，他们会在一分钟仔细阅读他们的JavaScript代码时显示他们使用的令牌。

但是，对于我来说，这个标记应该被视为非常安全的数据 - 根据此令牌提供的身份验证来跟踪服务使用情况。如果您根据其使用情况支付服务费用，则变得非常关键，但即使您没有（例如，如果您使用免费/入门/非付费计划） - 服务使用受到限制，我也会这样做比如确定只有我使用它。

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

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

Answer 1

使用CORS限制访问

让您的网络服务器在您使用CORS设置的javascript的ajax请求中返回访问令牌。可以使用此方法访问您的应用程序捕获令牌。

向授权用户提供令牌

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

代理请求

完全保护该令牌的唯一方法是通过您的服务器代理请求。使用此方法无法捕获令牌。

Answer 2

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

Answer 3

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

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

Answer 4

我只会说地图图像API，比如Mapbox，似乎不幸的是只有Google Maps，Here Maps，Bing Maps等服务提供服务提供商的IP /域过滤或这种类型的安全性，所有基于OSM的优惠我见过不要提出来。正如Justin Poehnelt所说，唯一可靠的方法是建立一个代理，但它通常是被禁止的。我在the ToU of Mapbox中找到了这个：

  

您可能无法重新分发地图资产，包括从缓存中重新分发   代理，或使用屏幕截图或其他静态图片代替   通过Mapping API访问Map Assets。

Answer 5

您可能希望阅读CORS headers 这些允许您限制哪个域可以调用远程Web服务。