¿Cómo proteger el token de acceso de la API de JavaScript?

Existen numerosos resources en línea que proporcionan API de JavaScript para acceder a sus services. Para ser más claro, basaré mi pregunta en el ejemplo de MapBox , pero esto se aplica bien a muchos otros services en varios dominios.

Cuando alguien quiere usar dicho service en una aplicación web (como las imágenes del map de MapBox, por ejemplo), generalmente necesita Registrarse / Registrarse y get un token de acceso para acceder al service.

Ahora, si quisiera usar la API desde el lado del server, no hay problema: sé que mi token está almacenado de forma segura en algún lugar del server y solo está "expuesto" a la comunicación entre mi server y el proveedor del service. Sin embargo, en el caso de una API de JavaScript (por ejemplo, si uso Leaflet para renderizar un map desde MapBox), se supone que tengo mi token de acceso en JavaScript que está expuesto al browser web del usuario, por lo que es extremadamente fácil para encontrar el token de acceso de alguien En mi ejemplo, simplemente ir a cualquier website usando Leaflet y abrir "Dev Tools" en Firefox revela el token que usan en un minuto de lectura atenta de su código JavaScript.

Sin embargo, este token, en cuanto a mí, debe considerarse como un dato muy seguro: el uso del service se rastrea en function de la authentication que proporciona este token. Si paga por el service en function de su uso, se vuelve muy crítico, pero incluso si no lo hace (como, si utiliza un plan gratuito / principiante / no pagado), el uso del service es limitado y me gustaría estar seguro. soy solo yo quien lo usa.

Claramente, hay estrategias como el filtrado de IP / dominio por parte del proveedor de services, por ejemplo, pero no parece que todos los proveedores de services lo admitan; por ejemplo, MapBox no parece (o yo no lo encontré). O, en última instancia, puedo proxy el service a través de mi server web, pero esto es muy pesado.

Teniendo en count todo eso, ¿hay alguna forma de proteger el token de acceso utilizado por una API de JavaScript para acceder a un service externo, siempre que JavaScript se ejecute en el browser de un usuario?

Restringir el acceso con CORS

Haga que su server web devuelva los tokens de acceso en una request ajax desde su javascript con la configuration CORS. Token se puede capturar con este método visitando su aplicación.

Proporcionar tokens a usuarios autorizados

También puede agregar authentication en su server web para proporcionar acceso limitado a los usuarios que permite. El token puede capturarse con este método, pero solo por usuarios autorizados.

Solicitudes de proxy

La única forma de proteger por completo ese token es realizar un proxy de las requestes a través de su server. Token no puede ser capturado con este método.

Los tokens de API de Javascript (y todos los tokens de cliente, de hecho) siempre son visibles para el cliente (a less que los use solo en el server, como en el nodo). No hay forma de evitar eso. Como mencionaste, la única forma de asegurar realmente una key de API y mantenerla privada es almacenarla en el server y luego solicitar al server que realice la request en nombre del cliente.

Es posible que desee leer en los encabezados CORS. Esto le permite restringir qué dominio puede llamar a un service web remoto.

Hablaré solo sobre API de imágenes de maps como Mapbox, parece que desafortunadamente solo services como Google Maps, Here Maps, Bing Maps etc. ofrecen filtrado de IP / dominio por proveedor de services o este tipo de security, todas las ofertas basadas en OSM me encontré t lo propongo Como dijo Justin Poehnelt, la única forma confiable es build un proxy, pero generalmente está prohibido. Encuentro esto en el ToU de Mapbox :

No puede networkingistribuir los Assets del map, incluso desde un caching, mediante proxying , o mediante el uso de una captura de pantalla u otra image estática en lugar de acceder a Asset Map a través de las API de asignación.