Diese Seite wurde von der Cloud Translation API übersetzt.

Was macht eine gute Abmeldung aus?

Kenji Baheux

Abmelden

Wenn sich Nutzende von einer Website abmelden, teilen sie damit ihren Wunsch, die personalisierte User Experience vollständig zu verlassen. Daher ist es wichtig, das mentale Modell der Nutzenden so genau wie möglich einzuhalten. Beispielsweise sollten bei einer ordnungsgemäßen Abmeldung auch alle Tabs berücksichtigt werden, die der Nutzer möglicherweise vor der Abmeldung geöffnet hat.

Der Schlüssel zu einer guten Abmeldeerfahrung lässt sich zusammenfassen, indem die visuellen Aspekte und Statusaspekte der User Experience einheitlich sind. In diesem Leitfaden erhalten Sie konkrete Tipps dazu, worauf Sie achten sollten und wie Sie sich abmelden können.

Wichtige Überlegungen

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

Klare und konsistente Nutzererfahrung für die Abmeldung: Stellen Sie eine klare und einheitlich sichtbare Abmeldeschaltfläche oder einen Link bereit, die bzw. der auf der gesamten Website leicht zu finden und zugänglich ist. Vermeiden Sie mehrdeutige Labels und blenden Sie die Abmeldefunktion nicht in unverständlichen Menüs, Unterseiten oder an anderen nicht intuitiven Positionen aus.
Bestätigungsaufforderung: Implementieren Sie eine Bestätigungsaufforderung, bevor Sie den Abmeldevorgang abschließen. Dies kann dazu beitragen, dass Nutzer sich nicht versehentlich abmelden, und sie überdenken, ob sie sich wirklich abmelden müssen, z. B. wenn sie ihr Gerät mit einem starken Passwort oder einem anderen Authentifizierungsmechanismus sorgfältig sperren.
Mehrere Tabs verwalten: Wenn ein Nutzer mehrere Seiten derselben Website in verschiedenen Tabs geöffnet hat, müssen sich alle anderen geöffneten Tabs auf dieser Website ebenfalls durch die Abmeldung auf einem Tab aktualisieren.
Weiterleitung zu einer sicheren Landingpage: Leiten Sie den Nutzer nach der Abmeldung auf eine sichere Landingpage weiter, auf der deutlich erkennbar ist, dass er nicht mehr angemeldet ist. Leiten Sie Nutzer nicht auf Seiten mit personalisierten Informationen weiter. Achten Sie auch darauf, dass auf anderen Tabs nicht mehr der Anmeldestatus angezeigt wird. Achten Sie außerdem darauf, keine offene Weiterleitung einzurichten, von der Angreifer ausnutzen könnten.
Bereinigung von Sitzungen: Sobald sich ein Nutzer abgemeldet hat, werden alle vertraulichen Sitzungsdaten, Cookies und temporären Dateien, die mit seiner Sitzung verknüpft sind, vollständig entfernt. Dies verhindert den unbefugten Zugriff auf Nutzer- oder Kontoaktivitäten und verhindert, dass der Browser Seiten mit vertraulichen Informationen aus seinen verschiedenen Caches wiederhergestellt, insbesondere aus dem Back-Forward-Cache.
Fehlerbehandlung und Feedback: Geben Sie klare Fehlermeldungen oder Feedback für Nutzer, wenn beim Abmelden Probleme auftreten. Informieren Sie sie über potenzielle Sicherheitsrisiken oder Datenlecks, wenn die Abmeldung fehlschlägt.
Überlegungen zur Barrierefreiheit: Achten Sie darauf, dass die Abmeldefunktion für Nutzer mit Behinderungen zugänglich ist, einschließlich solcher, 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 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 erkannte 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 ebenfalls unterstützt wird und erforderlich ist. Wenn der Identitätsanbieter die automatische Anmeldung unterstützt, sollten Sie die automatische Anmeldung verhindern.

Empfohlene Vorgehensweisen

Wenn Sie ein Cookie auf dem Server im Rahmen der Abmeldung oder eines anderen Zugriffswiderrufs entwerten, müssen Sie das Cookie auch auf dem Gerät des Nutzers löschen.
Bereinigen Sie alle sensiblen Daten, die Sie auf dem Gerät des Nutzers gespeichert haben: Cookies, localStorage, sessionStorage, indexedDB, CacheStorage und alle anderen lokalen Datenspeicher.
Achte darauf, dass alle Ressourcen mit sensiblen Daten – 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 sollte bei XHRs/fetch-Aufrufen, die sensible Daten zurückgeben, der Cache-Control: no-store-HTTP-Header festgelegt werden, um Caching zu verhindern.
Prüfen Sie, ob bei allen geöffneten Tabs auf dem Gerät des Nutzers die aktuellen serverseitigen Zugriffswiderrufe vorgenommen wurden.

