Co wpływa na wygodę wylogowywania się?

Kenji Baheux
Kenji Baheux

Wylogowywanie się

Gdy użytkownik wylogowuje się z witryny, informuje go, że chce całkowicie zrezygnować ze spersonalizowanej obsługi. Dlatego ważne jest, aby jak najwierniej stosować się do modelu myślowego użytkownika. Na przykład prawidłowy proces wylogowywania powinien uwzględniać wszystkie karty, które użytkownik mógł otworzyć, zanim się wyloguje.

Kluczem do udanego wylogowywania się użytkowników jest spójność elementów wizualnych i informacyjnych pod względem wygody użytkowników. Ten przewodnik zawiera konkretne porady na temat tego, na co należy uważać i jak wylogowywać się bez problemów.

Najważniejsze kwestie

Implementując w swojej witrynie funkcję wylogowywania, zwróć uwagę na poniższe kwestie, aby zapewnić płynny, bezpieczny i intuicyjny proces wylogowywania:

  • Jasny i spójny interfejs wylogowywania: zadbaj o to, aby przycisk lub link wylogowania był łatwo rozpoznawalny i dostępny w całej witrynie. Unikaj używania niejednoznacznych etykiet i ukrywania funkcji wylogowywania w nietuzinkowych menu, podstronach lub innych nieintuicyjnych miejscach.
  • Prośba o potwierdzenie: wdrażaj prośbę o potwierdzenie przed zakończeniem procesu wylogowywania. Zapobiega to przypadkowemu wylogowaniu się użytkowników i umożliwia im ponowne rozważenie, czy rzeczywiście muszą się wylogować – na przykład po to, aby starannie zablokować 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, wylogowanie się na jednej karcie spowoduje, że zaktualizują się również wszystkie pozostałe otwarte karty w danej witrynie.
  • Przekierowuj użytkownika na bezpieczną stronę docelową: gdy się wylogujesz, przekieruj użytkownika na bezpieczną stronę docelową, na której wyraźnie widać, że nie jest już zalogowany. Unikaj przekierowywania użytkowników na strony, które zawierają spersonalizowane informacje. Sprawdź też, czy inne karty nie pokazują stanu zalogowania. Upewnij się też, że nie tworzysz otwartego przekierowania, które mogłoby być wykorzystywane przez osoby przeprowadzające atak.
  • Czyszczenie sesji: gdy użytkownik się wyloguje, usuń wszystkie wrażliwe dane sesji użytkownika, 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 blokuje przeglądarce możliwość przywracania stron z poufnymi informacjami z różnych pamięci podręcznych, w szczególności z pamięci podręcznej stanu strony internetowej.
  • Postępowanie w przypadku błędów i przesyłanie informacji zwrotnych: przesyłaj jasne komunikaty o błędach i przesyłaj informacje zwrotne dla użytkowników, którzy napotkają problemy podczas wylogowywania się. Poinformuj go o wszystkich potencjalnych zagrożeniach bezpieczeństwa lub wycieku danych, jeśli proces wylogowania się nie powiedzie.
  • Uwagi o ułatwieniach dostępu: zadbaj o to, aby mechanizm wylogowywania był dostępny dla użytkowników z niepełnosprawnościami, w tym osób korzystających z technologii wspomagających osoby z niepełnosprawnością, takich jak czytniki ekranu czy nawigacja za pomocą klawiatury.
  • Zgodność z różnymi przeglądarkami: przetestuj funkcję wylogowywania się w różnych przeglądarkach i na różnych urządzeniach, aby się upewnić, że działa ona spójnie i niezawodnie.
  • Ciągłe monitorowanie i aktualizowanie danych: regularnie monitoruj proces wylogowywania się pod kątem potencjalnych luk w zabezpieczeniach i luk w zabezpieczeniach. Wdróż terminowe aktualizacje i poprawki, aby rozwiązać zidentyfikowane problemy.
  • Federacja tożsamości: jeśli użytkownik jest zalogowany przy użyciu tożsamości sfederowanej, sprawdź, czy wylogowanie się także od dostawcy tożsamości jest obsługiwane i wymagane. Jeśli dostawca tożsamości obsługuje logowanie automatyczne, możesz je uniemożliwić.

DZIAŁANIA ZALECANE

  • Jeśli unieważnisz plik cookie na serwerze w ramach procesu wylogowywania (lub innego procesu anulowania dostępu), pamiętaj, aby usunąć plik cookie także z urządzenia użytkownika.
  • Usuń wszelkie dane wrażliwe przechowywane 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 zapisywała tych zasobów w pamięci trwałej (na przykład na dysku). Podobnie wywołania XHR/fetch, które zwracają dane wrażliwe, powinny też ustawiać nagłówek HTTP Cache-Control: no-store, aby zapobiegać buforowaniu.
  • Sprawdź, czy wszystkie otwarte karty na urządzeniu użytkownika są aktualne i czy dostęp do danych został cofnięty po stronie serwera.

Czyszczę dane wrażliwe po wylogowaniu się

