Co wpływa na wygodę wylogowywania się?

Kenji Baheux
Kenji Baheux

Gdy użytkownik wyloguje się z witryny, sygnalizuje w ten sposób, że nie chce już korzystać z personalizacji. Dlatego ważne jest, aby jak najściślej trzymać się modelu mentalnego użytkownika. Na przykład prawidłowe logowanie się powinno uwzględniać wszystkie karty, które użytkownik otworzył przed podjęciem decyzji o wylogowaniu.

Kluczem do wygodnej funkcji wylogowywania jest spójność wizualna i logiczna wrażeń użytkownika. Ten przewodnik zawiera konkretne wskazówki dotyczące tego, na co należy zwrócić uwagę i jak zapewnić użytkownikom wygodę podczas wylogowywania.

Najważniejsze kwestie

Podczas implementowania funkcji wylogowywania w witrynie zwróć uwagę na te aspekty, aby zapewnić płynny, bezpieczny i intuicyjny proces wylogowywania:

  • Jasne i spójny interfejs logowania się: umieść wyraźny i łatwo dostępny przycisk lub link do logowania się, który jest łatwo rozpoznawalny w całej witrynie. Unikaj używania niejednoznacznych etykiet i ukrywania funkcji wylogowywania w niejasnych menu, podstronach lub innych nieintuicyjnych miejscach.
  • Prośba o potwierdzenie: przed zakończeniem procesu wylogowywania się wprowadź prośbę o potwierdzenie. Może to pomóc uniknąć przypadkowego wylogowania i pozwolić użytkownikom na ponowne zastanowienie się, czy na pewno chcą się wylogować – na przykład jeśli zablokują urządzenie przy użyciu silnego hasła lub innego mechanizmu uwierzytelniania.
  • Zarządzanie wieloma kartami: jeśli użytkownik otworzy kilka stron z tej samej witryny na różnych kartach, upewnij się, że wylogowanie z jednej karty spowoduje również wylogowanie z innych otwartych kart tej witryny.
  • Przekierowanie na bezpieczną stronę docelową: po wylogowaniu przekieruj użytkownika na bezpieczną stronę docelową, która wyraźnie wskazuje, że nie jest już zalogowany. Unikaj przekierowywania użytkowników na strony zawierające jakiekolwiek informacje spersonalizowane. Sprawdź też, czy inne karty nie wskazują, że jesteś zalogowany. Upewnij się też, że nie tworzysz otwartego przekierowania, którego mogą używać atakujący.
  • Czyszczenie sesji: po wylogowaniu użytkownika należy całkowicie usunąć wszystkie poufne dane sesji, pliki cookie i pliki tymczasowe powiązane z jego sesją. Zapobiega to nieautoryzowanemu dostępowi do informacji o użytkownikach lub aktywności na koncie, a także uniemożliwia przeglądarce przywracanie stron zawierających informacje poufne z różnych pamięci podręcznych, w szczególności z pamięci podręcznej stanu strony internetowej.
  • Obsługa błędów i opinie: w razie problemów z wylogowywaniem wyświetlaj użytkownikom czytelne komunikaty o błędach lub opinie. Poinformuj ich o potencjalnych zagrożeniach bezpieczeństwa lub wycieku danych, jeśli proces wylogowania się nie powiedzie.
  • Ułatwienia dostępu: upewnij się, że mechanizm wylogowania 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 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, aby mieć pewność, że działa ona konsekwentnie i sprawnie.
  • Ciągły monitoring i aktualizacje: regularnie sprawdzaj proces wylogowywania pod kątem potencjalnych luk w zabezpieczeniach. Wprowadzaj aktualizacje i poprawki w odpowiednich terminach, aby rozwiązywać problemy.
  • Federacja tożsamości: jeśli użytkownik jest zalogowany przy użyciu tożsamości sfederowanej, sprawdź, czy wylogowanie się z dostawcy tożsamości jest obsługiwane i czy jest potrzebne. Jeśli dostawca tożsamości obsługuje logowanie automatyczne, zablokuj tę funkcję.

DO

  • Jeśli unieważnisz plik cookie na serwerze w ramach procesu wylogowywania (lub innych procesów odmowy dostępu), pamiętaj, aby usunąć plik cookie również z urządzenia użytkownika.
  • Usuń wszelkie dane poufne, które mogą być 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 trwałym miejscu przechowywania (np. na dysku). Podobnie wywołania XHR/fetch, które zwracają dane poufne, powinny też ustawiać nagłówek HTTP Cache-Control: no-store, aby zapobiec przechowywaniu w pamięci podręcznej.
  • Upewnij się, że wszystkie otwarte karty na urządzeniu użytkownika są aktualne i zgodnie z zarządzeniami na serwerze.

