Co wpływa na wygodę wylogowywania się?

Kenji Baheux
Kenji Baheux

Gdy użytkownik wylogowuje się ze strony, sygnalizuje, że chce całkowicie zrezygnować ze spersonalizowanych funkcji. Dlatego ważne jest, aby jak najdokładniej odzwierciedlać model mentalny użytkownika. Na przykład prawidłowe wylogowanie powinno uwzględniać karty, które użytkownik mógł otworzyć przed podjęciem decyzji o wylogowaniu.

Kluczem do zapewnienia użytkownikom pozytywnych wrażeń podczas wylogowywania jest zachowanie spójności pod względem wizualnym i stanu. Ten przewodnik zawiera konkretne porady dotyczące tego, na co należy zwrócić uwagę i jak zapewnić użytkownikom wygodę podczas wylogowywania.

Najważniejsze kwestie

Wdrażając funkcję wylogowywania w witrynie, zwróć uwagę na te aspekty, aby zapewnić płynny, bezpieczny i intuicyjny proces wylogowywania:

  • Jasny i spójny interfejs użytkownika do wylogowywania się: udostępnij wyraźny i stale widoczny przycisk lub link do wylogowywania się, który jest łatwo rozpoznawalny i dostępny w całej witrynie. Unikaj używania niejednoznacznych etykiet lub ukrywania funkcji wylogowywania w niejasnych menu, podstronach lub innych nieintuicyjnych miejscach.
  • Potwierdzenie: przed zakończeniem procesu wylogowywania wdróż potwierdzenie. Może to zapobiec przypadkowemu wylogowaniu się użytkowników i umożliwić im ponowne rozważenie, czy naprawdę muszą się wylogować – na przykład jeśli starannie blokują urządzenie silnym hasłem lub innym mechanizmem uwierzytelniania.
  • Obsługa wielu kart: jeśli użytkownik otworzył kilka stron z tej samej witryny na różnych kartach, upewnij się, że wylogowanie się z jednej karty powoduje aktualizację wszystkich innych otwartych kart z tej witryny.
  • Przekierowanie na bezpieczną stronę docelową: po wylogowaniu się użytkownika przekieruj go na bezpieczną stronę docelową, która wyraźnie wskazuje, że nie jest już zalogowany. Unikaj przekierowywania użytkowników na strony zawierające spersonalizowane informacje. Podobnie sprawdź, czy na innych kartach nie widać już stanu zalogowania. Upewnij się też, że nie tworzysz otwartego przekierowania, które mogą wykorzystać osoby atakujące.
  • Czyszczenie sesji: po wylogowaniu użytkownika całkowicie usuń wszystkie poufne dane sesji użytkownika, pliki cookie lub pliki tymczasowe powiązane z sesją użytkownika. Zapobiega to nieautoryzowanemu dostępowi do informacji o użytkowniku lub aktywności na koncie, a także uniemożliwia przeglądarce przywracanie stron z informacjami poufnymi z różnych pamięci podręcznych, w szczególności z pamięci podręcznej przycisków „Wstecz” i „Dalej”.
  • Obsługa błędów i informacje zwrotne: wyświetlaj użytkownikom jasne komunikaty o błędach lub informacje zwrotne, jeśli podczas wylogowywania wystąpią problemy. Jeśli proces wylogowywania się nie powiedzie, poinformuj użytkowników o potencjalnych zagrożeniach dla bezpieczeństwa lub wyciekach danych.
  • Ułatwienia dostępu: upewnij się, że mechanizm wylogowywania jest dostępny dla użytkowników z niepełnosprawnościami, w tym dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu lub nawigacja za pomocą klawiatury.
  • Zgodność z różnymi przeglądarkami: przetestuj funkcję wylogowywania w różnych przeglądarkach i na różnych urządzeniach, aby mieć pewność, że działa spójnie i niezawodnie.
  • Ciągłe monitorowanie i aktualizacje: regularnie monitoruj proces wylogowywania pod kątem potencjalnych luk w zabezpieczeniach. Wprowadzaj aktualizacje i poprawki na czas, aby rozwiązywać wykryte problemy.
  • Federacja tożsamości: jeśli użytkownik jest zalogowany przy użyciu tożsamości sfederowanej, sprawdź, czy wylogowanie się z usługi dostawcy tożsamości jest obsługiwane i potrzebne. Jeśli dostawca tożsamości obsługuje automatyczne logowanie, nie zapomnij zapobiec jego działaniu.

DO

  • Jeśli w ramach procesu wylogowywania (lub innych procesów unieważniania dostępu) unieważnisz plik cookie na serwerze, pamiętaj, aby usunąć go również z urządzenia użytkownika.
  • Usuń wszelkie dane wrażliwe, które mogły zostać zapisane na urządzeniu użytkownika: pliki cookie, localStorage, sessionStorage, indexedDB, CacheStorage i inne lokalne magazyny danych.
  • Upewnij się, że wszystkie zasoby zawierające dane wrażliwe, w szczególności dokumenty HTML, są zwracane z nagłówkiem HTTP Cache-control: no-store, aby przeglądarka nie przechowywała tych zasobów w pamięci trwałej (np. na dysku). Podobnie wywołania XHR/fetch, które zwracają dane wrażliwe, powinny też ustawiać nagłówek HTTP Cache-Control: no-store, aby zapobiec zapisywaniu w pamięci podręcznej.
  • Upewnij się, że wszystkie otwarte karty na urządzeniu użytkownika są aktualne w zakresie cofnięcia dostępu po stronie serwera.

Usuwanie danych wrażliwych po wylogowaniu

