Was macht eine gute Abmeldung aus?

Kenji Baheux
Kenji Baheux

Abmelden

Wenn sich ein Nutzer von einer Website abmeldet, möchte er nicht mehr personalisierte Inhalte sehen. Daher ist es wichtig, dem mentalen Modell der Nutzer so genau wie möglich zu folgen. Bei einer ordnungsgemäßen Abmeldung sollten beispielsweise auch alle Tabs berücksichtigt werden, die der Nutzer geöffnet hatte, bevor er sich abgemeldet hat.

Der Schlüssel zu einer guten Abmeldung lässt sich in der Einheitlichkeit der visuellen und Statusaspekte der User Experience zusammenfassen. In diesem Leitfaden finden Sie konkrete Ratschläge dazu, worauf Sie achten sollten und wie Sie eine nutzerfreundliche Abmeldung erreichen.

Wichtige Überlegungen

Beachten Sie bei der Implementierung der Abmeldefunktion auf Ihrer Website die folgenden Aspekte, um einen reibungslosen, sicheren und intuitiven Abmeldevorgang zu ermöglichen:

  • Klare und einheitliche UX für die Abmeldung: Sorgen Sie für eine klare und gut sichtbare Schaltfläche oder einen gut erkennbaren Link zur Abmeldung, der auf der gesamten Website leicht zugänglich ist. Vermeiden Sie mehrdeutige Labels und verstecken Sie die Abmeldefunktion nicht in unübersichtlichen Menüs, Unterseiten oder anderen unintuitiven Bereichen.
  • Bestätigungsaufforderung: Implementieren Sie eine Bestätigungsaufforderung, bevor der Abmeldevorgang abgeschlossen wird. So können Nutzer verhindern, dass sie sich versehentlich abmelden, und noch einmal überlegen, ob sie sich wirklich abmelden müssen – z. B. wenn sie ihr Gerät 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 sich beim Abmelden in einem Tab auch in allen anderen geöffneten Tabs dieser Website abgemeldet werden.
  • Auf eine sichere Landingpage weiterleiten: Nach der Abmeldung wird der Nutzer auf eine sichere Landingpage weitergeleitet, auf der deutlich angezeigt wird, dass er nicht mehr angemeldet ist. Nutzer nicht auf Seiten mit personalisierten Informationen weiterleiten Achten Sie außerdem darauf, dass andere Tabs nicht mehr den Anmeldestatus anzeigen. Achten Sie außerdem darauf, dass Sie keine offene Weiterleitung erstellen, die Angreifer ausnutzen können.
  • Sitzungsbereinigung: Sobald sich ein Nutzer abgemeldet hat, müssen alle sensiblen Daten der Nutzersitzung, alle Cookies und alle temporären Dateien, die mit der Sitzung des Nutzers verknüpft sind, vollständig entfernt werden. Dadurch wird der unbefugte Zugriff auf Nutzerinformationen oder Kontoaktivitäten verhindert. Außerdem kann der Browser keine Seiten mit vertraulichen Informationen aus seinen verschiedenen Caches wiederherstellen, insbesondere nicht aus dem Back-/Forward-Cache.
  • Fehlerbehandlung und Feedback: Senden Sie Nutzern klare Fehlermeldungen oder Feedback, wenn beim Abmelden Probleme auftreten. Informieren Sie sie über potenzielle Sicherheitsrisiken oder Datenlecks, wenn die Abmeldung fehlschlägt.
  • Anforderungen an die Barrierefreiheit: Der Mechanismus zum Abmelden muss für Nutzer mit Behinderungen zugänglich sein, einschließlich Nutzer, die Hilfstechnologien wie Screenreader oder die Tastaturnavigation verwenden.
  • Browserübergreifende Kompatibilität: Testen Sie die Abmeldefunktion in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass sie einheitlich und zuverlässig funktioniert.
  • Kontinuierliche Überwachung und Updates: Überwachen Sie den Abmeldevorgang regelmäßig auf potenzielle Sicherheitslücken oder Sicherheitslücken. Implementieren Sie zeitnah Updates und Patches, um alle erkannten Probleme zu beheben.
  • Identitätsföderation: Wenn sich der Nutzer mit einer föderierten Identität angemeldet hat, prüfen Sie, ob auch die Abmeldung vom Identitätsanbieter unterstützt und erforderlich ist. Wenn der Identitätsanbieter die automatische Anmeldung unterstützt, deaktivieren Sie sie.

