前端安全总览

前端代码运行在用户浏览器中，攻击面包括：渲染不可信数据、浏览器同源策略被绕过或配置不当、存储敏感信息、跨窗口通信、供应链依赖等。防御原则是：默认不信任任何外部输入、最小权限、纵深防御（前端校验 + 后端强制校验 + 传输与头部策略）。

常见威胁类别一览

编号	类别	典型后果	纵深防御要点
02	XSS（跨站脚本）	Cookie 窃取、会话劫持、钓鱼	输出编码、CSP、HttpOnly Cookie
03	CSRF（跨站请求伪造）	非自愿转账、改密、删数据	CSRF Token、SameSite、校验 Origin
04	点击劫持	诱导点击敏感操作	frame-ancestors / X-Frame-Options
05	开放重定向	钓鱼、恶意跳转	白名单跳转、禁止用户可控完整 URL
06	原型链污染	全局逻辑被篡改、RCE 前置	冻结原型、Object.create(null)、校验合并
07	敏感数据与存储	Token 泄露、XSS 后全盘失守	不落库敏感令牌、Secure Cookie
08	CORS 配置不当	跨域读接口、辅助 CSRF	精确 Origin、勿配 * + 凭证
09	postMessage 滥用	跨窗口窃取数据、指令注入	校验 origin、结构化协议
10	第三方脚本与供应链	全站被挂马、构建投毒	SRI、锁定依赖、审查脚本
11	传输与 MITM	窃听、篡改会话	全站 HTTPS、HSTS
12	注入（SQL/命令等）	数据泄露、服务器沦陷	参数化查询（后端为主）、勿拼接
13	恶意上传与路径穿越	Webshell、任意文件读	类型校验 + 服务端存储隔离
14	ReDoS（正则回溯）	CPU 占满、拒绝服务	安全正则、超时与长度限制
15	JSONP / 不安全回调	敏感 JSON 泄露	弃用 JSONP、改用 CORS + 鉴权

前端在攻防中的定位

1. 界面层：控制怎样把字符串放进 DOM（决定 XSS 面）。
2. 请求层：决定_cookie、Token、自定义头发送规则（与 CSRF、CORS 相关）。
3. 存储层：localStorage 无 HttpOnly，一旦被 XSS 等同明文泄露。
4. 依赖层：npm 包与 CDN 脚本可直接改写运行时行为。

因此：没有任何「纯前端」能单独挡住恶意请求，前端做的是 降低暴露面 与 配合后端策略；最终权限校验与持久化安全必须在服务端完成。

推荐阅读顺序

按编号 02 → 15 阅读具体专题；每一篇均包含 攻击思路示意代码、防护代码或配置 与 原理讲解。若时间有限，优先掌握 XSS、CSRF、CORS、开放重定向 四类常见要点。