Was macht eine gute Abmeldung aus?

Kenji Baheux
Kenji Baheux

Wenn sich ein Nutzer von einer Website abmeldet, teilt er damit mit, dass er keine personalisierten Inhalte mehr erhalten möchte. Daher ist es wichtig, sich so genau wie möglich an das mentale Modell des Nutzers zu halten. Bei einer ordnungsgemäßen Abmeldung sollten beispielsweise auch alle Tabs berücksichtigt werden, die der Nutzer geöffnet hat, bevor er sich abgemeldet hat.

Der Schlüssel zu einer guten Abmeldefunktion liegt darin, dass die visuellen und statusbezogenen Aspekte der User Experience konsistent sind. In diesem Leitfaden finden Sie konkrete Tipps dazu, worauf Sie achten müssen und wie Sie eine gute Abmeldung ermöglichen.

Wichtige Überlegungen

Achten Sie bei der Implementierung der Abmeldefunktion auf Ihrer Website auf die folgenden Aspekte, um einen reibungslosen, sicheren und intuitiven Abmeldevorgang zu gewährleisten:

  • Eindeutige und konsistente Abmelde-UX: Stellen Sie eine eindeutige und durchgehend sichtbare Abmeldeschaltfläche oder einen entsprechenden Link bereit, die bzw. der auf der gesamten Website leicht zu finden und zugänglich ist. Vermeiden Sie die Verwendung mehrdeutiger Labels oder das Verbergen der Abmeldefunktion in unübersichtlichen Menüs, Unterseiten oder anderen unintuitiven Bereichen.
  • Bestätigungsaufforderung: Implementieren Sie eine Bestätigungsaufforderung, bevor Sie den Abmeldevorgang abschließen. So können Nutzer nicht versehentlich abgemeldet werden und haben die Möglichkeit, sich zu überlegen, ob sie sich wirklich abmelden müssen, z. B. wenn sie ihr Gerät sorgfältig mit einem starken Passwort oder einem anderen Authentifizierungsmechanismus sperren.
  • Mehrere Tabs verarbeiten: Wenn ein Nutzer mehrere Seiten derselben Website in verschiedenen Tabs geöffnet hat, muss das Abmelden in einem Tab auch alle anderen geöffneten Tabs dieser Website aktualisieren.
  • Auf eine sichere Landingpage weiterleiten: Leiten Sie den Nutzer nach dem erfolgreichen Abmelden auf eine sichere Landingpage weiter, auf der deutlich zu sehen ist, dass er nicht mehr angemeldet ist. Vermeiden Sie es, Nutzer auf Seiten mit personalisierten Informationen weiterzuleiten. Achten Sie darauf, dass auch auf anderen Tabs kein Anmeldestatus mehr angezeigt wird. Achten Sie außerdem darauf, dass Sie keine offene Weiterleitung erstellen, die von Angreifern ausgenutzt werden kann.
  • Sitzung bereinigen: Wenn sich ein Nutzer abgemeldet hat, müssen alle sensiblen Daten zur Nutzersitzung, Cookies oder temporären Dateien, die mit der Sitzung des Nutzers verknüpft sind, vollständig entfernt werden. So wird unbefugter Zugriff auf Nutzerinformationen oder Kontoaktivitäten verhindert. Außerdem wird verhindert, dass der Browser Seiten mit vertraulichen Informationen aus seinen verschiedenen Caches, insbesondere dem Cache für Zurück/Vorwärts, wiederherstellt.
  • Fehlerbehandlung und Feedback: Geben Sie Nutzern klare Fehlermeldungen oder Feedback, wenn es Probleme beim Abmelden gibt. Informieren Sie sie über potenzielle Sicherheitsrisiken oder Datenlecks, wenn der Abmeldevorgang fehlschlägt.
  • Barrierefreiheit: Achten Sie darauf, dass der Abmeldemechanismus für Nutzer mit Behinderungen zugänglich ist, einschließlich derer, die Hilfstechnologien wie Screenreader oder Tastaturnavigation verwenden.
  • Browserübergreifende Kompatibilität: Testen Sie die Abmeldefunktion in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass sie konsistent und zuverlässig funktioniert.
  • Kontinuierliche Überwachung und Updates: Überwachen Sie den Abmeldeprozess regelmäßig auf potenzielle Sicherheitslücken. Implementieren Sie zeitnah Updates und Patches, um alle erkannten Probleme zu beheben.
  • Identitätsföderation: Wenn der Nutzer mit einer föderierten Identität angemeldet ist, prüfen Sie, ob die Abmeldung vom Identitätsanbieter unterstützt wird und erforderlich ist. Wenn der Identitätsanbieter die automatische Anmeldung unterstützt, vergessen Sie nicht, sie zu verhindern.

