spa的xss更难防，因其动态dom操作频繁（如innerhtml、v-html）、路由参数和hash等前端可控输入易被直接执行，且csp对eval、function构造器、javascript:伪协议等无效。
单页面应用（SPA）不是靠服务端渲染 HTML，而是靠前端 JavaScript 动态拼接、插入或替换 DOM。这种模式放大了客户端安全风险——XSS 更易触发、CSP 配置更易失效、路由劫持更隐蔽、敏感逻辑更容易被逆向。不处理好，location.hash 或 history.pushState 就可能变成攻击入口。
为什么 SPA 的 XSS 更难防？
传统多页应用中，用户输入通常只在服务端模板里渲染一次；而 SPA 中，同一段数据可能被反复塞进 innerHTML、document.write、v-html、dangerouslySetInnerHTML，甚至拼进 eval 或 Function 构造器里执行。
- 常见错误现象：
alert(1)能弹出，但服务端返回的 JSON 里明明已做 HTML 转义——问题出在前端又用el.innerHTML = data.content手动插入 - Vue/React/Angular 默认不转义插值内容（如
{{ rawHtml }}），必须显式用v-html/dangerouslySetInnerHTML才会触发，但开发者常误以为“用了框架就安全” - 路由参数、URL hash、
localStorage读取的数据，未经校验直接传给eval或setTimeout第二个参数，等于主动执行任意代码 - 第三方库如
marked、highlight.js渲染富文本时默认不开启 sanitizer，<script></script>标签照常执行
CSP 头在 SPA 中为什么经常形同虚设？
很多团队加了 Content-Security-Policy 却没意识到：SPA 的动态性天然绕过 CSP 的多数限制。比如 script-src 'self' 挡不住通过 fetch 拉回来的 JS 字符串再用 eval 执行；unsafe-inline 一开，所有内联事件（onclick="..."）和 style 属性全放行。
- 典型配置陷阱：
script-src 'self' https://cdn.example.com看似严格，但若前端用new Function(response.data.jsCode)加载远程脚本，CSP 完全无效 - Vue Router 的
beforeEach钩子若拼接 URL 后调用window.open，且未校验协议（如允许javascript:alert(1)），CSP 对javascript:伪协议无约束力 - 调试阶段常用
eval查看响应体，上线忘记删，等于留后门；console.log里打印敏感 token 也常被忽略
如何安全地处理路由参数与 URL 片段？
SPA 的路由状态几乎全靠 URL 维持，location.search、location.hash、history.state 都是不可信输入源。不能因为“它没发到服务端”就放松校验。
- 避免直接解析
location.hash.slice(1)后JSON.parse—— 攻击者可构造#{"x":"<script>alert(1)</script>"}，导致解析失败或 DOM 注入 - 使用
URLSearchParams解析 query，而非正则或split('&')；对每个 value 做白名单校验（如 ID 只接受数字，type 只接受['list', 'detail']） - Vue Router / React Router 的
router.push若拼接用户可控字符串（如{ path: `/user/${id}` }），需确保id已过滤特殊字符（/、.、..）防止路径穿越 - 不要把 token、密钥等敏感字段塞进
location.search或hash—— 它们会留在浏览器历史、被日志采集、甚至同步到云端
前端存储与状态管理中的隐性泄漏点
SPA 重度依赖 localStorage、sessionStorage、Vuex/Pinia store、Redux state，但这些地方常存着未脱敏的用户信息、临时 token、甚至完整 API 响应体。
-
localStorage.setItem('user', JSON.stringify(user))是高危操作：一旦 XSS 触发，攻击者一行JSON.parse(localStorage.getItem('user'))就能拿到邮箱、手机号、权限列表 - Persisted store（如
pinia-plugin-persistedstate）默认序列化整个 state 到localStorage，若 state 包含accessToken或refreshToken，等同于明文暴露 - 调试工具（如 Vue Devtools）启用时，store 数据可被任意脚本读取；生产环境务必禁用
devtools: false - 错误监控 SDK（如 Sentry）若未配置
denyUrls或ignoreErrors，可能把包含 token 的请求头、堆栈信息上传到第三方服务器
SPA 的安全边界不在服务端，而在每一次 innerHTML 赋值、每一次 eval 调用、每一个未校验的 location 属性访问里。最容易被忽略的，是那些“看起来只是展示数据”的地方——比如一个带搜索高亮的列表，高亮逻辑若用 replace() + innerHTML，就足以让搜索词变成 XSS 入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
