Web 安全基础：XSS 与 CSRF 防护实践

网页安全的核心是同源策略（Same-Origin Policy），它限制不同源的文档或脚本相互访问，但实际应用中需要额外机制防御特定攻击。常见威胁包括 XSS 和 CSRF。

---

🔐 XSS（跨站脚本攻击）

原理：攻击者向网页注入恶意脚本（如 <script>alert('hack')</script>），当用户访问时脚本执行，窃取Cookie、会话令牌或执行任意操作。
类型：反射型（URL参数注入）、存储型（数据库持久化）、DOM型（前端路由修改）。

处理方式

前端（浏览器端）

1. 输出转义：动态插入HTML时，将特殊字符转义为实体：
   & → &，< → <，> → >，' → '，" → "
   使用 textContent 而非 innerHTML。
2. CSP（内容安全策略）：通过 Content-Security-Policy 响应头限制脚本来源，禁止 unsafe-inline。
3. HttpOnly Cookie：标记 HttpOnly 防止JS读取敏感Cookie。

Node.js 后端

1. 输出编码：模板引擎（如EJS、Pug）默认转义HTML；JSON返回时确保不直接拼接用户输入。
2. 输入过滤：对用户提交的数据做白名单清理（如 DOMPurify 库），但不依赖过滤防御XSS。
3. 设置安全头：使用 helmet 中间件自动启用CSP、X-XSS-Protection等。

---

🔄 CSRF（跨站请求伪造）

原理：攻击者诱导用户登录的浏览器向目标网站发送伪造请求（如通过隐身<img>或自动提交表单），利用用户Cookie执行非本意操作（改密码、转账）。

处理方式

前端

• 不将敏感Token存储在Cookie中，改用 Authorization 请求头发送Token（如JWT），或使用 SameSite Cookie属性。

Node.js 后端

1. CSRF Token（同步令牌）：
   • 为用户每个会话生成随机Token，嵌入表单隐藏字段或请求头 X-CSRF-Token。
   • 请求时后端校验Token是否匹配。
   • 实现可用 csurf 中间件（Express）或自己生成/比对。
2. SameSite Cookie：设置 Set-Cookie: sessionId=xxx; SameSite=Strict（或 Lax），限制跨站请求携带Cookie。
3. 验证 Referer/Origin：检查请求头 Origin 或 Referer 是否为可信域名（防御降级但非主要手段）。

---

🛡️ 其他常见安全

---

✅ 一句话总结

• XSS → 输出转义 + CSP + HttpOnly
• CSRF → CSRF Token + SameSite Cookie
• 永远不相信用户输入，始终对输出进行安全处理。