Image de couverture - Comment protéger sa clé API ?

Comment protéger sa clé API ?

Découvrez comment sécuriser définitivement vos clés API et éviter toute exposition dans le navigateur.

Icône de calendrier
Icône de chronomètre 4 min

Les clés API sont comme les clés de chez vous : vous ne voulez pas qu’elles tombent entre de mauvaise mains. Leur confidentialité devient alors une priorité absolue lorsque vous développez une application web.

A quoi servent les clés API ?

Avant d’aborder le concept de clé API, il est primordial de comprendre ce qu’est une API.

Une API (Interface de Programmation Applicative) est un ensemble de règles et protocoles qui permettent à différents logiciels de communiquer entre eux.

Pour faire simple, c’est un service qui permet de partager des fonctionnalités et/ou des données à une application.

La plupart du temps, les API sont exploitables par tout utilisateur possédant une clé API.

Une clé API est un identifiant unique utilisé pour s’authentifier lors de l’accès à une API.

Voici un exemple de clé API :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Elle permet de :

  1. Contrôler l’accès aux ressources
  2. Suivre l’utilisation de l’API

Les services tiers fournissent généralement ces clés gratuitement ou à l’issue d’une souscription, pour sécuriser l’accès à leurs API.

Comment protéger sa clé API ?

La sécurité de votre clé API est de votre responsabilité de développeur.

Elle est aussi sensible qu’un mot de passe et doit être traitée avec précaution. Ne partagez jamais votre clé API, tout comme vous ne devriez jamais partager votre mot de passe, car cela compromettrait la sécurité de votre application et de vos données.

Et comme un partage de clé API n’est généralement pas intentionnel, quelles erreurs éviter pour protéger efficacement sa clé API ?

❌ Ne pas stocker sa clé API côté client

A chaque fois que nous appelons une API externe depuis le frontend d’une application, nous exposons notre clé API dans la requête HTTP envoyée au serveur de l’API, ce qui n’est pas une bonne idée…

Pourquoi cela ? Car les langages HTML, CSS et JavaScript s’exécutent côté client, autrement dit, dans le navigateur.

Tout ce qui se trouve côté frontend est accessible au public.

Une erreur de débutant très classique consiste à hardcoder ses clés API au sein même de ses scripts JavaScript pour consommer des API.

Cela signifie qu’elles peuvent facilement être exposées car un développeur, même novice, pourra y accéder en inspectant le code et/ou en analysant les requêtes réseau du navigateur

Schéma - Clé API stockée côté client
Schéma - Clé API stockée côté client

Généralement, cela se traduit par un appel à la méthode fetch() pour appeler une API avec une clé API directement intégrée :

fichier-pas-secure.js
// ⚠️ Directement dans l'URL...
const apiKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9';

fetch(`https://api.example.com/data?key=${apiKey}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// ⚠️ Dans l'entête de la requête...
fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`
  }
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

✅ Stocker sa clé API côté serveur

Mais par chance, si le code source d’une application frontend est totalement vulnérable de par sa transparence, ce n’est pas le cas des langages de programmation côté serveur… qui restent côté serveur !

Pour résoudre ce problème, nous pouvons créer un serveur proxy qui jouera le rôle d’intermédiaire entre notre application frontend et le serveur API. C’est dorénavant sur ce serveur API proxy que nous stockerons notre clé API pour effectuer une demande en notre nom.

Ce serveur proxy contiendra des endpoints intermédiaires pour chaque action que l’on souhaite effectuer vers l’API.

Pour protéger votre clé API, vous devez la stocker côté serveur afin d’éviter son exposition dans le code retourné au navigateur.

Schéma - Clé API stockée côté serveur
Schéma - Clé API stockée côté serveur

Ne connaissant pas la clé API, il n’est ici plus possible au client d’interagir directement avec l’API.

Votre frontend doit désormais envoyer une requête vers votre backend, qui agira comme un serveur proxy, un point de passage obligatoire pour interagir avec l’API.

Seul votre backend connaîtra la clé API, la préservant ainsi des regards indiscrets.

.env
API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Il est ensuite possible à votre serveur proxy d’exploiter cette variable d’environnement pour effectuer l’appel fetch() à la place du frontend.

Risques : pourquoi protéger sa clé API ?

Se faire subtiliser sa clé API n’est pas souhaitable. Les conséquences qui en résultent peuvent être minimes comme drammatiques, selon le cas d’usage et les intentions du voleur.

Voici quelques exemples de risques encourus suite au vol de votre clé API :

  • Vol de quota : vous exploitez avec une API météo publique (max de 50 requêtes par jour). Exposer votre clé API entraînera un vol de vos quotas journaliers.
  • Facture imprévue : vous utilisez une API d’IA générative que vous payez à la consommation (exemple : 0.023€ / requête). Exposer votre clé API entraînera portentiellement une facture imprévue, très salée ! Souvent ces API proposent de définir des quotas limites afin de prémunir ce genre de scénarios…
  • Perte de contrôle sur une BDD : vous avez développé une API pour gérer le backend de votre application. Exposer votre clé API rendra vulnérable votre base de données (vol de données, suppression de données…).
  • Etc.

Ne négligez pas la sécurité de vos clés API. Pensez également à les renouveler régulièrement pour garantir une protection maximale.

Fini le temps où vos clés API étaient exposées dans le navigateur. Maintenant, vous savez qu’il est essentiel de passer par un serveur intermédiaire, jouant le rôle de proxy, pour assurer leur sécurité.

Lire aussi