Web 安全是每个开发者必须了解的领域。XSS 和 CSRF 是最常见的两类攻击，理解它们的原理才能有效防御。
一、XSS：跨站脚本攻击
攻击者把恶意脚本注入到网页，在其他用户浏览器执行。
- 存储型：恶意代码存入数据库（如评论），他人访问时执行
- 反射型：恶意代码在 URL 里，服务器原样返回
- DOM 型：前端 JS 直接把不可信数据插入 DOM
二、XSS 危害
- 窃取用户 Cookie / Session
- 劫持用户操作
- 篡改页面、钓鱼
- 传播蠕虫
三、XSS 防御
// 永远不要
el.innerHTML = userInput;
// HTML 转义后再插入
el.textContent = userInput; // 自动转义- 输出转义：把 < > " 转成 < > "
- CSP：内容安全策略，限制脚本来源
- HttpOnly Cookie：JS 读不到，防窃取
- 框架自动转义：Vue/React 默认转义
最根本的防御：所有用户输入都当成不可信数据，输出到 HTML 时一定转义。现代前端框架默认做了转义，但 innerHTML、v-html 等要格外小心。
四、CSRF：跨站请求伪造
攻击者诱导已登录用户，在不知情下发送请求。比如用户登录银行后访问恶意网站，恶意网站偷偷发起转账请求——浏览器会自动带上用户的 Cookie。
五、CSRF 防御
- CSRF Token：服务端发一次性令牌，请求必须带上
- SameSite Cookie：限制跨站携带 Cookie
- 检查 Referer：验证请求来源
- 关键操作二次确认：如验证码、密码
六、其他常见威胁
- SQL 注入：用参数化查询防御
- 点击劫持：X-Frame-Options 防御
- 中间人攻击：HTTPS 防御
七、安全检查清单
- 所有用户输入都校验、转义
- 用参数化查询操作数据库
- 敏感 Cookie 设 HttpOnly + Secure + SameSite
- 部署 HTTPS
- 配置 CSP 头
八、小结
安全无小事。核心原则：永远不信任用户输入。掌握 XSS/CSRF 这两大基础威胁，能挡住绝大多数 Web 攻击。