Quali sono i fattori che determinano una buona esperienza di disconnessione?

Kenji Baheux
Kenji Baheux

Disconnessione dall'account

Quando un utente esce da un sito web, comunica il suo desiderio di usufruire completamente di un'esperienza utente personalizzata. È quindi importante attenersi il più fedelmente possibile al modello mentale dell'utente. Ad esempio, un'esperienza di uscita corretta dovrebbe anche prendere in considerazione tutte le schede che l'utente potrebbe aver aperto prima di decidere di uscire.

La chiave di un'ottima esperienza di disconnessione può essere riassunta dalla coerenza tra gli aspetti visivi e relativi allo stato dell'esperienza utente. Questa guida fornisce consigli concreti sugli aspetti a cui prestare attenzione e su come garantire una buona esperienza di uscita.

Considerazioni principali

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

  • Esperienza utente di uscita chiara e coerente: fornisci un link o un pulsante di uscita chiaro e coerente che sia facilmente identificabile e accessibile in tutto il sito web. Evita di utilizzare etichette ambigue o di nascondere la funzionalità di uscita in menu poco chiari, sottopagine o in altre posizioni non intuitive.
  • Richiesta di conferma: implementa una richiesta di conferma prima di finalizzare il processo di disconnessione. Questo può aiutare a evitare che gli utenti si disconnettano per errore e consente agli utenti di riconsiderare se hanno davvero bisogno di uscire, ad esempio se bloccano diligentemente il proprio dispositivo con una password efficace o un altro meccanismo di autenticazione.
  • Gestire più schede: se un utente ha aperto diverse pagine dello stesso sito web in schede diverse, assicurati che la disconnessione da una scheda aggiorni anche tutte le altre schede aperte di quel sito web.
  • Reindirizza a una pagina di destinazione sicura: dopo aver eseguito la disconnessione, reindirizza l'utente a una pagina di destinazione sicura che indica chiaramente che non è più connesso. Evita di reindirizzare gli utenti a pagine contenenti informazioni personalizzate. Analogamente, assicurati che anche le altre schede non riflettano più lo stato di accesso. Inoltre, assicurati di non creare un reindirizzamento aperto che possa essere sfruttato da malintenzionati.
  • Pulizia della sessione: una volta che l'utente si è disconnesso, rimuovi completamente tutti i dati sensibili della sessione utente, i cookie o i file temporanei associati alla sessione dell'utente. Ciò impedisce l'accesso non autorizzato alle informazioni degli utenti o all'attività dell'account e impedisce al browser di ripristinare le pagine con informazioni sensibili dalle varie cache, in particolare dalla cache back-forward.
  • Gestione degli errori e feedback: fornisci messaggi di errore chiari o feedback agli utenti in caso di problemi quando escono dall'account. Informali di eventuali rischi per la sicurezza o fuga di dati qualora il processo di disconnessione non vada a buon fine.
  • Considerazioni sull'accessibilità: assicurati che il meccanismo di disconnessione sia accessibile agli utenti con disabilità, inclusi coloro che utilizzano tecnologie per la disabilità come gli screen reader o la navigazione da tastiera.
  • Compatibilità tra browser: verifica la funzionalità di uscita su browser e dispositivi diversi per assicurarti che funzioni in modo coerente e affidabile.
  • Monitoraggio e aggiornamenti continui: monitora regolarmente il processo di disconnessione per verificare la presenza di eventuali vulnerabilità o falle nella sicurezza. Implementa aggiornamenti e patch tempestivi per risolvere i problemi identificati.
  • Federazione delle identità: se l'utente ha eseguito l'accesso utilizzando un'identità federata, verifica se anche la disconnessione dal provider di identità è supportata ed è necessaria. Inoltre, se il provider di identità supporta l'accesso automatico, non dimenticare di impedire.

Cosa fare

  • Se annulli la validità di 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 memorizzati sul dispositivo dell'utente: cookie, localStorage, sessionStorage, indexedDB, CacheStorage e altri datastore locali.
  • Assicurati che tutte le risorse contenenti dati sensibili, in particolare documenti HTML, vengano restituite con l'intestazione HTTP Cache-control: no-store affinché il browser non le archivi in uno spazio di archiviazione permanente (ad esempio, su disco). Analogamente, 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 all'uscita

