如何保护 JavaScript API 访问令牌？

How to secure the JavaScript API Access Token?

提问by Timur

There are numerous online resources which provide JavaScript APIs to access their services. To be more clear, I will base my question on the example of MapBox, but this applies well to many other services in various domains.

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

When someone wants to use such a service in a web application (like the map imagery from MapBox for example), they typically need to Register/Sign Up and obtain an access tokento access the service.

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

Now, if I would use the API from the server side - there is no issue: I know my token is stored securely somewhere on the server and is only "exposed" upon communication between my server and the service provider. However, in case of a JavaScript API (for example if I use Leafletto render a map from MapBox), I am supposed to have my access tokenin a JavaScript which is exposed to the user's web browser - and so it makes it extremely easy to find someone's access token. In my example, simply going to any website using Leaflet and opening "Dev Tools" in Firefox reveals the token they use in a minute of attentive reading of their JavaScript code.

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

This token however, as for me, should be considered as a very secure data - service usage is tracked based on the authentication this token provides. If you pay for the service based on its usage it becomes very critical, but even if you don't (like, if you use a Free/Starter/Non Paid plan) - service usage is limited and I'd like to be sure it is only me who uses it.

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

Is my only option a proxy via my own web server?

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

Is there a way to secure the access token used by a JavaScript API to access an external service, provided that JavaScript is executed in a user's browser?

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

采纳答案by Justin Poehnelt

Restrict Access with CORS

使用 CORS 限制访问

Make your web server return the access tokens on an ajax request from you javascript with CORS setup. Token can be captured with this method visiting your app.

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

Provide Tokens to Authorized Users

向授权用户提供令牌

You can also add authentication on your webserver to provide limited access to the users you allow. Token can be captured with this method but only by authorized users.

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

Proxy Requests

代理请求

The only way to completely protect that token is to proxy the requests through your server. Token cannot be captured with this method. Note that this may be against terms of service.

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

回答by emanb29

Javascript API tokens (and all client tokens, in fact) are always visible to the client (unless using them only server-side, as in node). There is no way around that. As you mentioned, the only way to truly secure an API key and keep it private is to store it in the server, then request the server to make the request on the client's behalf.

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

回答by Cinn

I will speak only about map imagery APIs like Mapbox, it seems that unfortunatly only services like Google Maps, Here Maps, Bing Maps etc offer ip/domain filtering by service provider or this type of security, all offers based on OSM i met don't propose it. As Justin Poehnelt said the only reliable way is to build a proxy, but it's usually forbidden. I find this in the ToU of Mapbox:

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

You may not redistribute Map Assets, including from a cache, by proxying, or by using a screenshot or other static image instead of accessing Map Assets through the Mapping APIs.

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

回答by gauravphoenix

You may like to read up on CORS headersThese allow you restrict which domain can call a remote web service.

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