信息安全 - 将数据从 localStorage 直接渲染到 DOM 是否安全？XSS 攻击可能吗？ - 吾爱随笔录

我读到 localstorage 容易受到 XSS 攻击。

我目前将 JSON Web Token (JWT) 存储在 localstorage 中，并通过 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();

在某些时候，我会在 DOM 上呈现一些用户信息：

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

所以基本上：

登录时，将令牌存储在客户端的 localStorage 中
访问 localStorage 并直接渲染到 DOM

该工作流程是否包含 XSS 向量？这样好吗？如果不是，我还有其他想法：

(1) 更好的解决方案是：

登录时，将令牌存储在客户端的 localStorage 中
每当我需要显示用户信息时，从 localStorage 中获取令牌并使用它直接查询服务器以获取用户信息

客户端获取用户数据，在 DOM 中渲染

IE，

// 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
}

缺点：每次我需要用户数据时都必须向服务器发出请求。不理想。

(2) 或者这个：

登录时，将令牌存储在客户端的 localStorage 中
访问 localStorage，管道数据到 sanitizer，直接渲染到 DOM

IE， <span> How are you, {{ sanitize(name) }} </span>

优点：简单修复原始，干净并且不必向服务器发出请求。

缺点：必须记住每次将数据传输到sanitize(). 很容易忘记。但我觉得这比每次都像（1）中那样提出请求要好