Cosa favorisce una buona esperienza di uscita?

Kenji Baheux

Quando un utente esce da un sito web, comunica la sua necessità di uscire completamente da un'esperienza utente personalizzata. Pertanto, è importante attenersi il più possibile al modello mentale dell'utente. Ad esempio, un'esperienza di disconnessione corretta deve tenere conto anche di tutte le schede che l'utente potrebbe aver aperto prima di decidere di disconnettersi.

La chiave per un'ottima esperienza di disconnessione può essere riassunta nella coerenza tra gli aspetti visivi e di stato dell'esperienza utente. Questa guida fornisce consigli concreti su cosa prestare attenzione e su come ottenere una buona esperienza di disconnessione.

Considerazioni principali

Quando implementi la funzionalità di disconnessione sul tuo sito web, presta attenzione ai seguenti aspetti per garantire una procedura di disconnessione semplice, sicura e intuitiva:

• UX di disconnessione chiara e coerente: fornisci un pulsante o un link di disconnessione chiaro e sempre visibile, facilmente identificabile e accessibile in tutto il sito web. Evita di utilizzare etichette ambigue o di nascondere la funzionalità di disconnessione in menu, sottopagine o altre posizioni poco intuitive.
• Richiesta di conferma: implementa una richiesta di conferma prima di finalizzare la procedura di disconnessione. In questo modo, gli utenti non si disconnetteranno per errore e potranno ripensarci se hanno davvero bisogno di disconnettersi, ad esempio se bloccano diligentemente il dispositivo con una password complessa o un altro meccanismo di autenticazione.
• Gestire più schede: se un utente ha aperto più pagine dello stesso sito web in schede diverse, assicurati che la disconnessione da una scheda aggiorni anche tutte le altre schede aperte dello stesso sito web.
• Reindirizzamento a una pagina di destinazione sicura: dopo la disconnessione, reindirizza l'utente a una pagina di destinazione sicura che indichi chiaramente che non ha più eseguito l'accesso. Evita di reindirizzare gli utenti a pagine con informazioni personalizzate. Allo stesso modo, assicurati che anche le altre schede non riflettano più uno stato di accesso. Inoltre, assicurati di non creare un reindirizzamento aperto che gli autori degli attacchi possono sfruttare.
• Pulizia della sessione: una volta che un utente ha eseguito la disconnessione, rimuovi completamente tutti i dati sensibili della sessione utente, i cookie o i file temporanei associati alla sessione dell'utente. In questo modo si impedisce l'accesso non autorizzato alle informazioni utente o all'attività dell'account e si impedisce al browser di ripristinare le pagine con informazioni sensibili dalle varie cache, in particolare dalla cache indietro/avanti.
• Gestione degli errori e feedback: fornisci messaggi di errore o feedback chiari agli utenti in caso di problemi durante la disconnessione. Informali di eventuali potenziali rischi per la sicurezza o fughe di dati se il processo di disconnessione non va a buon fine.
• Considerazioni sull'accessibilità: assicurati che il meccanismo di disconnessione sia accessibile agli utenti con disabilità, inclusi quelli che utilizzano tecnologie per la disabilità come screen reader o navigazione da tastiera.
• Compatibilità cross-browser: testa la funzionalità di disconnessione su diversi browser e dispositivi per assicurarti che funzioni in modo coerente e affidabile.
• Monitoraggio e aggiornamenti continui: monitora regolarmente la procedura di disconnessione per rilevare potenziali vulnerabilità o falle di sicurezza. Implementa aggiornamenti e patch tempestivi per risolvere eventuali problemi identificati.
• Federazione delle identità: se l'utente ha eseguito l'accesso utilizzando un'identità federata, verifica se la disconnessione anche dal provider di identità è supportata e necessaria. Inoltre, se il provider di identità supporta l'accesso automatico, non dimenticare di impedirlo.

Cosa fare

• Se invalidi un cookie sul server nell'ambito di un flusso di disconnessione (o di altri flussi di revoca dell'accesso), assicurati di eliminare il cookie anche sul dispositivo dell'utente.
• Pulisci tutti i dati sensibili che potresti aver memorizzato sul dispositivo dell'utente: cookie, localStorage, sessionStorage, indexedDB, CacheStorage e qualsiasi altro archivio dati locale.
• Assicurati che tutte le risorse contenenti dati sensibili, in particolare i documenti HTML, vengano restituite con l'intestazione HTTP Cache-control: no-store in modo che il browser non memorizzi queste risorse in modo permanente (ad esempio, su disco). Allo stesso modo, le chiamate XHR/fetch che restituiscono dati sensibili devono impostare anche l'intestazione HTTP Cache-Control: no-store per impedire qualsiasi memorizzazione nella cache.
• Assicurati che tutte le schede aperte sul dispositivo dell'utente siano aggiornate con le revoche dell'accesso lato server.