Po wylogowaniu rozważ wyczyszczenie efemerycznych i lokalnie przechowywanych danych wrażliwych. Skupienie się na danych wrażliwych wynika z faktu, że wyczyszczenie wszystkich danych spowodowałoby znacznie gorsze wrażenia użytkownika, ponieważ może on wrócić. Jeśli na przykład usuniesz wszystkie dane przechowywane lokalnie, użytkownicy będą musieli ponownie potwierdzić zgody na pliki cookie i przejść inne procesy tak, jakby nigdy wcześniej nie odwiedzili Twojej witryny.

Jak usunąć pliki cookie

W odpowiedzi dotyczącej strony, która potwierdza wylogowanie, dołącz nagłówki HTTP Set-Cookie, aby wyczyścić wszystkie pliki cookie powiązane z danymi wrażliwymi lub je zawierające. Ustaw wartość expires na datę w odległej przeszłości, a wartość pliku cookie na pusty ciąg znaków.

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
...

Scenariusz offline

Opisane powyżej podejście jest wystarczające w przypadku ogólnych zastosowań, ale nie działa, gdy użytkownik pracuje w trybie offline. Aby śledzić stan zalogowania, możesz wymagać 2 plików cookie: jednego bezpiecznego pliku cookie dostępnego tylko przez HTTPS i jednego zwykłego pliku cookie dostępnego przez JavaScript. Jeśli użytkownik próbuje się wylogować w trybie offline, możesz wyczyścić plik cookie JavaScript i w miarę możliwości przeprowadzić inne operacje czyszczenia. Jeśli masz service worker, możesz też skorzystać z interfejsu Background Fetch API, aby ponowić żądanie wyczyszczenia stanu na serwerze, gdy użytkownik będzie później online.

Jak zwolnić miejsce na dane

W odpowiedzi na stronie, która potwierdza stan wylogowania, usuń dane wrażliwe z różnych magazynów danych:

  • sessionStorage: chociaż jest on czyszczony, gdy użytkownik zakończy sesję w Twojej witrynie, warto aktywnie usuwać dane wrażliwe, gdy użytkownik się wyloguje, na wypadek gdyby zapomniał zamknąć wszystkie karty otwarte w Twojej witrynie.

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

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

  • localStorage, indexedDB, interfejsy API pamięci podręcznej/Service Worker: gdy użytkownik się wyloguje, usuń wszystkie dane wrażliwe, które mogły zostać zapisane za pomocą tych interfejsów API, ponieważ dane te są przechowywane między sesjami.

    // 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');

Jak wyczyścić pamięć podręczną

  • Pamięć podręczna HTTP: jeśli w przypadku zasobów zawierających dane wrażliwe ustawisz Cache-control: no-store, pamięć podręczna HTTP nie będzie przechowywać żadnych informacji wrażliwych.
  • Pamięć podręczna „wstecz/dalej”: jeśli zastosujesz się do zaleceń dotyczących Cache-control: no-store i czyszczenia poufnych plików cookie (np. bezpiecznych plików cookie HTTPS, które są związane z uwierzytelnianiem i dostępne tylko w tym protokole) po wylogowaniu się użytkowników, nie musisz się martwić, że poufne dane będą przechowywane w pamięci podręcznej „wstecz/dalej”. Funkcja pamięci podręcznej stanu strony internetowej usuwa strony z tej samej domeny wyświetlane z nagłówkiem HTTP Cache-control: no-store, jeśli wykryje co najmniej jeden z tych sygnałów:
    • Co najmniej 1 bezpieczny plik cookie, który może być używany tylko w przypadku połączeń HTTPS, został zmodyfikowany lub usunięty.
    • Co najmniej jedna odpowiedź na wywołania XHR/fetch wysłane przez stronę zawierała nagłówek HTTP Cache-control: no-store.

Spójność działania na różnych kartach

Użytkownicy mogli otworzyć wiele kart z Twoją witryną, zanim zdecydowali się wylogować. Do tego czasu mogą zapomnieć o innych kartach, a nawet o innych oknach przeglądarki. Najlepiej nie polegać na użytkownikach, że zamkną wszystkie odpowiednie karty i okna. Zamiast tego zadbaj o to, aby stan logowania użytkownika był spójny na wszystkich kartach.

Instrukcje

Aby uzyskać spójny stan zalogowania na wszystkich kartach, rozważ użycie kombinacji zdarzeń pageshow/pagehide i interfejsu Broadcast Channel API.

  • pageshow event: po utrwaleniu pageshow sprawdź stan logowania użytkownika i wyczyść dane wrażliwe lub nawet całą stronę, jeśli użytkownik nie jest już zalogowany. Zdarzenie pageshow zostanie wywołane przed pierwszym renderowaniem strony po przywróceniu jej z pamięci podręcznej stanu strony internetowej. Dzięki temu sprawdzenie stanu logowania umożliwi zresetowanie strony do stanu nieobejmującego informacji poufnych.

    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: użyj tego interfejsu API, aby przekazywać zmiany stanu logowania między kartami i oknami. Jeśli użytkownik jest wylogowany, usuń wszystkie dane wrażliwe lub przekieruj go na stronę wylogowania na wszystkich kartach i we wszystkich oknach zawierających dane wrażliwe.

    // 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.
    // ...
  }
}

Podsumowanie

Postępując zgodnie z wskazówkami zawartymi w tym dokumencie, możesz zaprojektować świetne środowisko wylogowywania, które zapobiega niezamierzonemu wylogowaniu i chroni dane osobowe użytkownika.