Se usó la API de Cloud Translation para traducir esta página.

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

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 apegarse lo más posible al modelo mental del usuario. Por ejemplo, una experiencia de salida adecuada también debe tener en cuenta las pestañas que el usuario podría haber abierto antes de decidir salir.

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

Consideraciones clave

Cuando implementes la función de salida en tu sitio web, presta atención a los siguientes aspectos para garantizar un proceso de salida sencillo, seguro e intuitivo:

UX de salida clara y coherente: Proporciona un botón o vínculo de salida claro y visible de forma coherente que sea fácil de identificar y al que se pueda acceder en todo el sitio web. Evita usar etiquetas ambiguas o ocultar la función de salida en menús, subpáginas o en 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 accidentalmente y les permite reconsiderar si realmente necesitan salir, por ejemplo, si bloquean su dispositivo con una contraseña segura o algún otro mecanismo de autenticación.
Controla varias pestañas: Si un usuario abrió varias páginas del mismo sitio web en diferentes pestañas, asegúrate de que salir de una pestaña también actualice todas las demás pestañas abiertas de ese sitio web.
Redirecciona a una página de destino segura: Después de salir de la sesión correctamente, redirecciona al usuario a una página de destino segura que indique claramente que ya no está en la sesión. Evita redireccionar a los usuarios a páginas que tengan información personalizada. Del mismo modo, asegúrate de que las otras pestañas tampoco reflejen un estado de acceso. Además, asegúrate de no crear un redireccionamiento abierto del que los atacantes puedan aprovecharse.
Limpieza de la sesión: Una vez que un usuario cierra sesión, se quitan por completo los datos sensibles de la sesión del usuario, las cookies o los archivos temporales asociados con ella. Esto evita el acceso no autorizado a la información del usuario o a la actividad de la cuenta, y también evitará que el navegador restablezca páginas con información sensible desde sus diversas cachés, en particular la caché de atrás/adelante.
Control de errores y comentarios: Proporciona mensajes de error o comentarios claros a los usuarios si hay algún problema cuando salen de sus cuentas. Infórmale sobre los 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, incluidos los que usan tecnologías de accesibilidad, como lectores de pantalla o navegación con el teclado, puedan acceder al mecanismo de salida.
Compatibilidad con varios navegadores: Prueba la funcionalidad de cierre de sesión en diferentes navegadores y dispositivos para asegurarte de que funcione de forma coherente y confiable.
Supervisión y actualizaciones continuas: Supervisa el proceso de salida con regularidad para detectar posibles vulnerabilidades o lagunas de seguridad. Implementa actualizaciones y parches oportunos para abordar los problemas identificados.
Federación de identidades: Si el usuario accedió con una identidad federada, verifica si también se admite y es necesario salir del proveedor de identidad. Además, si el proveedor de identidad admite el acceso automático, no olvides impedirlo.

LO QUE DEBES HACER

Si invalidas una cookie en el servidor como parte de un flujo de salida (o de otros flujos de revocación de acceso), asegúrate de borrarla también en el dispositivo del usuario.
Limpia los datos sensibles que puedas haber almacenado en el dispositivo del usuario: cookies, localStorage, sessionStorage, indexedDB, CacheStorage y cualquier otro almacén de datos local.
Asegúrate de que los recursos que contengan datos sensibles, en particular los documentos HTML, se muestren con el encabezado HTTP Cache-control: no-store para que el navegador no los almacene en el almacenamiento permanente (por ejemplo, en el disco). De manera similar, las llamadas XHR o 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.

Limpieza de datos sensibles cuando sales de la cuenta

Cuando salgas, considera borrar los datos sensibles efímeros y almacenados localmente. El enfoque en los datos sensibles se debe al hecho de que borrar todo provocaría una experiencia del usuario mucho peor, ya que es muy probable que este usuario regrese. Por ejemplo, si borraras todos los datos almacenados de forma local, tus usuarios tendrían que volver a aceptar los mensajes de consentimiento de cookies y realizar otros procesos como si nunca hubieran visitado tu sitio web.

Cómo borrar las cookies

En la respuesta de la página que confirma el estado de salida, adjunta encabezados HTTP Set-Cookie para borrar todas las cookies relacionadas con datos sensibles o que los contengan. Establece el valor de expires en una fecha del pasado lejano y establece el valor de la cookie en una cadena vacía para mayor seguridad.

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 casos de uso generales, no funciona si el usuario está trabajando sin conexión. Te recomendamos que requieras dos cookies para hacer un seguimiento del estado de acceso: una cookie segura de solo 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 trabajador de servicio, también te recomendamos que aproveches la API de Background Fetch para reintentar una solicitud de estado claro en el servidor cuando el usuario esté en línea más adelante.

Cómo liberar espacio de almacenamiento

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

sessionStorage: Aunque se borra cuando el usuario finaliza su sesión con tu sitio web, considera limpiar de forma proactiva los datos sensibles cuando el usuario salga, 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();
```

localStorage, indexedDB, Cache/Service Worker: Cuando el usuario salga de la cuenta, borra los datos sensibles que puedas haber almacenado con estas APIs, ya que estos datos persistirán en todas las 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á nada que sea sensible.
Caché de navegación: Del mismo modo, si seguiste las recomendaciones sobre Cache-control: no-store y sobre cómo borrar cookies sensibles (por ejemplo, cookies seguras de solo HTTPS relacionadas con la autenticación) cuando los usuarios salen de sus cuentas, no debes preocuparte de que se retengan datos sensibles en la caché de navegación. De hecho, la función de la caché de atrás/adelante expulsará las páginas del mismo origen que se entreguen 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 de solo HTTPS.
- Una o más respuestas para las llamadas XHR o 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 de tu sitio web antes de decidir salir. Para ese momento, es posible que se haya 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 su lugar, 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: Cuando se produce 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 la página se renderice por primera vez cuando se restablezca desde una navegación hacia atrás o hacia 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();
  }
});
```

La 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 la sesión, borra todos los datos sensibles o, como alternativa, redirecciona a una página de salida en todas las pestañas y ventanas con 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

Si sigues las instrucciones de este documento, podrás diseñar una excelente experiencia de salida del usuario que evite salidas no deseadas y proteja su información personal.