Co wpływa na wygodę wylogowywania się?

Kenji Baheux
Kenji Baheux

Wylogowywanie się

Gdy użytkownik wylogowuje się z witryny, wyraża chęć całkowitego wycofania się ze spersonalizowanych treści. Dlatego ważne jest, aby ściśle przestrzegać modelu psychicznego użytkownika. Na przykład podczas procesu wylogowywania należy uwzględnić karty, które użytkownik mógł otworzyć, zanim się wylogował.

Kluczem do udanego wylogowania się jest zapewnienie spójności wizualnych i stanowych elementów interfejsu. Ten przewodnik zawiera konkretne porady na temat tego, na co zwrócić uwagę i jak zapewnić udane wylogowanie.

Najważniejsze kwestie

Implementując funkcję wylogowywania się w swojej witrynie, zwróć uwagę na te aspekty, aby zapewnić jej sprawny, bezpieczny i intuicyjny proces wylogowywania:

  • Jasny i spójny interfejs związany z wylogowywaniem się: zadbaj o spójny i wyraźny przycisk, z którym można się wylogować, i zadbaj o to, aby użytkownicy mogli łatwo go wylogować i mieli do nich dostęp w różnych miejscach w witrynie. Unikaj używania niejednoznacznych etykiet i ukrywania funkcji wylogowania w niejasnych menu, podstronach lub w innych nieintuicyjnych miejscach.
  • Prośba o potwierdzenie: przed zakończeniem procesu wylogowywania wprowadź prośbę o potwierdzenie. Może to zapobiec przypadkowemu wylogowaniu się użytkownika i zastanowić się nad ponowną próbą, jeśli naprawdę muszą się wylogować – na przykład jeśli ostrożnie zablokują swoje urządzenie silnym hasłem lub przy użyciu innego mechanizmu uwierzytelniania.
  • Obsługa wielu kart: jeśli użytkownik otworzył kilka stron tej samej witryny na różnych kartach, pamiętaj, by wylogować się z jednej karty i zaktualizować wszystkie pozostałe karty w tej witrynie.
  • Przekieruj użytkownika na bezpieczną stronę docelową: po wylogowaniu się przekieruj użytkownika na bezpieczną stronę docelową, która wyraźnie wskazuje, że nie jest już zalogowany. Nie przekierowuj użytkowników na strony, które zawierają jakiekolwiek spersonalizowane informacje. Upewnij się też, że stan zalogowania na innych kartach nie jest już sygnalizowany. Upewnij się też, że nie tworzysz otwartego przekierowania, które może wykorzystać atakujący.
  • Czyszczenie sesji: gdy użytkownik się wyloguje, usuń wszystkie poufne dane jego sesji, pliki cookie i pliki tymczasowe powiązane z jego sesją. Zapobiega to nieautoryzowanemu dostępowi do informacji o użytkowniku lub aktywności na koncie, a także uniemożliwia przeglądarce przywracanie stron zawierających informacje poufne z różnych jej pamięci podręcznych, a zwłaszcza pamięci podręcznej stanu strony internetowej.
  • Obsługa błędów i przesyłanie opinii: wyświetlaj użytkownikom zrozumiałe komunikaty o błędach oraz informacje zwrotne, jeśli przy wylogowywaniu się pojawią się problemy. Poinformuj użytkownika o ewentualnych zagrożeniach bezpieczeństwa lub wycieku danych, jeśli proces wylogowania się nie powiedzie.
  • Ułatwienia dostępu: zadbaj o to, aby osoby niepełnosprawne mogły korzystać z mechanizmu wylogowania się, w tym osób korzystających z technologii wspomagających, takich jak czytniki ekranu czy nawigacja za pomocą klawiatury.
  • Zgodność z różnymi przeglądarkami: przetestuj funkcję wylogowywania w różnych przeglądarkach i na różnych urządzeniach, by upewnić się, że działa ona spójnie i niezawodnie.
  • Ciągłe monitorowanie i aktualizacje: regularnie sprawdzaj proces wylogowywania pod kątem potencjalnych luk w zabezpieczeniach i luk w zabezpieczeniach. Wdrażanie szybkich aktualizacji i poprawek, które pozwolą rozwiązać wykryte problemy.
  • Federacja tożsamości: jeśli użytkownik jest zalogowany przy użyciu tożsamości sfederowanej, sprawdź, czy wylogowanie się u dostawcy tożsamości również jest obsługiwane i wymagane. Jeśli dostawca tożsamości obsługuje logowanie automatyczne, nie zapomnij zablokować tej funkcji.

CO NALEŻY ROBIĆ

  • Jeśli plik cookie na serwerze zostanie unieważniony w ramach procesu wylogowywania (lub innego procesu anulowania dostępu), pamiętaj, aby usunąć plik cookie także z urządzenia użytkownika.
  • Usuń wszystkie dane wrażliwe zapisane na urządzeniu użytkownika: pliki cookie, localStorage, sessionStorage, indexedDB, CacheStorage i wszystkie inne lokalne magazyny danych.
  • Upewnij się, że wszelkie zasoby zawierające dane wrażliwe, a w szczególności dokumenty HTML, są zwracane z nagłówkiem HTTP Cache-control: no-store. Dzięki temu przeglądarka nie będzie przechowywać tych zasobów w pamięci trwałej (na przykład na dysku). Podobnie wywołania XHR/fetch, które zwracają dane wrażliwe, również powinny ustawić nagłówek HTTP Cache-Control: no-store, aby zapobiegać buforowaniu.
  • Upewnij się, że wszystkie otwarte karty na urządzeniu użytkownika są aktualne z informacjami o unieważnieniach dostępu po stronie serwera.

