Web 安全基础指南（2025）
本栏目聚焦前端工程师需要掌握的 Web 攻击与防御：XSS、CSRF、点击劫持等，同时补充 CSP、SameSite、Token 防护、Zero Trust、AI 时代常见风控策略。阅读顺序建议：先了解
README目录概览，再逐篇查看具体攻击类型。
漏洞类型导航
| 篇章 | 内容 | 快速防护思路 |
|---|---|---|
| 01-XSS | 跨站脚本（存储型 / 反射型 / DOM 型） | 输入输出净化 + CSP + HttpOnly Cookie + SameSite |
| 02-CSRF | 跨站请求伪造 | Token / SameSite / 二次确认 |
| 03-点击劫持 | UI 欺骗、浮层诱导 | X-Frame-Options、frame-ancestors、双重验证 |
2024-2025 安全趋势
- 浏览器安全策略升级：Chrome/Firefox 默认阻止混合内容、增强 SameSite=Lax 行为、逐步收紧第三方 Cookie。
- CSP 与 Trusted Types：大厂逐渐要求开启 CSP Level 3、
Trusted Types防止 DOM XSS。 - 身份与访问控制：OAuth2/OIDC、Passkey、多因子认证成为标准。前端需要合理处理 Token 刷新、短期凭证。
- AI 风险：Prompt Injection、数据外泄、AI 接口滥用；需结合输出过滤、上游服务鉴权、速率限制。
- 零信任与 SASE：前端应用需适配企业级零信任策略，如基于用户/设备态的动态授权。
常用防护框架
- 输入消毒与输出编码：HTML/JS/CSS/URL 使用合适的编码函数（如 DOMPurify、OWASP Java Encoder）。
- 安全响应头：
Content-Security-Policy、Strict-Transport-Security、X-Frame-Options、X-Content-Type-Options、Referrer-Policy。 - Cookie 策略：设置
HttpOnly、Secure、SameSite=Lax/Strict，敏感信息改用 Token/Session Storage。 - 鉴权与授权：Token 机制、权限系统、最小权限、双重验证；对外接口启用速率限制、签名校验。
- 依赖供应链安全：使用
npm audit,pnpm audit,Snyk,Dependabot；验证第三方脚本来源。 - 监控与响应：启用前端异常监控、WAF、安全防护平台；制定安全应急预案。
推荐资料
- OWASP Top 10
- OWASP Cheat Sheet Series
- Google Web.dev 安全专栏、Mozilla Web Security Guidelines
- 《前端安全攻防实战》《Web 安全攻防实践》
小结：安全是落地机制 + 持续运营的组合。建议在项目早期就纳入安全测试与渗透流程，并在迭代中持续更新策略。
↑