XSS（跨站脚本）：恶意脚本被注入页面并在受害者浏览器执行——document.cookie 被偷、钓鱼表单、挂马。防御：① 输出转义（Vue/React 默认转义插值，dangerouslySetInnerHTML/v-html 才危险）；② CSP（Content-Security-Policy 限制脚本来源、禁内联）；③ HttpOnly 让 JS 读不到 cookie；④ 富文本白名单过滤（DOMPurify）。
CSRF（跨站请求伪造）：用户在 A 站登录后，恶意站点 B 发起对 A 的请求（img src、自动提交表单），浏览器自动带上 A 的 cookie，于是以受害者身份完成转账/发帖。防御：① SameSite cookie（Lax/Strict 默认不带跨站请求）；② CSRF token（服务器发一次性 token，请求必须带上）；③ 关键操作二次确认（验证码/密码）。
<!-- XSS 防御示例 --> React/Vue 插值默认转义：{ user.name } ← 即便 name 含 <script> 也只显示文本 <!-- ✗ 危险：用户输入直接渲染 HTML --> <div dangerouslySetInnerHTML={{ __html: userInput }} /> <!-- ✓ 富文本场景：DOMPurify 白名单清洗 --> <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} /> <!-- CSP 头：只允许本源与指定 CDN 的脚本，禁内联事件 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' cdn.x.com; style-src 'self'"> <!-- CSRF 防御示例（同源策略保护下 token 方案） --> <form action="/transfer" method="POST"> <input type="hidden" name="csrf_token" value="来自服务器的随机token" /> <input name="amount" /> <button>转账</button> </form> <!-- SameSite=Lax：浏览器默认对跨站请求不带 cookie -->