Gdy się wylogujesz, zastanów się nad wyczyszczeniem danych wrażliwych i przechowywanych lokalnie. Skupianie się na danych wrażliwych wynika z faktu, że wyczyszczenie wszystkich danych znacznie pogorszyłoby wrażenia użytkowników, ponieważ mogą oni bardzo szybko wrócić do witryny. Jeśli na przykład usuniesz wszystkie dane przechowywane lokalnie, użytkownicy będą musieli ponownie potwierdzić zgodę użytkowników na stosowanie plików cookie oraz przejść przez inne procesy tak, jakby nigdy nie odwiedzili Twojej witryny.

Jak wyczyścić pliki cookie

Do odpowiedzi strony potwierdzającej stan wylogowania dołącz nagłówki HTTP Set-Cookie, aby usunąć wszystkie pliki cookie powiązane z danymi poufnymi lub zawierające takie dane. Ustaw wartość expires na datę z odległej przeszłości, a w celu ułatwienia pomiaru dla wartości 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 rozmowy offline

Opisane powyżej podejście jest wystarczające w ogólnych przypadkach użycia, ale nie zadziała, jeśli użytkownik pracuje w trybie offline. Rozważ wprowadzenie 2 plików cookie służących do śledzenia stanu zalogowania: jednego bezpiecznego pliku cookie typu tylko HTTPS i jednego zwykłego pliku cookie dostępnego przez JavaScript. Jeśli użytkownik próbuje się wylogować w trybie offline, możesz usunąć plik cookie JavaScript i w miarę możliwości kontynuować inne operacje czyszczenia. Jeśli używasz skryptu service worker, możesz też użyć interfejsu Background Fetch API w celu ponawiania żądania wyczyszczenia stanu na serwerze, gdy użytkownik będzie online później.

Jak zwolnić miejsce na dane

W odpowiedzi na stronie z potwierdzeniem stanu wylogowania usuń dane wrażliwe z różnych magazynów danych:

  • sessionStorage: chociaż ten parametr jest wyczyszczony, gdy użytkownik kończy sesję korzystania z Twojej witryny, zastanów się nad aktywnym wyczyszczeniem danych wrażliwych, gdy użytkownik się wyloguje, na wypadek, gdyby zapomniał zamknąć wszystkie otwarte w witrynie karty.

    // 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, oczyść wszystkie dane wrażliwe przechowywane za pomocą tych interfejsów API, ponieważ te dane pozostaną dostępne przez kolejne sesje.

    // 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: jeśli ustawisz Cache-control: no-store dla zasobów z danymi wrażliwymi, pamięć podręczna HTTP nie będzie przechowywać niczego poufnego.
  • Pamięć podręczna stanu strony internetowej: jeśli spełniasz zalecenia dotyczące Cache-control: no-store i usuwania poufnych plików cookie (na przykład bezpiecznych plików HTTPS przeznaczonych tylko do uwierzytelniania) podczas wylogowywania się użytkowników, nie musisz się martwić, że dane wrażliwe będą przechowywane w pamięci podręcznej stanu strony internetowej. Funkcja pamięci podręcznej stanu strony internetowej trwale usuwa strony z tej samej domeny, które są wyświetlane z nagłówkiem HTTP Cache-control: no-store, jeśli rejestruje co najmniej jeden z tych sygnałów:
    • Co najmniej jeden bezpieczny plik cookie używany tylko przez HTTPS został zmodyfikowany lub usunięty.
    • Co najmniej jedna odpowiedź na wywołanie XHR/fetch – wydana przez stronę – zawierała nagłówek HTTP Cache-control: no-store.

Spójność informacji na różnych kartach

Użytkownicy mogli otworzyć wiele kart witryny, zanim podjęli decyzję o wylogowaniu. Być może w tym czasie zapomniał już o innych kartach, a nawet o innych oknach przeglądarki. Pamiętaj, aby nie zmuszać użytkowników do zamknięcia wszystkich odpowiednich kart i okien. Zamiast tego działaj aktywnie, upewniając się, że stan logowania użytkownika jest taki sam na wszystkich kartach.

Instrukcje

Aby uzyskać spójny stan zalogowania na wszystkich kartach, rozważ połączenie zdarzeń pageshow/pagehide i interfejsu Broadcast Channel API.

  • Zdarzenie pageshow: po utrwaleniu adresu pageshow sprawdź stan logowania użytkownika i usuń poufne dane (lub nawet całą stronę), jeśli nie jest on już zalogowany. Pamiętaj, że zdarzenie pageshow zostanie wywołane przed pierwszym wyrenderowaniem strony po przywróceniu jej z nawigacji wstecz/do przodu. Gwarantuje to, że kontrola stanu logowania pozwoli Ci zresetować stronę do stanu niepoufnego.

    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 przekazywania informacji o zmianach stanu logowania w różnych kartach i oknach. Jeśli użytkownik jest wylogowany, wyczyść wszystkie dane wrażliwe lub na wszystkich kartach i oknach z danymi poufnymi przekieruj użytkownika na stronę wylogowywania.

    // 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 opracować świetne rozwiązanie, które zapobiega niezamierzonemu wylogowaniu i chroni dane osobowe użytkownika.