Leí que el almacenamiento local es susceptible a los ataques XSS.
Actualmente almaceno JSON Web Token (JWT) en localstorage, y accedo y muestro datos sobre el usuario a través de localstorage:
var localstore = // localStorage object
// On user login, server responds with token, store the token on client!
localstore.store(jwt_token);
// later, grab some data out of token
var name = localStore.getName();
Y, en algún momento, ofrezco información de usuario en el DOM con:
<span> Welcome to your profile page! </span>
<span> How are you, {{ name }} </span>
Básicamente:
- Al iniciar sesión, almacene el token en el cliente en localStorage
- Acceda a localStorage y renderice directamente a DOM
¿Ese flujo de trabajo contiene un vector XSS? ¿Está bien? Tengo otras ideas si no lo es:
(1) Sería una mejor solución:
- Al iniciar sesión, almacene el token en el cliente en localStorage
- Siempre que necesite mostrar información del usuario, tome el token de localStorage y utilícelo para consultar directamente en el servidor la información del usuario
-
el cliente obtiene los datos de usuario, los procesa en DOM
es decir,
// prepare jwt to be sent to server http.setAuthenticationBearer(localstore.retrieveToken()); // Request user data with jwt! http.get('/profile').success( function(data) { var name = data['name']; // render 'name' in DOM }
CONS: Tengo que hacer una solicitud al servidor cada vez que necesito datos de usuario. No es ideal.
(2) O esto:
- Al iniciar sesión, almacene el token en el cliente en localStorage
-
Acceda a localStorage, canalice los datos a Sanitizer, renderice directamente a DOM
es decir,
<span> How are you, {{ sanitize(name) }} </span>
PRO: solución simple a la original, limpia y no tiene que realizar solicitudes al servidor.
CONs: Hay que recordar cada vez que se canalizan datos a sanitize()
. Puede ser fácil de olvidar. Pero creo que es mejor que tener que realizar solicitudes cada vez como en (1)