Was macht eine gute Abmeldung aus?

Baheux
Kenji Baheux

Abmelden

Wenn sich Nutzende von einer Website abmelden, kommunizieren sie ihren Wunsch, die personalisierte User Experience vollständig zu verlassen. Daher ist es wichtig, sich so nah wie möglich am mentalen Modell der Nutzenden zu orientieren. Beispielsweise sollten bei der Abmeldung auch alle Tabs berücksichtigt werden, die der Nutzer möglicherweise vor der Abmeldung geöffnet hat.

Das Entscheidende für eine gute Abmeldung ist die Einheitlichkeit bei allen visuellen und zustandsbezogenen Aspekten der User Experience. In diesem Leitfaden findest du konkrete Hinweise dazu, worauf du achten solltest und wie du die Abmeldung optimal gestalten kannst.

Wichtige Überlegungen

Achten Sie bei der Implementierung der Abmeldefunktion auf Ihrer Website auf die folgenden Aspekte, um eine reibungslose, sichere und intuitive Abmeldung zu gewährleisten:

  • Klare und einheitliche Nutzeroberfläche für die Abmeldung: Stellen Sie eine deutlich sichtbare Schaltfläche oder einen Link zum Abmelden bereit, der bzw. der auf der gesamten Website leicht erkennbar und zugänglich ist. Vermeiden Sie die Verwendung mehrdeutiger Labels oder das Ausblenden der Abmeldefunktion in unklaren Menüs, Unterseiten oder an anderen nicht intuitiven Stellen.
  • Bestätigungsaufforderung: Implementieren Sie eine Bestätigungsaufforderung, bevor Sie die Abmeldung abschließen. So wird verhindert, dass Nutzer sich versehentlich abmelden, und Nutzer können überdenken, 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.
  • Mit mehreren Tabs umgehen: Wenn ein Nutzer mehrere Seiten derselben Website auf verschiedenen Tabs geöffnet hat, werden beim Abmelden auf einem Tab auch alle anderen geöffneten Tabs dieser Website aktualisiert.
  • Auf eine sichere Landingpage weiterleiten: Nach der Abmeldung wird der Nutzer auf eine sichere Landingpage weitergeleitet, auf der deutlich angegeben ist, dass er nicht mehr angemeldet ist. Leiten Sie Nutzer nicht auf Seiten mit personalisierten Informationen weiter. Außerdem dürfen andere Tabs keinen Anmeldestatus mehr anzeigen. Achte außerdem darauf, keine offene Weiterleitung zu erstellen, die Angreifer ausnutzen könnten.
  • Sitzungsbereinigung: Nachdem ein Nutzer abgemeldet wurde, werden alle vertraulichen Sitzungsdaten, Cookies und temporären Dateien, die mit der Nutzersitzung verknüpft sind, vollständig entfernt. So wird der unbefugte Zugriff auf Nutzerinformationen oder Kontoaktivitäten verhindert und der Browser daran gehindert, Seiten mit vertraulichen Daten aus den verschiedenen Caches wiederherzustellen, insbesondere im Back-Forward-Cache.
  • Fehlerbehandlung und Feedback: Wenn es bei der Abmeldung zu Problemen kommt, senden Sie Nutzern eindeutige Fehlermeldungen oder Feedback. Informieren Sie ihn über potenzielle Sicherheitsrisiken oder Datenlecks, wenn die Abmeldung fehlschlägt.
  • Überlegungen zur Barrierefreiheit: Sorgen Sie dafür, dass der Abmeldemechanismus für Nutzer mit Beeinträchtigungen barrierefrei ist, einschließlich Personen, die Hilfstechnologien wie Screenreader oder die Tastaturnavigation verwenden.
  • Browserübergreifende Kompatibilität: Sie können die Abmeldefunktion in verschiedenen Browsern und auf unterschiedlichen Geräten testen, um sicherzustellen, dass sie konsistent und zuverlässig funktioniert.
  • Kontinuierliche Überwachung und Updates: Überwachen Sie den Abmeldevorgang regelmäßig auf potenzielle Sicherheitslücken oder Sicherheitslücken. Implementieren Sie rechtzeitige Updates und Patches, um erkannte Probleme zu beheben.
  • Identitätsföderation: Wenn der Nutzer mit einer föderierten Identität angemeldet ist, prüfen Sie, ob auch die Abmeldung vom Identitätsanbieter unterstützt und erforderlich ist. Wenn der Identitätsanbieter die automatische Anmeldung unterstützt, sollten Sie sie verhindern.

Empfohlene Vorgehensweisen

  • Wenn Sie ein Cookie auf dem Server beim Abmelden oder bei einem anderen Ablauf zum Widerrufen des Zugriffs entwerten, achten Sie darauf, das Cookie auch auf dem Gerät des Nutzers zu löschen.
  • Entfernen Sie alle sensiblen Daten, die Sie 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 sensible Daten enthalten, insbesondere HTML-Dokumente, mit dem HTTP-Header Cache-control: no-store zurückgegeben werden, damit der Browser diese Ressourcen nicht dauerhaft speichert (z. B. auf einem Laufwerk). Ebenso sollten XHRs/fetch-Aufrufe, die sensible Daten zurückgeben, den Cache-Control: no-store-HTTP-Header festlegen, um Caching zu verhindern.
  • Achten Sie darauf, dass alle geöffneten Tabs auf dem Gerät des Nutzers die aktuellste Version der serverseitigen Sperrung des Zugriffs sind.