Czyszczenie danych wrażliwych po wylogowaniu

Po wylogowaniu się warto wyczyścić dane efemeryczne i dane wrażliwe przechowywane lokalnie. Nacisk na dane wrażliwe wynika z faktu, że wyczyszczenie wszystkich danych znacznie pogorszyłoby wrażenia użytkownika, ponieważ taki użytkownik może bardzo często do niego wrócić. Jeśli na przykład chcesz usunąć wszystkie dane przechowywane lokalnie, użytkownicy będą musieli ponownie potwierdzić prośby o zgodę na stosowanie plików cookie i przejść inne procesy, tak jakby nigdy nie odwiedzili Twojej witryny.

Jak wyczyścić pliki cookie

Do odpowiedzi wyświetlanej na stronie, która potwierdza stan wylogowania, dołącz nagłówki HTTP Set-Cookie, aby usunąć wszystkie pliki cookie, które są powiązane z danymi poufnymi lub je zawierają. Ustaw wartość expires na datę z odległej przeszłości, a jako wartość w pliku cookie ustaw 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

Powyższe podejście jest wystarczające w ogólnych przypadkach użycia, ale nie działa, gdy użytkownik pracuje w trybie offline. Rozważ zastosowanie dwóch plików cookie do śledzenia stanu zalogowania: jednego bezpiecznego pliku cookie dostępnego tylko za pomocą protokołu HTTPS i dwóch zwykłych plików cookie dostępnych przez JavaScript. Jeśli użytkownik próbuje się wylogować, będąc offline, możesz wyczyścić plik cookie JavaScript i w miarę możliwości wykonać inne operacje czyszczenia. Jeśli masz skrypt service worker, możesz też skorzystać z interfejsu Background Fetch API, aby wysłać żądanie wyczyszczenia stanu na serwerze, gdy użytkownik będzie później online.

Jak zwolnić miejsce na dane

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

  • sessionStorage: chociaż te informacje są usuwane, gdy użytkownik zakończy sesję w witrynie, rozważ proaktywne czyszczenie danych wrażliwych, gdy użytkownik się wyloguje, na wypadek, gdyby zapomniał zamknąć wszystkie karty otwarte w witrynie.

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

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

  • Interfejsy API localStorage, indexedDB, Cache/Service Worker: gdy użytkownik się wyloguje, wyczyść wszystkie dane wrażliwe, które mogły być przechowywane przy użyciu tych interfejsów API, ponieważ takie dane będą nadal 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 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');

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

  • Pamięć podręczna HTTP: dopóki ustawisz Cache-control: no-store dla zasobów z danymi wrażliwymi, w pamięci podręcznej HTTP nie będzie żadnych istotnych danych.
  • Pamięć podręczna stanu strony internetowej: jeśli po wylogowaniu się użytkownika postąpiło zgodnie z zaleceniami dotyczącymi Cache-control: no-store i czyszczenia poufnych plików cookie (np. związanych z uwierzytelnianiem bezpiecznych plików cookie tylko HTTPS), nie musisz się martwić, że poufne dane będą przechowywane w pamięci podręcznej stanu strony internetowej. 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 korzystający tylko z protokołu HTTPS został zmodyfikowany lub usunięty.
    • Co najmniej 1 odpowiedź na wywołania XHR/fetch wydane przez stronę zawierała nagłówek HTTP Cache-control: no-store.

Spójny interfejs korzystania z różnych kart

Użytkownicy mogą otwierać w Twojej witrynie wiele kart, zanim podejmą decyzję o wylogowaniu się. Może wtedy zapomnieć o innych kartach lub nawet oknach przeglądarki. Unikaj sytuacji, gdy użytkownicy zamykają wszystkie powiązane karty i okna. Zamiast tego zajmij się tym proaktywnie, upewniając się, że stan logowania użytkownika jest taki sam na wszystkich kartach.

Instrukcje

Aby zachować spójny stan logowania na wszystkich kartach, rozważ zastosowanie kombinacji zdarzeń pageshow/pagehide oraz interfejsu Broadcast Channel API.

  • Zdarzenie pageshow: w przypadku utrwalenia pageshow sprawdź stan logowania użytkownika i wyczyść dane wrażliwe – lub nawet całą stronę – jeśli użytkownik nie jest już zalogowany. Pamiętaj, że zdarzenie pageshow zostanie wyzwolone przed pierwszym wyrenderowaniem strony po przywróceniu z poziomu nawigacji wstecz/do przodu. Gwarantuje to, że sprawdzenie stanu logowania pozwoli Ci zresetować stronę do stanu, który nie jest drażliwy.

    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();
  }
});

  • Interfejs Broadcast Channel API – służy do informowania o zmianach stanu logowania w kartach i oknach. Jeśli użytkownik jest wylogowany, wyczyść wszystkie dane wrażliwe lub ustaw przekierowanie na stronę wylogowania we wszystkich kartach i oknach z danymi poufnymi.

    // 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 ze wskazówkami w tym dokumencie, możesz zaprojektować wspaniały interfejs dla użytkowników wylogowanych, który zapobiega niezamierzonym wylogowaniem i chroni dane osobowe użytkowników.