Cette page a été traduite par l'API Cloud Translation.

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

Kenji Baheux

Se déconnecter

Lorsqu'un utilisateur se déconnecte d'un site Web, il communique son souhait de sortir complètement d'une expérience utilisateur personnalisée. Il est donc important de respecter le plus fidèlement possible le modèle mental de l'utilisateur. Par exemple, une expérience de déconnexion appropriée doit également tenir compte des onglets que l'utilisateur a pu ouvrir avant de décider de se déconnecter.

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

Remarques importantes

Lorsque vous implémentez la fonctionnalité de déconnexion sur votre site Web, soyez attentif aux aspects suivants pour 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 toujours visible, 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: implémentez une invite de confirmation avant de finaliser le processus de déconnexion. Cela peut empêcher les utilisateurs de se déconnecter accidentellement et leur permettre de reconsidérer s'ils doivent vraiment se déconnecter, par exemple s'ils verrouillent leur appareil avec diligence à l'aide d'un mot de passe sécurisé ou d'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 d'un onglet entraîne la mise à jour de tous les autres onglets ouverts de ce site Web.
Redirigez l'utilisateur vers une page de destination sécurisée: une fois la déconnexion effectuée, redirigez l'utilisateur vers une page de destination sécurisée qui indique clairement qu'il n'est plus connecté. Évitez de rediriger les internautes vers des pages qui contiennent des informations personnalisées. De même, assurez-vous que les autres onglets ne reflètent plus l'état de connexion. Veillez également à ne pas créer une redirection ouverte dont les pirates informatiques pourraient exploiter l'accès.
Nettoyage de la session: lorsqu'un utilisateur s'est déconnecté, supprimez complètement tous les cookies, fichiers temporaires et données sensibles de session utilisateur associés à la session de l'utilisateur. Cela empêche tout accès non autorisé aux informations des utilisateurs ou à l'activité du compte, et empêche également le navigateur de restaurer des pages contenant des informations sensibles à partir de ses différents caches, en particulier le cache amélioré.
Traitement des erreurs et commentaires: fournissez des messages d'erreur clairs ou des commentaires aux utilisateurs en cas de problème lors de leur déconnexion. Informez-les de tout risque de sécurité potentiel ou de toute fuite de données 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é entre navigateurs: 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.
Une surveillance et des mises à jour continues: surveillez régulièrement le processus de déconnexion afin d'identifier d'éventuelles failles ou failles de sécurité. Mettre en œuvre des mises à jour et des correctifs en temps opportun 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é propose la connexion automatique, n'oubliez pas de l'empêcher.

Choses à faire

Si vous invalidez un cookie sur le serveur lors d'une procédure de déconnexion (ou d'un autre flux de révocation d'accès), veillez également à supprimer le cookie sur l'appareil de l'utilisateur.
Nettoyez toutes les données sensibles que vous avez pu stocker 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 les stocke pas dans un espace de stockage permanent (sur le disque, par exemple). 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 les onglets ouverts sur l'appareil de l'utilisateur sont à jour et que les procédures de révocation d'accès côté serveur sont bien à jour.

Nettoyer les données sensibles lors de la déconnexion

Lorsque vous vous déconnectez, pensez à 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 tout effacer pourrait nuire à l'expérience utilisateur, car il pourrait très bien y revenir. Par exemple, si vous devez effacer toutes les données stockées localement, vos utilisateurs devront alors reconfirmer les invites de consentement aux cookies et effectuer d'autres processus comme s'ils n'avaient jamais visité votre site Web.

Nettoyer les cookies

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

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 l'approche décrite ci-dessus soit suffisante pour des 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 la connexion: un cookie sécurisé uniquement HTTPS et un cookie standard accessible via JavaScript. Si l'utilisateur tente de se déconnecter alors qu'il est hors connexion, vous pouvez effacer le cookie JavaScript et, si possible, effectuer d'autres opérations de nettoyage. Si vous avez un service worker, vous pouvez aussi utiliser l'API de récupération en arrière-plan pour relancer une requête d'effacement de l'état sur le serveur lorsque l'utilisateur sera en ligne par la suite.

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 des différents datastores:

sessionStorage: bien que cette option soit effacée lorsque l'utilisateur met fin à sa session sur votre site Web, pensez à nettoyer les données sensibles de manière proactive lorsque l'utilisateur se déconnecte, afin qu'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();
```

localStorage, indexedDB, Cache/API 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 seront 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 les caches

Cache HTTP: tant que vous définissez Cache-control: no-store sur des ressources contenant des données sensibles, le cache HTTP ne conserve aucun élément sensible.
Cache amélioré: de la même manière, si vous avez suivi les recommandations concernant Cache-control: no-store et concernant la suppression des cookies sensibles (par exemple, les cookies sécurisés HTTPS uniquement 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é évincera les pages de même origine diffusées avec un en-tête HTTP Cache-control: no-store si elle observe un ou plusieurs des signaux suivants :
- Un ou plusieurs cookies sécurisés spécifiques au protocole HTTPS ont été modifiés ou supprimés.
- Une ou plusieurs réponses aux appels XHR/fetch (émis par la page) comprenaient l'en-tête HTTP Cache-control: no-store.

Expérience utilisateur cohérente dans tous les onglets

Vos utilisateurs ont peut-être ouvert de nombreux onglets de votre site Web avant de décider de se déconnecter. À ce stade, il a peut-être oublié d'autres onglets, voire d'autres fenêtres de navigateur. Nous vous recommandons d'éviter de compter sur vos utilisateurs qu'ils ferment tous les onglets et toutes les fenêtres pertinents. Adoptez plutôt une attitude proactive en vous assurant que l'état de connexion de l'utilisateur est cohérent entre les onglets.

Instructions

Pour assurer la cohérence de la connexion entre les onglets, envisagez d'utiliser une combinaison d'événements pageshow/pagehide et de l'API Broadcast Channel.

Événement pageshow: lors d'un pageshow persistant, vérifiez l'état de connexion de l'utilisateur et effacez les données sensibles (ou même la page entière) si l'utilisateur n'est plus connecté. Notez que l'événement pageshow se déclenche avant que la page ne soit affichée pour la première fois après avoir été restaurée à partir d'une navigation avant/arrière. Cela garantit que la vérification de l'état de la connexion vous permettra de réinitialiser la page pour qu'elle ne soit plus 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 dans les onglets et les fenêtres. Si l'utilisateur est déconnecté, effacez toutes les données sensibles ou redirigez-le vers une page de déconnexion sur 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 de ce document, vous serez en mesure de concevoir une expérience utilisateur de déconnexion optimale, qui empêche les déconnexions involontaires et protège les informations personnelles de l'utilisateur.