Sensible Daten nach dem Abmelden bereinigen

Nach der Abmeldung sollten Sie flüchtige und lokal gespeicherte sensible Daten löschen. Der Fokus auf sensible Daten liegt in der Tatsache, dass das Löschen aller Daten zu einer erheblich schlechteren User Experience führen würde, da der Benutzer sehr gut wiederkommen könnte. Wenn Sie beispielsweise alle lokal gespeicherten Daten löschen, müssen die Nutzer die Aufforderungen zur Cookie-Einwilligung noch einmal bestätigen und andere Prozesse durchlaufen, als hätten sie Ihre Website nie besucht.

Cookies bereinigen

Fügen Sie der Antwort für die Seite, die den Abmeldestatus bestätigt, Set-Cookie-HTTP-Header an, um alle Cookies zu löschen, die sich auf sensible Daten beziehen oder diese enthalten. Legen Sie für expires ein Datum in der Ferne fest und geben Sie als Wert 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

Während der oben beschriebene Ansatz für allgemeine Anwendungsfälle ausreicht, funktioniert er nicht, wenn der Nutzer offline arbeitet. Sie können die Verwendung von zwei Cookies in Betracht ziehen, um den Anmeldestatus zu erfassen: ein Nur-HTTPS-Cookie und ein reguläres Cookie, auf das über JavaScript zugegriffen werden kann. Wenn der Nutzer versucht, sich offline abzumelden, können Sie das JavaScript-Cookie löschen und nach Möglichkeit mit anderen Bereinigungsvorgängen fortfahren. Wenn Sie einen Service Worker haben, können Sie die Background Fetch API nutzen, um eine Anfrage zum Löschen des Serverstatus zu wiederholen, wenn der Nutzer später online ist.

Speicherplatz freigeben

Achten Sie in der Antwort für die Seite, die den Status „Abgemeldet“ bestätigt, darauf, sensible Daten aus verschiedenen Datenspeichern zu bereinigen:

sessionStorage: Dieser Wert wird gelöscht, wenn der Nutzer seine Sitzung auf Ihrer Website beendet. Sie sollten jedoch sensible Daten proaktiv bereinigen, wenn sich der Nutzer 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, sollten Sie alle sensiblen Daten bereinigen, die Sie mithilfe dieser APIs gespeichert haben, da diese über mehrere Sitzungen hinweg bestehen 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 für Ressourcen mit sensiblen Daten Cache-control: no-store festlegen, werden keine sensiblen Daten im HTTP-Cache gespeichert.
Back-Forward-Cache: Wenn Sie bei der Nutzerabmeldung die Empfehlungen zu Cache-control: no-store und zum Löschen sensibler Cookies (z. B. Authentifizierungsbezogene sichere HTTPS-Cookies) befolgt haben, müssen Sie sich ebenfalls keine Gedanken darüber machen, dass sensible Daten im Back-Forward-Cache gespeichert werden. Tatsächlich werden durch die Funktion „Back-Forward-Cache“ Seiten mit demselben Ursprung entfernt, die mit einem Cache-control: no-store-HTTP-Header bereitgestellt werden, wenn eines oder mehrere der folgenden Signale erkannt werden: <ph type="x-smartling-placeholder">
- 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 wurden, enthielten den HTTP-Header Cache-control: no-store.

Einheitliche Tab-Nutzung

Ihre Nutzer haben möglicherweise 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. Sie sollten sich nicht darauf verlassen, dass Ihre Nutzer alle relevanten Tabs und Fenster schließen. Handeln Sie stattdessen proaktiv, indem Sie sicherstellen, dass der Anmeldestatus des Nutzers auf allen Tabs konsistent 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: Prüfen Sie bei einer anhaltenden pageshow den Anmeldestatus des Nutzers und löschen Sie sensible Daten – oder sogar die gesamte Seite –, wenn der Nutzer nicht mehr angemeldet ist. Das pageshow-Ereignis wird ausgelöst, bevor die Seite zum ersten Mal gerendert wird, nachdem sie über eine Zurück-/Vorwärtsnavigation wiederhergestellt wurde. Dadurch wird sichergestellt, dass du durch die Prüfung des Anmeldestatus die Seite in einen nicht vertraulichen Zustand zurücksetzen kannst.
```
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 in allen Tabs und Fenstern 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 Anleitungen in diesem Dokument befolgen, können Sie die Abmeldung so gestalten, dass eine unbeabsichtigte Abmeldung verhindert und die personenbezogenen Daten der Nutzer geschützt werden.