DOs

  • Wenn Sie ein Cookie auf dem Server im Rahmen einer Abmeldeabfolge oder eines anderen Ablaufs zum Widerrufen des Zugriffs ungültig machen, müssen Sie das Cookie auch auf dem Gerät des Nutzers löschen.
  • Bereinigen 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 mit vertraulichen Daten, insbesondere HTML-Dokumente, mit dem Cache-control: no-store-HTTP-Header zurückgegeben werden, damit der Browser diese Ressourcen nicht im dauerhaften Speicher (z. B. auf dem Laufwerk) speichert. Ebenso sollten XHR-/fetch-Aufrufe, die sensible Daten zurückgeben, den HTTP-Header Cache-Control: no-store festlegen, um das Caching zu verhindern.
  • Alle geöffneten Tabs auf dem Gerät des Nutzers müssen mit den serverseitigen Widerrufen des Zugriffs auf dem neuesten Stand sein.

Bereinigung sensibler Daten bei der Abmeldung

Wenn Sie sich abmelden, sollten Sie sitzungsspezifische und lokal gespeicherte sensible 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 dieser Nutzer sehr wohl wiederkommen könnte. Wenn Sie beispielsweise alle lokal gespeicherten Daten löschen, müssen Ihre Nutzer die Cookie-Einwilligungsaufforderungen noch einmal bestätigen und andere Prozesse durchlaufen, als hätten sie Ihre Website noch nie besucht.

Cookies bereinigen

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

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 aber nicht, wenn der Nutzer offline arbeitet. Sie sollten erwägen, zwei Cookies für die Verfolgung des Anmeldestatus zu verwenden: ein sicheres Nur-HTTPS-Cookie und ein normales Cookie, auf das über JavaScript zugegriffen werden kann. Wenn der Nutzer versucht, sich im Offlinemodus abzumelden, können Sie das JavaScript-Cookie löschen und gegebenenfalls mit anderen Bereinigungsvorgängen fortfahren. Wenn Sie einen Dienst-Worker haben, können Sie auch die Background Fetch API verwenden, um eine Anfrage zum Löschen des Status auf dem Server zu wiederholen, wenn der Nutzer später online ist.

Speicherplatz freigeben

Achten Sie bei der Antwort für die Seite, auf der der abgemeldete Status bestätigt wird, darauf, sensible Daten aus verschiedenen Datenspeichern zu entfernen:

  • sessionStorage: Dieser Speicher wird gelöscht, wenn der Nutzer die Sitzung auf Ihrer Website beendet. Sie sollten jedoch sensible Daten proaktiv löschen, wenn sich der Nutzer abmeldet, für den Fall, dass 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, bereinigen Sie alle vertraulichen Daten, die Sie möglicherweise mithilfe dieser APIs gespeichert haben, da diese Daten über mehrere Sitzungen hinweg gespeichert bleiben.

    // 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 via 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: Solange Sie Cache-control: no-store für Ressourcen mit sensiblen Daten festlegen, werden im HTTP-Cache keine sensiblen Daten gespeichert.
  • Back-/Forward-Cache: Wenn Sie die Empfehlungen zu Cache-control: no-store und zum Löschen sensibler Cookies (z. B. authentifizierungsbezogener sicherer HTTPS-Cookies) beim Abmelden von Nutzern befolgt haben, müssen Sie sich keine Sorgen machen, dass sensible Daten im Back-/Forward-Cache 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 erkannt werden:
    • Mindestens ein sicheres Nur-HTTPS-Cookie wurde geändert oder gelöscht.
    • Eine oder mehrere Antworten auf XHR-/fetch-Aufrufe, die von der Seite gesendet wurden, enthielten den Cache-control: no-store-HTTP-Header.

Einheitliche Nutzererfahrung auf allen Tabs

Ihre Nutzer haben möglicherweise viele Tabs für Ihre Website geöffnet, bevor sie sich abgemeldet haben. Bis dahin hat er möglicherweise andere Tabs oder sogar andere Browserfenster vergessen. Sie sollten nicht darauf vertrauen, dass Ihre Nutzer alle relevanten Tabs und Fenster schließen. Gehen Sie stattdessen proaktiv vor und sorgen Sie dafür, dass der Anmeldestatus des Nutzers auf allen Tabs gleich ist.

Anleitung

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

  • pageshow-Ereignis: Bei einem gespeicherten pageshow wird der Anmeldestatus des Nutzers geprüft und vertrauliche Daten oder sogar die gesamte Seite gelöscht, wenn der Nutzer nicht mehr angemeldet ist. Das Ereignis pageshow wird bevor die Seite nach der Wiederherstellung aus einer Back-/Forward-Navigation zum ersten Mal gerendert wird. So können Sie mithilfe der Prüfung des Anmeldestatus die Seite in einen nicht sensiblen 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 auf allen Tabs und in allen Fenstern mit sensiblen Daten zu einer 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 den in diesem Dokument beschriebenen Richtlinien folgen, können Sie eine nutzerfreundliche Abmeldung entwerfen, die unbeabsichtigte Abmeldungen verhindert und die personenbezogenen Daten der Nutzer schützt.