So gehts

  • Wenn Sie ein Cookie auf dem Server im Rahmen eines Abmeldevorgangs (oder anderer Vorgänge zum Aufheben des Zugriffs) ungültig machen, müssen Sie das Cookie auch auf dem Gerät des Nutzers löschen.
  • Löschen Sie alle sensiblen Daten, die Sie möglicherweise auf dem Gerät des Nutzers gespeichert haben: Cookies, localStorage, sessionStorage, indexedDB, CacheStorage und alle anderen lokalen Datenspeicher.
  • Achten Sie darauf, dass alle Ressourcen, die vertrauliche Daten enthalten, insbesondere HTML-Dokumente, mit dem HTTP-Header Cache-control: no-store zurückgegeben werden, damit der Browser diese Ressourcen nicht im permanenten Speicher (z. B. auf der Festplatte) speichert. Entsprechend sollte für XHR-/fetch-Aufrufe, die sensible Daten zurückgeben, auch der HTTP-Header Cache-Control: no-store festgelegt werden, um das Caching zu verhindern.
  • Achten Sie darauf, dass alle geöffneten Tabs auf dem Gerät des Nutzers mit serverseitigen Widerrufen des Zugriffs auf dem neuesten Stand sind.

Sensible Daten beim Abmelden bereinigen

Nach dem Abmelden sollten Sie sitzungsspezifische und lokal gespeicherte vertrauliche Daten löschen. Der Fokus auf sensible Daten ist darauf zurückzuführen, dass das Löschen aller Daten zu einer deutlich schlechteren Nutzererfahrung führen würde, da der Nutzer möglicherweise zurückkehrt. Wenn Sie beispielsweise alle lokal gespeicherten Daten löschen, müssen Ihre Nutzer Cookie-Einwilligungsaufforderungen noch einmal bestätigen und andere Prozesse durchlaufen, als hätten sie Ihre Website noch nie besucht.

Cookies bereinigen

Hängen Sie an die Antwort für die Seite, die den abgemeldeten Status bestätigt, Set-Cookie-HTTP-Header an, um alle Cookies zu löschen, die sich auf sensible Daten beziehen oder solche enthalten. Legen Sie den Wert expires auf ein Datum in der fernen Vergangenheit und den Wert des Cookies auf einen leeren String fest.

Set-Cookie: sensitivecookie1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
Set-Cookie: sensitivecookie2=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
...

Offlineszenario

Der oben beschriebene Ansatz reicht für allgemeine Anwendungsfälle aus, funktioniert jedoch nicht, wenn der Nutzer offline arbeitet. Sie sollten in Erwägung ziehen, zwei Cookies zum Erfassen des Anmeldestatus zu verwenden: ein sicheres Nur-HTTPS-Cookie und ein reguläres Cookie, auf das über JavaScript zugegriffen werden kann. Wenn sich ein Nutzer im Offlinemodus abmelden möchte, können Sie das JavaScript-Cookie löschen und, falls möglich, mit anderen Bereinigungen fortfahren. Wenn Sie einen Service Worker haben, können Sie auch die Background Fetch API verwenden, um eine Anfrage zum Löschen des Status auf dem Server später noch einmal zu senden, wenn der Nutzer online ist.

Speicherplatz freigeben

Entfernen Sie in der Antwort für die Seite, die den abgemeldeten Status bestätigt, sensible Daten aus verschiedenen Datenspeichern:

  • sessionStorage: Obwohl dieser Speicher gelöscht wird, wenn der Nutzer die Sitzung auf Ihrer Website beendet, sollten Sie sensible Daten proaktiv löschen, wenn sich der Nutzer abmeldet. So sind Sie auf der sicheren Seite, falls er vergisst, alle auf Ihrer Website geöffneten Tabs zu schließen.

    // Remove sensitive data from sessionStorage
sessionStorage.removeItem('sensitiveSessionData1');
// ...

// Or if everything in sessionStorage is sensitive, clear it all
sessionStorage.clear();

  • localStorage, indexedDB, Cache-/Service Worker-APIs: Wenn sich der Nutzer abmeldet, sollten Sie alle sensiblen Daten löschen, die Sie mit diesen APIs gespeichert haben, da solche Daten sitzungsübergreifend gespeichert werden.

    // Remove sensitive data from localStorage:
localStorage.removeItem('sensitiveData1');
// ...

