如何保护 JavaScript API 访问令牌?

2022-01-12 00:00:00 mapbox leaflet security javascript

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

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.

当有人想在 Web 应用程序中使用此类服务​​(例如 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 token to access the service.

现在,如果我从服务器端使用 API - 没有问题:我知道我的令牌安全地存储在服务器上的某个位置,并且仅在我的服务器和服务提供商之间进行通信时公开,这可以长是 HTTPS.但是,对于 JavaScript API(例如,如果我使用 Leaflet 从 MapBox 呈现地图),我是应该在暴露给用户的网络浏览器的 JavaScript 中具有 我的访问令牌 - 因此它可以非常容易地找到某人的访问令牌.我的用户,或者在公共服务的情况下,实际上是任何人,都可以在浏览器的开发工具"中找到令牌.

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, which is OK as long it is HTTPS. However, in case of a JavaScript API (for example if I use Leaflet to render a map from MapBox), I am supposed to have my access token in a JavaScript which is exposed to the user's web browser - and so it makes it extremely easy to find someone's access token. My users, or in a case of a public service, literally anyone, would be able to find the token in the browser's "Dev Tools".

然而,就我而言,这个令牌应该被视为一种有意义的数据——服务使用情况是根据这个令牌提供的身份验证来跟踪的.如果您根据使用情况为服务付费,这将变得至关重要,但即使您不这样做(例如,如果您使用免费/入门/非付费计划) - 服务使用是有限的,我想确定一下只有我使用它.

This token however, as for me, should be considered as a sensetive data - service usage is tracked based on the authentication this token provides. If you pay for the service based on its usage it becomes 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?

如果 JavaScript 在用户的浏览器中执行,有没有办法保护 JavaScript API 用来访问外部服务的访问令牌?

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?

推荐答案

使用 CORS 限制访问

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

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.

向授权用户提供令牌

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

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.

代理请求

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

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.

相关文章