WebStorage本身不执行代码，但存取不当会引发XSS；需写入前过滤（白名单校验、DOMPurify清理）和读取后安全使用（禁用eval/innerHTML，推荐textContent/JSON.parse）；配合CSP及避免存储敏感信息。

WebStorage（localStorage 和 sessionStorage）本身不会主动执行代码，但若将不可信数据直接写入后又通过 innerHTML、eval、setTimeout 等方式读取并执行，就可能触发 XSS。防范重点不在 WebStorage 本身，而在于“写入前过滤”和“读取后安全使用”。

写入前：永远不要信任客户端输入

用户可控的数据（如 URL 参数、表单输入、API 返回内容）在存入 localStorage/sessionStorage 前，必须做严格校验或转义：

• 仅允许白名单字符（如纯数字 ID、固定格式 token），用正则或 schema 验证
• 若需存储 HTML 片段，应使用 DOMPurify 等库清理后再保存，而非原样存入
• 避免把服务端下发的未过滤脚本字符串（如含 <script></script> 或 javascript: 的富文本）直接塞进 storage

读取后：禁止动态执行 storage 中的数据

从 localStorage 取出的数据默认是字符串，危险操作包括：

• ❌ 不要： eval(localStorage.getItem('code'))
• ❌ 不要： element.innerHTML = localStorage.getItem('html')
• ❌ 不要： setTimeout(localStorage.getItem('timer'), 100)
• ✅ 推荐：用 textContent 渲染文本；用 JSON.parse() 解析结构化数据（确保内容是合法 JSON）；用 document.createElement + setAttribute 安全构造元素

配合 Content Security Policy（CSP）增强防御

即使 storage 被污染，CSP 可阻断内联脚本执行：

• 设置 Content-Security-Policy: script-src 'self'，禁止 eval 和内联脚本
• 避免使用 'unsafe-eval' 或 'unsafe-inline'
• CSP 无法阻止 storage 写入恶意内容，但能大幅降低其被利用的成功率

敏感信息不应存于 WebStorage

localStorage 是持久、可读、无同源限制（仅受协议/域名/端口约束）的存储，不适用场景包括：

• 用户密码、JWT token（应存在 httpOnly Cookie）、银行卡号等
• 权限标识（如 isAdmin: true）——易被前端篡改，服务端必须重新鉴权
• 替代方案：短期状态用 sessionStorage；敏感凭证交由后端 session 管理；必要缓存可用加密后存储（但密钥管理需谨慎）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！