XSS 与 CSRF
两个“前端相关”但后端必须懂的攻击：XSS 偷数据，CSRF 冒用身份。
XSS：跨站脚本
原理：攻击者把脚本注入页面，在受害者浏览器里执行（窃取 Cookie、篡改页面、钓鱼）。
| 类型 | 机制 | 例子 |
|---|---|---|
| 反射型 | 输入即时回显（URL 参数） | ?q=<script>... |
| 存储型 | 输入存库，所有人访问触发 | 评论区发恶意脚本 |
| DOM 型 | 前端 DOM 操作执行 | innerHTML 注入 |
防护三件套：
| 防护 | 机制 |
|---|---|
| 输出编码 | 上下文感知转义（HTML/属性/JS） |
| CSP | Content-Security-Policy 限制脚本来源（白名单） |
| HttpOnly Cookie | 脚本读不到 Cookie（防窃取会话） |
后端职责：输出编码是默认动作（模板引擎默认转义，|safe/v-html 是危险操作）；存储型 XSS 的校验要在后端做。
CSRF：跨站请求伪造
原理：用户已登录（Cookie 有效），攻击者诱导浏览器发请求，利用 Cookie 自动携带冒充用户操作。
用户在银行已登录 → 访问恶意页面 → 页面发 POST /transfer?to=attacker
→ 浏览器自动带 Cookie → 银行以为是用户操作防护：
| 方案 | 机制 |
|---|---|
| CSRF Token | 表单带随机 token，服务端校验（状态无关请求） |
| SameSite Cookie | Cookie 只随同站请求发送（现代默认 Lax） |
| 双重提交 | Cookie 和请求头都带 token，服务端对比 |
| 自定义头 | 要求请求带自定义头（跨域发不了） |
与 XSS 的关系：XSS 能偷 CSRF token，所以 CSRF 防护依赖 XSS 防护。
现代框架的默认防护
- 前端框架（React/Vue）默认转义输出 → 反射/存储型 XSS 大幅减少
- SameSite=Lax 默认 → CSRF 基本失效（跨站 POST 不携带 Cookie，同站导航的 GET 仍带）
- 面试话术：框架默认防护 + 后端输出编码 + SameSite，三层是现代标准
面试追问
- XSS 三种类型？ 反射（回显）、存储（入库）、DOM（前端执行）。存储型危害最大
- XSS 防护？ 输出编码 + CSP + HttpOnly。后端输出编码是默认动作
- CSRF 原理？ 浏览器自动带 Cookie，攻击者诱导发请求冒充用户。读操作 GET 也能中招
- CSRF 防护？ CSRF Token、SameSite Cookie、自定义头。现代默认 SameSite
- XSS 和 CSRF 的关系？ XSS 能偷 token 破 CSRF 防护，所以先防 XSS