AngularJS非SPA应用用$localStorage存用户信息是否合规？

先说结论：用$localStorage存储这类用户数据并不属于最佳实践，而且存在不少值得警惕的安全风险，下面我详细拆解下：

为什么$localStorage不是最优选择？ #

• $localStorage是持久化存储，数据会一直保存在用户浏览器中，直到用户手动清除缓存或者你主动删除它。但用户身份信息通常属于会话级数据，用户关闭浏览器后理应失效，持久化存储会额外增加信息泄露的风险。
• 它本质上是把数据以明文字符串的形式存在本地，没有任何默认的加密保护，这对用户个人信息来说是个不小的安全漏洞。

核心安全隐患 #

• XSS攻击易受侵害：如果你的应用存在XSS漏洞，攻击者可以通过注入恶意脚本直接读取$localStorage里的所有数据。一旦拿到用户的姓名、邮箱这些信息，他们不仅可以冒充用户展示虚假内容，还可能利用这些信息发起进一步的攻击。
• 公共设备信息泄露：如果用户在网吧、共享电脑这类公共设备上登录后没有主动登出或清理数据，后续使用该设备的人可以直接从$localStorage中获取到用户的个人信息，隐私泄露风险极高。
• 数据易被篡改：用户可以轻松通过浏览器开发者工具修改$localStorage中的内容，比如把firstName改成任意值。如果你的前端直接用这些未经校验的数据展示，会导致内容不可信，甚至可能触发一些依赖用户信息的逻辑漏洞。

更安全的替代方案 #

• 优先用$sessionStorage：它的生命周期和当前浏览器会话绑定，用户关闭浏览器后数据会自动清除，虽然同样面临XSS风险，但至少消除了持久化带来的长期泄露隐患，适合存储会话内需要用到的用户信息。
• 依赖服务器端会话管理：这是最安全的方案。登录成功后，服务器返回一个带有HttpOnly和Secure属性的会话Cookie（这个Cookie无法被前端脚本读取，能有效防范XSS），前端后续的请求自动携带这个Cookie，用户信息从服务器端的会话中获取——每次页面跳转时，通过$http请求服务器的用户信息接口拿到最新数据。这样客户端不会存储任何敏感用户数据，所有验证逻辑都在服务器端完成，安全性大幅提升。
• 若必须客户端存储则加密：如果业务场景确实需要在本地存储用户数据，一定要对数据进行加密处理。比如用加密算法把用户JSON字符串加密后再存入$localStorage，读取时再解密。同时要严格防范XSS漏洞，比如对所有用户输入做过滤转义，使用AngularJS的ng-bind而非原生拼接HTML来展示内容，避免脚本注入。

内容的提问来源于stack exchange，提问作者Taran Vohra