Qu'est-ce qui fait une bonne expérience de déconnexion ?

Kenji Baheux
Kenji Baheux

Se déconnecter

Lorsqu'un utilisateur se déconnecte d'un site Web, il indique qu'il souhaite profiter pleinement d'une expérience personnalisée. Il est donc important de respecter le plus possible le modèle mental de l'utilisateur. Par exemple, une expérience de déconnexion appropriée doit également tenir compte de tous les onglets que l'utilisateur a pu ouvrir avant sa décision de se déconnecter.

La clé d'une bonne expérience de déconnexion se résume à la cohérence des aspects visuels et des états de l'expérience utilisateur. Ce guide fournit des conseils concrets sur les points auxquels vous devez prêter attention et sur la manière de profiter d'une bonne expérience de déconnexion.

Remarques importantes

Lors de la mise en œuvre de la fonctionnalité de déconnexion sur votre site Web, tenez compte des points suivants afin de garantir un processus de déconnexion fluide, sécurisé et intuitif:

  • Expérience utilisateur de déconnexion claire et cohérente: fournissez un bouton ou un lien de déconnexion clair et cohérent, facilement identifiable et accessible sur l'ensemble du site Web. Évitez d'utiliser des libellés ambigus ou de masquer la fonctionnalité de déconnexion dans des menus, des sous-pages ou d'autres emplacements peu intuitifs.
  • Invite de confirmation: ajoutez une invite de confirmation avant de finaliser le processus de déconnexion. Cela permet d'éviter que les utilisateurs se déconnectent accidentellement et de décider s'ils ont vraiment besoin de se déconnecter, par exemple s'ils verrouillent leur appareil avec un mot de passe sécurisé ou un autre mécanisme d'authentification.
  • Gérer plusieurs onglets: si un utilisateur a ouvert plusieurs pages du même site Web dans différents onglets, assurez-vous que la déconnexion de tous les onglets ouverts de ce site Web dans un onglet entraîne également la modification de tous les autres onglets ouverts.
  • Redirigez l'utilisateur vers une page de destination sécurisée: après avoir réussi à se déconnecter, redirigez l'utilisateur vers une page de destination sécurisée qui indique clairement qu'il n'est plus connecté. Évitez de rediriger les utilisateurs vers des pages contenant des informations personnalisées. De même, assurez-vous que les autres onglets ne reflètent plus un état de connexion. Assurez-vous également de ne pas créer une redirection ouverte dont les pirates informatiques pourraient tirer parti.
  • Nettoyage des sessions: lorsqu'un utilisateur s'est déconnecté, supprimez complètement toutes les données sensibles de session, les cookies ou les fichiers temporaires associés à la session de l'utilisateur. Cela empêche tout accès non autorisé aux informations de l'utilisateur ou à l'activité du compte, et empêche également le navigateur de restaurer des pages contenant des informations sensibles à partir des différents caches, en particulier le cache amélioré.
  • Traitement des erreurs et commentaires: envoyez des messages d'erreur ou des commentaires clairs aux utilisateurs en cas de problème lors de la déconnexion. Informez-les des risques de sécurité ou des fuites de données potentiels en cas d'échec du processus de déconnexion.
  • Considérations d'accessibilité: assurez-vous que le mécanisme de déconnexion est accessible aux utilisateurs handicapés, y compris à ceux qui utilisent des technologies d'assistance comme les lecteurs d'écran ou la navigation au clavier.
  • Compatibilité multi-navigateur: testez la fonctionnalité de déconnexion sur différents navigateurs et appareils pour vous assurer qu'elle fonctionne de manière cohérente et fiable.
  • Surveillance et mises à jour continues: surveillez régulièrement le processus de déconnexion pour détecter d'éventuelles failles ou failles de sécurité. Appliquez régulièrement les mises à jour et les correctifs pour résoudre les problèmes identifiés.
  • Fédération d'identité: si l'utilisateur est connecté à l'aide d'une identité fédérée, vérifiez si la déconnexion du fournisseur d'identité est également compatible et nécessaire. De plus, si le fournisseur d'identité prend en charge la connexion automatique, n'oubliez pas de l'empêcher.

Bonnes pratiques

  • Si vous invalidez un cookie sur le serveur lors d'un processus de déconnexion (ou de tout autre flux de révocation d'accès), veillez également à le supprimer sur l'appareil de l'utilisateur.
  • Nettoyez toutes les données sensibles éventuellement stockées sur l'appareil de l'utilisateur: cookies, localStorage, sessionStorage, indexedDB, CacheStorage et tout autre datastore local.
  • Assurez-vous que toutes les ressources contenant des données sensibles, en particulier les documents HTML, sont renvoyées avec l'en-tête HTTP Cache-control: no-store afin que le navigateur ne stocke pas ces ressources dans un espace de stockage permanent (par exemple, sur un disque). De même, les appels XHR/fetch qui renvoient des données sensibles doivent également définir l'en-tête HTTP Cache-Control: no-store pour empêcher toute mise en cache.
  • Assurez-vous que tous les onglets ouverts sur l'appareil de l'utilisateur sont à jour avec les révocations d'accès côté serveur.

