10 · 前端安全常见坑

目标：建立 XSS / CSRF / 开放重定向 / CSP 直觉；清楚 Token 与敏感信息怎么放；能列出项目检查清单。

1. 背景与目标

安全不是背名词，是默认不信任输入、不乱跳转、不多暴露。本篇给可落地的检查单。

2. 核心概念

风险	一句话	前端侧常见动作
XSS	恶意脚本进你的页	默认文本插值；富文本消毒；避免 `v-html` / `dangerouslySetInnerHTML` 喂脏数据
CSRF	借登录态发跨站请求	Cookie 场景要 SameSite / CSRF Token；Bearer 在 Header 相对好一些仍需防 XSS 偷 Token
开放重定向	`?redirect=` 跳到钓鱼站	白名单域名 / 仅允许相对路径
CSP	限制脚本来源	减少内联脚本；配合上报

Token 存放直觉

位置	利	弊
memory	XSS 难持久偷	刷新丢，要配合静默续期
`localStorage`	简单	XSS 可读
HttpOnly Cookie	JS 读不到	要处理 CSRF、跨站

Journal 类 SPA 常用本地 Token + Header；前提是尽量堵住 XSS。

3. 最小实践：项目检查清单

复制到自己项目打勾：

[ ] 用户可控字符串默认走文本节点，不用 HTML 插槽
[ ] 富文本有消毒或白名单标签
[ ] redirect / returnUrl 校验同源或相对路径
[ ] 不在 URL、日志、埋点里打密码 / 完整 Token
[ ] 生产关掉过于详细的前端报错栈对外暴露（按产品策略）
[ ] 依赖定期看高危 CVE（至少意识上有流程）
[ ] 上传文件校验类型与大小（前后端都要）
[ ] 管理端与 C 端权限在后端再判一次，前端隐藏不等于安全

4. 踩坑与取舍

「我们是内部系统」：一样会被 XSS / 社工。
只防 CSRF、放任 XSS：Token 照样被偷。
CSP 一次上太严：先 report-only 再 enforce。
把密钥写进前端包：任何「前端密钥」都视为已公开。

5. 验收清单

[ ] 能口述 XSS 与 CSRF 差别及一例防护
[ ] 写下本项目 Token 存放方式与理由
[ ] 完成上面检查单至少 5 项对照
[ ] 找一处 v-html / 跳转参数并评估风险

6. 下一步

阶段 1 收束。继续体验向：
→ 11 · Canvas 与 2D 可视化入门

或先复习 09 · 网络与缓存。

参考链接