¿Qué se necesita para tener una buena experiencia cuando sales de la cuenta?

Kenji Baheux
Kenji Baheux

Salir de la cuenta

Cuando un usuario sale de un sitio web, está comunicando su deseo de salir por completo de una experiencia del usuario personalizada. Por lo tanto, es importante adherirse lo más posible al modelo mental del usuario. Por ejemplo, para una experiencia adecuada de cierre de sesión, también se deben tener en cuenta todas las pestañas que el usuario pueda haber abierto antes de decidir salir.

La clave para una excelente experiencia de salida se puede resumir en que es coherente en todos los aspectos visuales y de estado de la experiencia del usuario. En esta guía, se proporcionan consejos concretos sobre a qué prestar atención y cómo lograr una buena experiencia de cierre de sesión.

Consideraciones clave

Cuando implementes la función de cerrar sesión en tu sitio web, presta atención a los siguientes aspectos para garantizar un proceso de cierre de sesión fluido, intuitivo y seguro:

  • UX de salida clara y coherente: Proporciona un botón o vínculo de salida claro y coherente que sea fácil de identificar y de acceder en todo el sitio web. Evita usar etiquetas ambiguas, o bien ocultar la función de cierre de sesión en menús, subpáginas u otras ubicaciones poco intuitivas.
  • Mensaje de confirmación: Implementa un mensaje de confirmación antes de finalizar el proceso de salida. Esto puede ayudar a evitar que los usuarios salgan de su cuenta accidentalmente y permitir que reconsideren si realmente necesitan salir de la cuenta, por ejemplo, si bloquean su dispositivo de forma diligente con una contraseña segura o algún otro mecanismo de autenticación.
  • Controlar varias pestañas: Si un usuario abrió varias páginas del mismo sitio web en diferentes pestañas, asegúrate de que, cuando sales de una pestaña, también se actualizan todas las demás pestañas abiertas de ese sitio web.
  • Redireccionar a una página de destino segura: Cuando salgas de la cuenta correctamente, redirecciona al usuario a una página de destino segura que indique claramente que ya no accedió. Evita redireccionar a los usuarios a páginas que contengan información personalizada. Del mismo modo, asegúrate de que las demás pestañas ya no muestren un estado de acceso. Además, asegúrate de no crear un redireccionamiento abierto que los atacantes puedan aprovechar.
  • Limpieza de sesiones: Una vez que un usuario salga de su cuenta, quita por completo cualquier dato sensible de la sesión, las cookies o los archivos temporales asociados con la sesión del usuario. Esto evita el acceso no autorizado a la información del usuario o a la actividad de la cuenta, y también impide que el navegador restablezca páginas con información sensible de sus distintas memorias caché, en particular, la memoria caché atrás/adelante.
  • Manejo de errores y comentarios: Proporciona mensajes de error o comentarios claros a los usuarios si surgen problemas cuando salen de sus cuentas. Infórmales sobre posibles riesgos de seguridad o filtraciones de datos si falla el proceso de salida.
  • Consideraciones de accesibilidad: Asegúrate de que los usuarios con discapacidades puedan acceder al mecanismo de salida de la cuenta, incluidos aquellos que utilizan tecnologías de accesibilidad, como lectores de pantalla o navegación con el teclado.
  • Compatibilidad con diferentes navegadores: Prueba la función para salir de la cuenta en diferentes navegadores y dispositivos para asegurarte de que se realice de forma coherente y confiable.
  • Supervisión y actualizaciones continuas: Supervisa regularmente el proceso de salida para detectar posibles vulnerabilidades o brechas de seguridad. Implementar actualizaciones y parches oportunos para abordar cualquier problema identificado.
  • Federación de identidades: Si el usuario accedió con una identidad federada, comprueba si también es compatible y es necesario salir del proveedor de identidad. Además, si el proveedor de identidad admite el acceso automático, no olvides evitarlo.

LO QUE DEBES HACER

  • Si invalidas una cookie en el servidor como parte de un flujo de cierre de sesión (u otros flujos de revocación de acceso), asegúrate de eliminar también la cookie del dispositivo del usuario.
  • Limpia todos los datos sensibles que hayas almacenado en el dispositivo del usuario: cookies, localStorage, sessionStorage, indexedDB, CacheStorage y cualquier otro almacén de datos local.
  • Asegúrate de que todos los recursos que contengan datos sensibles (en particular, documentos HTML) se muestren con el encabezado HTTP Cache-control: no-store para que el navegador no almacene estos recursos en un almacenamiento permanente (por ejemplo, en el disco). Del mismo modo, las llamadas XHR/fetch que muestran datos sensibles también deben establecer el encabezado HTTP Cache-Control: no-store para evitar el almacenamiento en caché.
  • Asegúrate de que las pestañas abiertas en el dispositivo del usuario estén actualizadas con las revocaciones de acceso del servidor.