Sensible Daten nach der Abmeldung bereinigen

Nach dem Abmelden sollten Sie sitzungsspezifische und lokal gespeicherte sensible Daten löschen. Der Fokus auf sensible Daten liegt darin, dass das Löschen aller Daten zu einer erheblich schlechteren User Experience führen würde, da diese Nutzenden später möglicherweise wiederkommen werden. Wenn Sie beispielsweise alle lokal gespeicherten Daten löschen, müssen Ihre Nutzer die Aufforderungen zur Cookie-Einwilligung noch einmal bestätigen und andere Prozesse durchlaufen, so als hätten sie Ihre Website nie zuvor besucht.

Cookies bereinigen

Hängen Sie in der Antwort für die Seite, die den Status der Abmeldung bestätigt, Set-Cookie-HTTP-Header an, um alle Cookies zu löschen, die mit sensiblen Daten zusammenhängen oder diese enthalten. Legen Sie für expires ein Datum in der Zukunft fest und geben Sie für das Cookie einen leeren String an.

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

Die oben beschriebene Methode ist für allgemeine Anwendungsfälle ausreichend, funktioniert jedoch nicht, wenn der Nutzer offline arbeitet. Sie können festlegen, dass zwei Cookies erforderlich sind, um den Anmeldestatus zu erfassen: ein sicheres reines HTTPS-Cookie und ein reguläres Cookie, auf das über JavaScript zugegriffen werden kann. Wenn Ihr Nutzer versucht, sich offline abzumelden, können Sie das JavaScript-Cookie löschen und nach Möglichkeit andere Bereinigungsschritte ausführen. Wenn Sie einen Service Worker haben, können Sie auch die Background Fetch API nutzen, um eine Anfrage zum Löschen des Status vom Server zu wiederholen, wenn der Nutzer später online ist.

Speicherplatz freigeben

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

  • sessionStorage: Obwohl dies gelöscht wird, wenn der Nutzer die Sitzung mit Ihrer Website beendet, sollten Sie sensible Daten proaktiv löschen, wenn er sich abmeldet – für den Fall, dass er vergisst, alle geöffneten Tabs auf Ihrer Website 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 sensiblen Daten, die Sie mit diesen APIs gespeichert haben, da diese Daten über mehrere Sitzungen hinweg erhalten 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, speichert der HTTP-Cache keine sensiblen Daten.
  • Back-Forward-Cache: Wenn Sie die Empfehlungen zu Cache-control: no-store und zum Löschen vertraulicher Cookies (z. B. authentifizierungsbezogene sichere Nur-HTTPS-Cookies) befolgt haben, wenn sich Nutzer abmelden, brauchen Sie sich keine Gedanken darüber zu machen, dass sensible Daten im Back-Forward-Cache gespeichert werden. Die Back-Forward-Cache-Funktion entfernt Same-Origin-Seiten, die mit einem Cache-control: no-store-HTTP-Header bereitgestellt werden, 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 für XHRs/fetch-Aufrufe, die von der Seite ausgegeben werden, enthalten den Cache-control: no-store-HTTP-Header.

Einheitliche Nutzererfahrung über alle Tabs hinweg

Möglicherweise haben Ihre Nutzer viele Tabs Ihrer Website geöffnet, bevor sie sich abgemeldet haben. Bis dahin haben sie möglicherweise andere Tabs oder sogar andere Browserfenster vergessen. Sie sollten sich nicht darauf verlassen, dass Ihre Nutzer alle relevanten Tabs und Fenster schließen. Betreten Sie stattdessen eine proaktive Stellung, indem Sie dafür sorgen, dass der Anmeldestatus des Nutzers auf allen Tabs einheitlich ist.

Anleitung

Um auf allen Tabs einen einheitlichen Anmeldestatus zu erreichen, solltest du eine Kombination aus pageshow/pagehide-Ereignissen und der Broadcast Channel API verwenden.

  • pageshow-Ereignis: Bei dauerhaftem pageshow wird der Anmeldestatus des Nutzers geprüft. Falls der Nutzer nicht mehr angemeldet ist, werden sensible Daten oder sogar die gesamte Seite gelöscht. Beachten Sie, dass das pageshow-Ereignis ausgelöst wird, bevor die Seite zum ersten Mal gerendert wird, wenn sie über eine Zurück-/Vorwärts-Navigation wiederhergestellt wird. So ist sichergestellt, dass Sie bei der Prüfung des Anmeldestatus die Seite auf einen nicht sensiblen Status zurücksetzen können.

    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 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 die Anweisungen in diesem Dokument befolgen, können Sie eine optimale Abmeldefunktion schaffen, die unbeabsichtigte Abmeldungen verhindert und die personenbezogenen Daten des Nutzers schützt.