Sicuro per il rendering dei dati direttamente su DOM da localStorage? Attacco XSS possibile?

Ho letto che la cronologia locale è suscettibile agli attacchi XSS.

Attualmente memorizzo JSON Web Token (JWT) in localstorage e accedo e visualizzo dati sull'utente tramite 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();

E a un certo punto rendo alcune informazioni utente sul DOM con:

<span> Welcome to your profile page! </span>
<span> How are you, {{ name }} </span>

Quindi in pratica:

• Al login, memorizza il token sul client in localStorage
• Accedi a localStorage e esegui il rendering direttamente su DOM

Quel flusso di lavoro contiene un vettore XSS? Va bene? Ho altre idee se non lo sono:

(1) Una soluzione migliore sarebbe:

• Al login, memorizza il token sul client in localStorage
• Ogni volta che ho bisogno di visualizzare le informazioni utente, prendi il token da localStorage e usalo per interrogare il server direttamente per le informazioni utente

• il client ottiene i dati dell'utente, lo rendono nel DOM

  cioè

  // 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: Devo fare una richiesta al server ogni volta che ho bisogno di dati utente. Non ideale.

(2) O questo:

• Al login, memorizza il token sul client in localStorage

• Accedi a localStorage, pipe data to sanitizer, render direttamente al DOM

  cioè <span> How are you, {{ sanitize(name) }} </span>

PRO: semplice correzione all'originale, pulita e non deve effettuare richieste al server.

CON: Devo ricordare ogni volta di inviare dati a sanitize() . Può essere facile da dimenticare. Ma ritengo sia meglio che dover fare richieste ogni volta come in (1)