Nettoyer les données sensibles à la déconnexion

Lorsque vous vous déconnectez, envisagez d'effacer les données sensibles éphémères et stockées localement. L'accent mis sur les données sensibles est motivé par le fait que toute suppression entraînerait une baisse significative de l'expérience utilisateur, car celui-ci pourrait très bien revenir. Par exemple, si vous effacez toutes les données stockées localement, vos utilisateurs devront confirmer de nouveau leur consentement aux cookies et suivre d'autres processus comme s'ils n'avaient jamais accédé à votre site Web.

Comment nettoyer les cookies

Sur la réponse de la page de confirmation de l'état de déconnexion, joignez des en-têtes HTTP Set-Cookie pour effacer tous les cookies liés aux données sensibles ou contenant ces données. Définissez la valeur expires sur une date dans le passé éloigné et définissez la valeur du cookie sur une chaîne vide pour une bonne mesure.

<ph type="x-smartling-placeholder"> 
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
...

Scénario hors connexion

Bien que la méthode décrite ci-dessus soit suffisante pour les cas d'utilisation généraux, elle ne fonctionne pas si l'utilisateur travaille hors connexion. Vous pouvez envisager d'exiger deux cookies pour suivre l'état de connexion: un cookie sécurisé HTTPS uniquement et un cookie standard accessible via JavaScript. Si votre utilisateur tente de se déconnecter alors qu'il est hors connexion, vous pouvez effacer le cookie JavaScript et effectuer d'autres opérations de nettoyage, si possible. Si vous disposez d'un service worker, vous pouvez également tirer parti de l'API Background Fetch pour relancer une requête visant à effacer l'état sur le serveur lorsque l'utilisateur sera en ligne ultérieurement.

Nettoyer l'espace de stockage

Dans la réponse de la page qui confirme l'état de déconnexion, veillez à nettoyer les données sensibles de différents datastores:

  • sessionStorage: bien que ce paramètre soit effacé lorsque l'utilisateur met fin à sa session sur votre site Web, pensez à nettoyer de manière proactive les données sensibles lorsque l'utilisateur se déconnecte, au cas où il oublie de fermer tous les onglets ouverts sur votre site 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: lorsque l'utilisateur se déconnecte, nettoyez toutes les données sensibles que vous avez pu stocker à l'aide de ces API, étant donné qu'elles peuvent être conservées d'une session à l'autre.

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

Nettoyer des caches

  • Cache HTTP: tant que vous définissez Cache-control: no-store sur les ressources contenant des données sensibles, le cache HTTP ne conserve aucune information sensible.
  • Cache amélioré: de même, si vous avez suivi les recommandations concernant Cache-control: no-store et concernant la suppression des cookies sensibles (par exemple, les cookies HTTPS sécurisés liés à l'authentification) lorsque les utilisateurs se déconnectent, vous n'avez pas à vous soucier de la conservation des données sensibles dans le cache amélioré. En effet, la fonctionnalité de cache amélioré évince les pages d'origine identique diffusées avec un en-tête HTTP Cache-control: no-store si elle observe un ou plusieurs des signaux suivants: <ph type="x-smartling-placeholder">
      </ph>
    • Un ou plusieurs cookies sécurisés dédiés uniquement au protocole HTTPS ont été modifiés ou supprimés.
    • Une ou plusieurs réponses aux appels XHR/fetch, émises par la page, incluaient l'en-tête HTTP Cache-control: no-store.

Expérience utilisateur cohérente sur tous les onglets

Vos utilisateurs ont peut-être ouvert de nombreux onglets sur votre site Web avant de décider de se déconnecter. À ce moment-là, ils ont peut-être oublié d'autres onglets, ou même d'autres fenêtres de navigateur. Évitez de demander à vos utilisateurs de fermer tous les onglets et les fenêtres appropriés. Agissez plutôt de manière proactive en vous assurant que l'état de connexion de l'utilisateur est cohérent entre les onglets.

Instructions

Pour obtenir un état de connexion cohérent dans tous les onglets, envisagez d'utiliser une combinaison d'événements pageshow/pagehide et de l'API Broadcast Channel.

  • Événement pageshow: à partir d'un pageshow persistant, vérifiez l'état de connexion de l'utilisateur et effacez les données sensibles (voire la page entière) si l'utilisateur n'est plus connecté. Notez que l'événement pageshow se déclenche avant le premier rendu de la page lors de sa restauration à partir d'une navigation vers l'avant. Cela garantit que la vérification de l'état de la connexion vous permettra de réinitialiser la page dans un état non sensible.

    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: utilisez cette API pour communiquer les changements d'état de connexion entre les onglets et les fenêtres. Si l'utilisateur est déconnecté, effacez toutes les données sensibles ou redirigez l'utilisateur vers une page de déconnexion dans tous les onglets et fenêtres contenant des données sensibles.

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

Conclusion

En suivant les conseils fournis dans ce document, vous serez en mesure de concevoir une expérience de déconnexion optimale qui empêche les déconnexions accidentelles et protège les informations personnelles de l'utilisateur.