Cross-Session Contamination

La transferencia de valores entre localStorage y sessionStorage puede exponer información confidencial inintencionadamente.

HTML5 proporciona mapas localStorage y sessionStorage de manera que los desarrolladores pueden conservar valores de programa. El mapa sessionStorage proporciona almacenamiento para la página de invocación y dura solo el tiempo de la instancia de la página y de la sesión inmediata del explorador. El mapa localStorage, sin embargo, proporciona almacenamiento al que se puede acceder mediante varias instancias de página y varias instancias de explorador. Esta funcionalidad permite a una aplicación conservar y utilizar la misma información en varias pestañas o ventanas de explorador.

Por ejemplo, un desarrollador puede querer utilizar varias pestañas o instancias de explorador en una aplicación de viajes y además querer que un usuario pueda abrir varias pestañas para comparar alojamientos, al mismo tiempo que se conservan los criterios de búsqueda originales del usuario. En las condiciones de almacenamiento HTTP habituales, el usuario se arriesga con compras y decisiones que realiza en una pestaña (y que se almacenan en la sesión o en las cookies), lo que interfiere en las compras que realiza en otra pestaña.

Con la capacidad de utilizar valores de usuario entre varias pestañas del explorador, los desarrolladores deben tener cuidado de no traspasar información confidencial del ámbito sessionStorage al ámbito localStorage y viceversa.

Ejemplo 1: En el ejemplo siguiente, se almacena la información del CCV de una tarjeta de crédito en la sesión para indicar que un usuario ya ha autorizado al sitio para que realice cargos en la tarjeta que consta en el archivo como método de pago de la compra. Para cada intento de compra dentro del contexto de la pestaña del explorador, se requiere la aprobación de la tarjeta de crédito. Para evitar tener que introducir el número CCV de nuevo, la información se almacena en el objeto sessionStorage. No obstante, el desarrollador también almacena la información en el objeto localStorage.

...
try {
    sessionStorage.setItem("userCCV", currentCCV);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
    }
}

...
...

var retrieveObject = sessionStorage.getItem("userCCV");
try {
    localStorage.setItem("userCCV",retrieveObject);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
    }
    ...

    var userCCV = localStorage.getItem("userCCV");
    ...
}
...

Al volver a colocar la información en el objeto localStorage, la información del número CCV ahora está disponible en otras pestañas del explorador además de en las invocaciones nuevas del explorador. Esto omitirá la lógica de la aplicación para el flujo de trabajo previsto.