Comment sécuriser le jeton d'accès à l'API JavaScript?
Il existe de nombreuses ressources en ligne qui fournissent des API JavaScript pour accéder à leurs services. Pour être plus clair, je baserai ma question sur l'exemple de MapBox , mais cela s'applique bien à de nombreux autres services dans divers domaines.
Quand quelqu'un veut utiliser un tel service dans une application Web (comme l'imagerie de carte de MapBox par exemple), il doit généralement s'enregistrer/s'inscrire et obtenir un jeton d'accès pour accéder au service.
Maintenant, si j'utilise l'API côté serveur - il n'y a pas de problème: je sais que mon jeton est stocké en sécurité quelque part sur le serveur et n'est "exposé" que lors de la communication entre mon serveur et le fournisseur de services. Cependant, dans le cas d'une API JavaScript (par exemple si j'utilise Leaflet pour rendre une carte à partir de MapBox), je suis censé avoir mon jeton d'accès dans un JavaScript qui est exposé au navigateur Web de l'utilisateur - et donc il est extrêmement facile de trouver le jeton d'accès de quelqu'un. Dans mon exemple, simplement aller sur n'importe quel site Web en utilisant Leaflet et ouvrir "Dev Tools" dans Firefox révèle le jeton qu'ils utilisent en une minute de lecture attentive de leur code JavaScript.
Ce jeton, quant à moi, doit cependant être considéré comme une donnée très sécurisée - l'utilisation du service est suivie en fonction de l'authentification fournie par ce jeton. Si vous payez pour le service en fonction de son utilisation, cela devient très critique, mais même si vous ne le faites pas (comme si vous utilisez un plan gratuit/de démarrage/non payé) - l'utilisation du service est limitée et je voudrais en être sûr c'est seulement moi qui l'utilise.
Ma seule option est-elle un proxy via mon propre serveur Web?
Existe-t-il un moyen de sécuriser le jeton d'accès utilisé par une API JavaScript pour accéder à un service externe, à condition que JavaScript soit exécuté dans le navigateur d'un utilisateur?
Restreindre l'accès avec CORS
Faites en sorte que votre serveur Web retourne les jetons d'accès sur une demande ajax de votre javascript avec la configuration CORS. Le jeton peut être capturé avec cette méthode en visitant votre application.
Fournir des jetons aux utilisateurs autorisés
Vous pouvez également ajouter une authentification sur votre serveur Web pour fournir un accès limité aux utilisateurs que vous autorisez. Le jeton peut être capturé avec cette méthode mais uniquement par des utilisateurs autorisés.
Demandes de proxy
La seule façon de protéger complètement ce jeton est de proxy les demandes via votre serveur. Le jeton ne peut pas être capturé avec cette méthode.
Les jetons d'API Javascript (et tous les jetons clients, en fait) sont toujours visibles pour le client (à moins de les utiliser uniquement côté serveur, comme dans le nœud). Il n'y a pas de chemin aux alentours. Comme vous l'avez mentionné, la seule façon de vraiment sécuriser une clé API et de la garder privée est de la stocker sur le serveur, puis de demander au serveur de faire la demande au nom du client.
Je ne parlerai que des API d'imagerie de carte comme Mapbox, il semble que seuls les services comme Google Maps, Here Maps, Bing Maps, etc. t le proposer. Comme Justin Poehnelt l'a dit, le seul moyen fiable est de créer un proxy, mais il est généralement interdit. Je trouve cela dans les ToU de Mapbox :
Vous ne pouvez pas redistribuer les ressources cartographiques, y compris à partir d'un cache, en utilisant un proxy , ou en utilisant une capture d'écran ou une autre image statique au lieu d'accéder aux ressources cartographiques via le mappage Apis.
Vous voudrez peut-être lire En-têtes CORS Ceux-ci vous permettent de restreindre le domaine qui peut appeler un service Web distant.