Limpiar los datos sensibles al salir

Cuando salgas, considera borrar los datos sensibles efímeros y almacenados localmente. El enfoque en los datos sensibles se motiva por el hecho de que borrar todo daría como resultado una experiencia del usuario mucho peor, ya que este usuario podría volver. Por ejemplo, si borras todos los datos almacenados de forma local, tus usuarios tendrán que volver a aceptar las solicitudes de consentimiento de cookies y completar otros procesos como si nunca visitaron tu sitio web.

Cómo limpiar cookies

En la respuesta de la página que confirma el estado de la sesión cerrada, adjunta los encabezados HTTP Set-Cookie para borrar todas las cookies que estén relacionadas con datos sensibles o que los contengan. Establece el valor expires en una fecha en el pasado lejano y establece el valor de la cookie en una cadena vacía para una medición justa.

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

Caso sin conexión

Si bien el enfoque descrito anteriormente es suficiente para casos de uso generales, no funciona si el usuario está trabajando sin conexión. Te recomendamos que consideres solicitar dos cookies para realizar un seguimiento del estado de acceso: una cookie segura solo para HTTPS y una cookie normal a la que se pueda acceder a través de JavaScript. Si el usuario intenta salir sin conexión, puedes borrar la cookie de JavaScript y continuar con otras operaciones de limpieza si es posible. Si tienes un service worker, es posible que también quieras aprovechar la API de Background Fetch para reintentar una solicitud que borre el estado del servidor cuando el usuario esté en línea más tarde.

Cómo liberar espacio de almacenamiento

En la respuesta de la página que confirma el estado de salida de la cuenta, asegúrate de borrar los datos sensibles de varios almacenes de datos:

  • sessionStorage: Aunque se borra cuando el usuario finaliza la sesión en el sitio web, considera limpiar los datos sensibles de forma proactiva cuando el usuario sale de su cuenta, en caso de que se olvide de cerrar todas las pestañas abiertas en el sitio web.

    // Remove sensitive data from sessionStorage
sessionStorage.removeItem('sensitiveSessionData1');
// ...

// Or if everything in sessionStorage is sensitive, clear it all
sessionStorage.clear();

  • API de localStorage, indexedDB, caché/Service Worker: cuando el usuario salga de su cuenta, borra los datos sensibles que hayas almacenado con estas APIs, ya que estos datos se conservarán entre sesiones.

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

Cómo limpiar las cachés

  • Caché HTTP: Siempre que configures Cache-control: no-store en recursos con datos sensibles, la caché HTTP no retendrá elementos sensibles.
  • Memoria caché atrás/adelante: Del mismo modo, si seguiste las recomendaciones sobre Cache-control: no-store y sobre cómo borrar cookies sensibles (por ejemplo, cookies solo para HTTPS seguras relacionadas con la autenticación) cuando los usuarios salen de sus cuentas, no tienes que preocuparte por que los datos sensibles se retengan en la memoria caché atrás/adelante. De hecho, la función de memoria caché atrás/adelante expulsará las páginas de mismo origen que se publiquen con un encabezado HTTP Cache-control: no-store si detecta uno o más de los siguientes indicadores:
    • Se modificaron o borraron una o más cookies seguras solo con HTTPS.
    • Una o más respuestas para llamadas XHR/fetch, emitidas por la página, incluyeron el encabezado HTTP Cache-control: no-store.

Experiencia del usuario coherente en todas las pestañas

Es posible que los usuarios hayan abierto muchas pestañas en tu sitio web antes de decidir salir de la cuenta. Para entonces, es posible que se hayan olvidado de otras pestañas o incluso de otras ventanas del navegador. Es mejor evitar depender de que los usuarios cierren todas las pestañas y ventanas relevantes. En cambio, adopta una postura proactiva y asegúrate de que el estado de acceso del usuario sea coherente en todas las pestañas.

Instructivo

Para lograr un estado de acceso coherente en todas las pestañas, considera usar una combinación de eventos pageshow y pagehide y la API de Broadcast Channel.

  • pageshowevento: si el usuario ya no accedió pageshow, verifica el estado de acceso del usuario y borra todos los datos confidenciales (o incluso toda la página). Ten en cuenta que el evento pageshow se activará antes de que la página se renderice por primera vez cuando se restablezca desde la navegación hacia atrás/adelante, lo que garantiza que la verificación del estado de acceso te permita restablecer la página a un estado no 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 de Broadcast Channel: Usa esta API para comunicar cambios de estado de acceso en pestañas y ventanas. Si el usuario salió de la cuenta, borra todos los datos sensibles o, de manera alternativa, redirecciona a una página de salida en todas las pestañas y ventanas que contengan datos 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.
    // ...
  }
}

Conclusión

Al seguir las instrucciones de este documento, podrás diseñar una excelente experiencia de cierre de sesión que evite salir de forma involuntaria y proteja la información personal del usuario.