Sichere Authentifizierung in JavaScript: Wie man Passwörter nicht preisgibt

Das Passwort "qwerty123" funktioniert nicht mehr: Warum Sicherheit nicht langweilig ist

Stellen Sie sich vor: Sie haben eine coole Webanwendung geschrieben. Schöne Oberfläche, reaktiver Code, alles fliegt. Sie starten sie, registrieren den ersten Benutzer – und eine Stunde später ist Ihre Datenbank öffentlich zugänglich. Eine bekannte Geschichte? Leider ist sichere Authentifizierung in JavaScript ein Thema, das viele Entwickler auf später verschieben. Zu Unrecht.

In diesem Artikel besprechen wir, wie Sie Ihre Anwendung vor den häufigsten Angriffen schützen: Token-Abfangen, XSS, CSRF und Passwortlecks. Wir halten keine Vorträge darüber, "wie man es richtig macht" – wir zeigen Code, den Sie sofort verwenden können.

Bereit? Los geht's.

Authentifizierung in JavaScript: Warum der Client ein Schlachtfeld ist

Wenn wir über Authentifizierung im Web sprechen, denken wir oft an das Backend: Datenbanken, Sessions, Hashing. Aber die JavaScript-Authentifizierung beginnt auf dem Client. Und hier lauern Fallen.

Alles, was im Browser läuft, kann gelesen, geändert oder gestohlen werden. Ihr JavaScript-Code ist ein offenes Buch für Angreifer, wenn sie eine Schwachstelle finden. Daher die erste Regel der sicheren Authentifizierung: Vertrauen Sie niemals dem Client. Niemals.

Hauptbedrohungen auf der Client-Seite

• XSS (Cross-Site Scripting) – Ein Angreifer schleust ein Skript ein, das Token aus localStorage stiehlt.
• CSRF (Cross-Site Request Forgery) – Der Benutzer ist authentifiziert, und eine bösartige Website sendet Anfragen in seinem Namen.
• Man-in-the-Middle – Abfangen des Datenverkehrs, wenn HTTPS nicht verwendet wird.
• Passwortleck – Senden des Passworts im Klartext oder Speichern im Code.

Hört sich das beängstigend an? Eigentlich ist der Schutz davor nicht so schwer. Die Hauptsache ist, die richtigen Werkzeuge zu kennen.

JWT: Praktisch, aber mit einem Haken

JWT (JSON Web Token) ist ein Standard zum Erstellen von Zugriffstoken. Es ist leicht, erfordert keine Speicherung auf dem Server und eignet sich hervorragend für SPAs. Aber seine Beliebtheit macht es zum Ziel.

Viele Entwickler speichern JWT im localStorage. Das ist ein Fehler. localStorage ist für jeden JavaScript-Code auf der Seite zugänglich. Wenn Sie auch nur eine XSS-Schwachstelle haben – ist das Token gestohlen.

Wie man JWT richtig speichert

Der beste Weg sind httpOnly-Cookies. Cookies mit dem Flag httpOnly sind für JavaScript nicht zugänglich. XSS kann sie nicht stehlen. Aber es gibt einen Haken: Cookies werden automatisch mit jeder Anfrage gesendet, was die Anwendung anfällig für CSRF macht. Die Lösung – verwenden Sie SameSite und CSRF-Token.

Hier ist ein Beispiel für das Setzen eines httpOnly-Cookies auf dem Backend (Node.js mit Express):

// Server (Node.js / Express)res.cookie('token', jwtToken, {  httpOnly: true,       // Nicht für JavaScript zugänglich  secure: true,         // Nur über HTTPS  sameSite: 'strict',   // Schutz vor CSRF  maxAge: 3600000       // 1 Stunde});

Auf dem Client senden Sie einfach Anfragen – die Cookies werden automatisch angehängt:

// Client (JavaScript)fetch('/api/profile', {  method: 'GET',  credentials: 'include' // Unbedingt!}).then(res => res.json()).then(data => console.log(data));

Beachten Sie: credentials: 'include' – ohne dies werden Cookies nicht an einen anderen Origin gesendet.

Passwort-Hashing: bcrypt hilft Ihnen

Passwörter im Klartext zu speichern ist, als würde man die Hausschlüssel unter der Fußmatte lassen. Selbst wenn Ihre Website gehackt wird, sollten die Passwörter für den Angreifer nutzlos sein.

bcrypt ist ein Hashing-Algorithmus, der absichtlich langsam gemacht wurde. Denn das Hashen eines Passworts für einen Benutzer dauert Bruchteile einer Sekunde, aber für das Knacken – Jahre. In JavaScript (Node.js) verwenden Sie die Bibliothek b