Czyszczenie danych wrażliwych po wylogowaniu

Po wylogowaniu się rozważ usunięcie efemerycznych i lokalnie przechowywanych danych poufnych. Skupienie się na danych wrażliwych jest podyktowane tym, że wyczyszczenie wszystkich danych znacznie pogorszyłoby wrażenia użytkownika, który może do nas wrócić. Jeśli na przykład usuniesz wszystkie dane przechowywane lokalnie, użytkownicy będą musieli ponownie zaakceptować prośby o zgodę na pliki cookie i przeprowadzić inne procesy tak, jakby nigdy wcześniej nie odwiedzili Twojej witryny.

Jak usunąć pliki cookie

W odpowiedzi na żądanie strony, które potwierdza stan wylogowania, dołącz nagłówki HTTP Set-Cookie, aby usunąć wszystkie pliki cookie powiązane z danymi wrażliwymi lub zawierające takie dane. Ustaw wartość expires na datę z dalekiej 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 wystarcza w przypadku ogólnych zastosowań, ale nie działa, gdy użytkownik pracuje offline. Aby śledzić stan zalogowania, możesz wymagać 2 plików cookie: jednego bezpiecznego pliku cookie tylko przez HTTPS i jednego zwykłego pliku cookie dostępnego za pomocą 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 wykonać inne operacje czyszczenia. Jeśli masz pracownika serwisowego, możesz też skorzystać z interfejsu Background Fetch API, aby ponownie wysłać żądanie wyczyszczenia stanu na serwerze, gdy użytkownik będzie online.

Jak zwolnić miejsce na dane

W odpowiedzi na stronę, która potwierdza wylogowanie, należy usunąć dane wrażliwe z różnych magazynów danych:

  • sessionStorage: chociaż te dane są usuwane, gdy użytkownik zakończy sesję w Twojej witrynie, rozważ proaktywne usuwanie danych wrażliwych, 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, Cache/Service Worker: gdy użytkownik się wyloguje, usuń wszystkie dane poufne, które zostały zapisane za pomocą tych interfejsów API, ponieważ mogą one być przechowywane w trakcie kolejnych sesji.

    // 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 dla zasobów z danymi poufnymi ustawisz wartość Cache-control: no-store, pamięć podręczna HTTP nie będzie przechowywać żadnych danych poufnych.
  • Pamięć podręczna wsteczna/wsteczna: jeśli postępujesz zgodnie z rekomendacjami dotyczącymi Cache-control: no-store i usuwania poufnych plików cookie (np. zabezpieczeń związanych z zabezpieczonymi plikami cookie tylko do HTTPS) po wylogowaniu użytkowników, nie musisz się martwić o to, że dane wrażliwe zostaną zachowane w pamięci podręcznej wstecznej/wstecznej. Funkcja pamięci podręcznej stanu strony internetowej usuwa strony z tego samego źródła, które są wyświetlane z nagłówkiem HTTP Cache-control: no-store, jeśli zauważy co najmniej jeden z tych sygnałów:
    • Zmieniono lub usunięto co najmniej 1 zabezpieczony plik cookie tylko do HTTPS.
    • Co najmniej 1 odpowiedź na wywołanie XHR/fetch, które zostało wysłane przez stronę, zawierała nagłówek HTTP Cache-control: no-store.

Spójne środowisko użytkownika na różnych kartach

Zanim użytkownicy zdecydują się na wylogowanie, mogą otworzyć wiele kart Twojej witryny. Wtedy mogą zapomnieć o innych kartach lub nawet innych oknach przeglądarki. Nie należy polegać na tym, że użytkownicy zamkną wszystkie odpowiednie karty i okna. Zamiast tego zachowaj proaktyczność i zadbaj o to, aby stan logowania użytkownika był spójny na wszystkich kartach.

Instrukcje

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

  • Zdarzenie pageshow: po zapisaniu pageshow sprawdź, czy użytkownik jest zalogowany, i usuń dane wrażliwe lub nawet całą stronę, jeśli użytkownik nie jest już zalogowany. Pamiętaj, że zdarzenie pageshow zostanie wywołane przed pierwszym wyrenderowaniem strony po przywróceniu z poprzedniej strony, co gwarantuje, że sprawdzenie stanu logowania pozwoli Ci zresetować stronę do stanu niekrytycznego.

    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 komunikowania zmian stanu logowania na różnych kartach i w różnych oknach. Jeśli użytkownik jest wylogowany, usuń wszystkie dane wrażliwe lub przekieruj użytkownika na stronę wylogowania we wszystkich kartach i 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

Dzięki wskazówkom zawartym w tym dokumencie możesz zaprojektować wygodne logowanie, które zapobiega niezamierzonemu wylogowaniu i chroni dane osobowe użytkownika.