¿Qué se necesita para una buena experiencia de salida?

Kenji Baheux
Kenji Baheux

Salir de la cuenta

Cuando un usuario sale de su cuenta en un sitio web, comunica 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, una experiencia de cierre de sesión adecuada también debe tener en cuenta las pestañas que el usuario pudo haber abierto antes de decidir salir.

La clave de una excelente experiencia de cierre de sesión se puede resumir en la coherencia en todos los aspectos visuales y estatales de la experiencia del usuario. Esta guía proporciona consejos concretos sobre a qué prestar atención y cómo lograr una buena experiencia al salir de la cuenta.

Consideraciones clave

Cuando implementes la función de cierre de 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 clara y coherente de salida: Proporciona un botón o un vínculo de cierre de sesión claro y coherente que se pueda identificar y acceder con facilidad en todo el sitio web. Evita usar etiquetas ambiguas, o bien ocultar la función para salir en menús, subpáginas o cualquier otra ubicación poco intuitiva.
  • 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 accidentalmente y permite que reconsideren si realmente necesitan hacerlo, por ejemplo, si bloquean diligentemente sus dispositivos con una contraseña segura o algún otro mecanismo de autenticación.
  • Administra varias pestañas: Si un usuario abrió varias páginas desde el mismo sitio web en diferentes pestañas, asegúrate de que al salir de una pestaña también se actualicen todas las demás pestañas abiertas de ese sitio web.
  • Redireccionamiento a una página de destino segura: Después de salir 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 el estado de acceso. Además, asegúrate de no compilar un redireccionamiento abierto que los atacantes puedan aprovechar.
  • Limpieza de la sesión: Una vez que un usuario salga de su cuenta, quita por completo todos los datos sensibles de la sesión del usuario, las cookies o los archivos temporales asociados con la sesión del usuario. Esto impide el acceso no autorizado a la información del usuario o a la actividad de la cuenta, y también evita que el navegador restablezca páginas con información sensible de sus diferentes memorias caché, en particular de la memoria caché atrás/adelante.
  • Manejo de errores y comentarios: Proporciona comentarios o mensajes de error claros a los usuarios si surge algún problema cuando salen de sus cuentas. Infórmales sobre cualquier riesgo potencial de seguridad o filtraciones de datos si falla el proceso de cierre de sesión.
  • Consideraciones de accesibilidad: Asegúrate de que el mecanismo de cierre de sesión sea accesible para los usuarios con discapacidades, incluidos aquellos que usan tecnologías de accesibilidad como lectores de pantalla o navegación con teclado.
  • Compatibilidad con varios navegadores: Prueba la función de salida en diferentes navegadores y dispositivos para asegurarte de que funcione de manera coherente y confiable.
  • Supervisión y actualizaciones continuas: Supervisa periódicamente el proceso de cierre de sesión en busca de 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 salir del proveedor de identidad también es compatible y es necesario. 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 salida (o algún otro flujo de revocación de acceso), asegúrate de borrar también la cookie en el dispositivo del usuario.
  • Borra 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 del dispositivo del usuario estén actualizadas con las revocaciones de acceso del servidor.

Borrar datos sensibles al salir de la cuenta

Cuando salgas, considera borrar los datos sensibles efímeros y almacenados de forma local. El enfoque en los datos sensibles está motivado por el hecho de que borrar todo daría como resultado una experiencia del usuario mucho peor, ya que es muy probable que regrese. Por ejemplo, si borraste todos los datos almacenados de forma local, los usuarios deberán volver a aceptar los mensajes de consentimiento para el uso de cookies y realizar otros procesos como si nunca hubieran visitado tu sitio web.

Cómo borrar cookies

En la respuesta para la página que confirma el estado sin acceder a la cuenta, adjunta los encabezados HTTP Set-Cookie para borrar todas las cookies relacionadas o que contengan datos sensibles. Establece el valor de expires en una fecha de un pasado lejano y, por si acaso, establece el valor de la cookie en una cadena vacía.

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

Situación sin conexión

Si bien el enfoque descrito anteriormente es suficiente para los casos de uso generales, no funciona si el usuario trabaja sin conexión. Tal vez te convenga solicitar dos cookies para realizar el 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 proceder con otras operaciones de limpieza, si es posible. Si tienes un service worker, es posible que también te convenga aprovechar la Background Fetch API para volver a intentar una solicitud de eliminación del 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, borra los datos sensibles de varios almacenes de datos:

  • sessionStorage: Aunque esta acción se borra cuando el usuario finaliza su sesión en tu sitio web, considera borrar de forma proactiva los datos sensibles cuando el usuario sale de su cuenta, en caso de que se olvide de cerrar todas las pestañas abiertas en tu 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 y Cache/Service Worker: Cuando el usuario salga de su cuenta, borra todos los datos sensibles que hayas almacenado con estas APIs, ya que esos 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 cachés

  • Caché HTTP: Siempre que configures Cache-control: no-store en los recursos con datos sensibles, la caché HTTP no retendrá ningún contenido sensible.
  • Memoria caché atrás/adelante: Del mismo modo, si seguiste las recomendaciones sobre Cache-control: no-store y sobre borrar cookies sensibles (por ejemplo, cookies seguras solo de HTTPS 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 del mismo origen que se publiquen con un encabezado HTTP Cache-control: no-store si observa uno o más de los siguientes indicadores:
    • Se modificaron o borraron una o más cookies seguras que solo HTTPS.
    • Una o más respuestas a las llamadas XHR/fetch, emitidas por la página, incluían 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 de tu sitio web antes de salir de la cuenta. Para entonces, es posible que se hayan olvidado de otras pestañas o incluso de otras ventanas del navegador. Lo mejor es evitar depender de los usuarios para cerrar 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/pagehide y la API de Broadcast Channel.

  • Evento pageshow: Luego de un pageshow persistente, verifica el estado de acceso del usuario y borra los datos sensibles (o incluso toda la página) si el usuario ya no accedió. Ten en cuenta que el evento pageshow se activará antes de que se renderice la página por primera vez cuando se restablezca después de la navegación hacia atrás/adelante, lo que garantiza que la verificación de estado de acceso te permitirá 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 los cambios de estado de acceso en las pestañas y ventanas. Si el usuario salió de su cuenta, borra todos los datos sensibles o redirecciona a la página de cierre de sesión en todas las pestañas y ventanas que contengan datos confidenciales.

    // 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 del usuario que prevenga salidas accidentales y proteja la información personal del usuario.