Quando esci, valuta la possibilità di cancellare i dati sensibili temporanei e archiviati localmente. L'attenzione ai dati sensibili è motivata dal fatto che la cancellazione di tutti i dati comporterebbe un'esperienza utente notevolmente inferiore, perché l'utente in questione potrebbe tornare sul sito. Ad esempio, se dovessi cancellare tutti i dati memorizzati localmente, i tuoi utenti dovranno riconfermare le richieste di consenso all'uso dei cookie e svolgere altri processi come se non avessero mai visitato il tuo sito web.

Come ripulire i cookie

Nella risposta della pagina che conferma lo stato di disconnessione, allega le intestazioni HTTP Set-Cookie per cancellare ogni cookie correlato o contenente dati sensibili. Imposta il valore expires su una data nel passato e, per maggiore sicurezza, imposta il valore del cookie su una stringa vuota.

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 casi d'uso generali, non funziona se l'utente sta lavorando offline. Puoi considerare la possibilità 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 cercando di disconnettersi mentre è offline, puoi cancellare il cookie JavaScript e, se possibile, procedere con altre operazioni di pulizia. Se hai un service worker, puoi anche sfruttare l'API Background Fetch per riprovare a inviare una richiesta di cancellazione dello stato sul server quando l'utente sarà online, in un secondo momento.

Liberare spazio di archiviazione

Nella risposta della pagina che conferma lo stato di disconnessione, assicurati di pulire i dati sensibili da vari datastore:

  • sessionStorage: anche se questo problema viene cancellato quando l'utente termina la sessione sul tuo sito web, valuta la possibilità di eliminare in modo proattivo i dati sensibili quando l'utente esce dall'account, nel caso in cui dimenticasse 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();

  • API localStorage, indexedDB, Cache/Service Worker: quando l'utente si disconnette, pulisci tutti i dati sensibili che potresti aver archiviato utilizzando queste API, dal momento che tali dati sarebbero rimasti 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 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');

Come pulire le cache

  • Cache HTTP: se imposti Cache-control: no-store su risorse con dati sensibili, la cache HTTP non conserverà dati sensibili.
  • Cache back/forward: allo stesso modo, se hai seguito i consigli relativi a Cache-control: no-store e alla cancellazione dei cookie sensibili (ad esempio, i cookie solo HTTPS protetti relativi all'autenticazione) quando gli utenti escono dall'account, non è necessario che i dati sensibili vengano conservati nella cache back-forward. In effetti, la funzionalità di cache back-forward rimuove le pagine della stessa origine pubblicate con un'intestazione HTTP Cache-control: no-store se rileva uno o più dei seguenti indicatori:
    • Sono stati modificati o eliminati uno o più cookie solo HTTPS sicuri.
    • 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

I tuoi utenti potrebbero aver aperto molte schede del tuo sito web prima di decidere di uscire. A quel punto, potrebbero aver dimenticato altre schede o persino altre finestre del browser. È preferibile evitare di fare affidamento sugli utenti per la chiusura di tutte le schede e le finestre pertinenti. Adotta invece una posizione proattiva assicurandoti che lo stato di accesso dell'utente sia coerente tra le schede.

Istruzioni

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

  • Evento pageshow: in caso di pageshow persistente, controlla lo stato di accesso dell'utente e cancella i dati sensibili (o anche l'intera pagina) se l'utente non ha più eseguito l'accesso. Tieni presente che l'evento pageshow viene attivato prima che la pagina venga visualizzata per la prima volta dopo il ripristino da una navigazione back-forward. In questo modo, il controllo dello stato di accesso ti consentirà di reimpostare lo stato non sensibile della pagina.

    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 è disconnesso, cancella tutti i dati sensibili o, in alternativa, reindirizza a una pagina di uscita 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

Seguendo le indicazioni contenute in questo documento, sarai in grado di progettare un'ottima esperienza utente con la disconnessione dall'account, che impedisca disconnessioni involontarie e protegge le informazioni personali dell'utente.