// Or if everything in localStorage is sensitive, clear it all:
localStorage.clear();

    // Delete sensitive object stores in indexedDB:
const name = 'exampleDB';
const version = 1;
const request = indexedDB.open(name, version);

request.onsuccess = (event) => {
  const db = request.result;
  db.deleteObjectStore('sensitiveStore1');
  db.deleteObjectStore('sensitiveStore2');

  // ...

  db.close();
}

    // Delete sensitive resources stored with the Cache API:
caches.open('cacheV1').then((cache) => {
  await cache.delete("/personal/profile.png");

  // ...
}

// Or better yet, clear a cache bucket that contains sensitive resources:
caches.delete('personalizedV1');

Caches bereinigen

  • HTTP-Cache: Wenn Sie Cache-control: no-store für Ressourcen mit sensiblen Daten festlegen, werden im HTTP-Cache keine sensiblen Daten gespeichert.
  • Cache für Zurück/Vorwärts: Wenn Sie die Empfehlungen zu Cache-control: no-store und zum Löschen vertraulicher Cookies (z. B. sicherheitsrelevanter HTTPS-only-Cookies für die Authentifizierung) beim Abmelden von Nutzern befolgt haben, müssen Sie sich keine Sorgen machen, dass vertrauliche Daten im Cache für Zurück/Vorwärts gespeichert werden. Tatsächlich werden Seiten mit demselben Ursprung, die mit einem Cache-control: no-store-HTTP-Header bereitgestellt werden, aus dem Back-Forward-Cache entfernt, wenn eines oder mehrere der folgenden Signale beobachtet werden:
    • Ein oder mehrere sichere Nur-HTTPS-Cookies wurden geändert oder gelöscht.
    • Eine oder mehrere Antworten für XHRs/fetch-Aufrufe, die von der Seite ausgegeben wurden, enthielten den HTTP-Header Cache-control: no-store.

Einheitliche Nutzererfahrung auf allen Tabs

Möglicherweise haben Ihre Nutzer viele Tabs für Ihre Website geöffnet, bevor sie sich abgemeldet haben. Bis dahin haben sie möglicherweise andere Tabs oder sogar andere Browserfenster vergessen. Es ist am besten, sich nicht darauf zu verlassen, dass Ihre Nutzer alle relevanten Tabs und Fenster schließen. Sorgen Sie stattdessen proaktiv dafür, dass der Anmeldestatus des Nutzers auf allen Tabs konsistent ist.

Anleitung

Wenn Sie einen einheitlichen Anmeldestatus auf allen Tabs erreichen möchten, sollten Sie eine Kombination aus pageshow-/pagehide-Ereignissen und der Broadcast Channel API verwenden.

  • pageshow-Ereignis: Prüfen Sie bei einem persistenten pageshow den Anmeldestatus des Nutzers und löschen Sie vertrauliche Daten oder sogar die gesamte Seite, wenn der Nutzer nicht mehr angemeldet ist. Das pageshow-Ereignis wird bevor die Seite zum ersten Mal gerendert wird, wenn sie aus einer Back-Forward-Navigation wiederhergestellt wird, ausgelöst. So können Sie die Seite durch die Überprüfung des Anmeldestatus auf einen nicht vertraulichen Status zurücksetzen.

    window.addEventListener('pageshow', (event) => {
  if (event.persisted && !document.cookie.match(/my-cookie)) {
    // The user has logged out.
    // Force a reload, or otherwise clear sensitive information right away.
    body.innerHTML = '';
    location.reload();
  }
});

  • Broadcast Channel API: Mit dieser API können Sie Änderungen des Anmeldestatus über Tabs und Fenster hinweg kommunizieren. Wenn der Nutzer abgemeldet ist, löschen Sie alle sensiblen Daten oder leiten Sie alternativ alle Tabs und Fenster mit sensiblen Daten auf eine Abmeldeseite weiter.

    // Upon logout, broadcast new login state so that other tabs can clean up too:
const bc = new BroadcastChannel('login-state');
bc.postMessage('logged out');

// [...]
const bc = new BroadcastChannel('login-state');
bc.onMessage = (msgevt) => {
  if (msgevt.data === 'logged out') {
    // Clean up, reload or navigate to the sign-out page.
    // ...
  }
}

Fazit

Wenn Sie die Anleitung in diesem Dokument befolgen, können Sie eine gute Abmelde-Nutzererfahrung gestalten, die unbeabsichtigte Abmeldungen verhindert und die personenbezogenen Daten des Nutzers schützt.