Pulizia dei dati sensibili al momento dell'uscita

Dopo aver eseguito la disconnessione, valuta la possibilità di cancellare i dati sensibili temporanei e memorizzati localmente. L'attenzione ai dati sensibili è motivata dal fatto che cancellare tutto comporterebbe un'esperienza utente notevolmente peggiore, perché è molto probabile che l'utente torni. Ad esempio, se cancelli tutti i dati memorizzati localmente, i tuoi utenti dovranno riaccettare le richieste di consenso all'uso dei cookie e seguire altre procedure come se non avessero mai visitato il tuo sito web.

Come pulire i cookie

Nella risposta per la pagina che conferma lo stato di disconnessione, allega le intestazioni HTTP Set-Cookie per cancellare tutti i cookie correlati a dati sensibili o che li contengono. Imposta il valore expires su una data nel lontano passato e imposta il valore del cookie su una stringa vuota per sicurezza.

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

Scenario offline

Sebbene l'approccio descritto sopra sia sufficiente per i casi d'uso generali, non funziona se l'utente lavora offline. Ti consigliamo di richiedere due cookie per monitorare lo stato di accesso: un cookie sicuro solo HTTPS e un cookie normale accessibile tramite JavaScript. Se l'utente sta tentando di uscire dall'account in modalità offline, puoi cancellare il cookie JavaScript e procedere con altre operazioni di pulizia, se possibile. Se hai un service worker, potresti anche voler sfruttare l'API Background Fetch per riprovare una richiesta di cancellazione dello stato sul server quando l'utente sarà online in un secondo momento.

Come liberare spazio di archiviazione

Nella risposta per la pagina che conferma lo stato di disconnessione, assicurati di eliminare i dati sensibili da vari datastore:

• sessionStorage: anche se viene cancellato quando l'utente termina la sessione con il tuo sito web, valuta la possibilità di eseguire una pulizia proattiva dei dati sensibili quando l'utente esce, nel caso in cui dimentichi di chiudere tutte le schede aperte sul tuo sito web.

  // 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: quando l'utente esce, pulisci tutti i dati sensibili che potresti aver memorizzato utilizzando queste API, dato che questi dati vengono mantenuti tra le sessioni.

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

Come pulire le cache

• Cache HTTP: se imposti Cache-control: no-store sulle risorse con dati sensibili, la cache HTTP non conserverà nulla di sensibile.
• Cache indietro/avanti: allo stesso modo, se hai seguito i consigli relativi a Cache-control: no-store e alla cancellazione dei cookie sensibili (ad esempio, i cookie sicuri solo HTTPS correlati all'autenticazione) quando gli utenti escono, non devi preoccuparti che i dati sensibili vengano conservati nella cache indietro/avanti. Infatti, la funzionalità della cache back-forward espelle le pagine della stessa origine pubblicate con un'intestazione HTTP Cache-control: no-store se rileva uno o più dei seguenti segnali:
  • Uno o più cookie sicuri solo HTTPS sono stati modificati o eliminati.
  • Una o più risposte per chiamate XHR/fetch, emesse dalla pagina, includevano l'intestazione HTTP Cache-control: no-store.

Esperienza utente coerente tra le schede

Gli utenti potrebbero aver aperto molte schede per il tuo sito web prima di decidere di uscire. A quel punto, potrebbe aver dimenticato altre schede o persino altre finestre del browser. È meglio evitare di fare affidamento sugli utenti per chiudere tutte le schede e le finestre pertinenti. Adotta invece un approccio proattivo assicurandoti che lo stato di accesso dell'utente sia coerente nelle varie schede.

Istruzioni

Per ottenere uno stato di accesso coerente nelle varie schede, valuta la possibilità di utilizzare una combinazione di eventi pageshow/pagehide e dell'API Broadcast Channel.

• Evento pageshow: in caso di pageshow persistente, controlla lo stato di accesso dell'utente ed elimina i dati sensibili o anche l'intera pagina se l'utente non ha più eseguito l'accesso. L'evento pageshow viene attivato prima che la pagina venga visualizzata per la prima volta dopo essere stata ripristinata da una navigazione indietro/avanti, in modo che il controllo dello stato di accesso ti consenta di reimpostare la pagina su uno stato non sensibile.

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

• API Broadcast Channel: utilizza questa API per comunicare le modifiche dello stato di accesso tra schede e finestre. Se l'utente ha eseguito la disconnessione, cancella tutti i dati sensibili o, in alternativa, reindirizza a una pagina di disconnessione in tutte le schede e le finestre con dati sensibili.

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

Conclusione

Se segui le indicazioni riportate in questo documento, potrai progettare un'ottima esperienza utente di disconnessione che impedisca le disconnessioni involontarie e protegga le informazioni personali dell'utente.