目录
[1. XSS（跨站脚本攻击）](#1. XSS（跨站脚本攻击）)
[2. CSRF（跨站请求伪造）](#2. CSRF（跨站请求伪造）)
[3. 点击劫持（Clickjacking）](#3. 点击劫持（Clickjacking）)
[4. 数据安全](#4. 数据安全)
[5. 补充实践](#5. 补充实践)
1. XSS（跨站脚本攻击）
- 输入过滤与转义 ：对用户输入（如表单、URL参数）进行严格校验和编码（如
textContent代替innerHTML）。 - CSP（内容安全策略） ：通过 HTTP 头
Content-Security-Policy限制脚本加载源，禁止内联脚本执行。 - HttpOnly & Secure ：为 Cookie 添加
HttpOnly（防止 JS 读取）和Secure（仅 HTTPS 传输）标志。
2. CSRF（跨站请求伪造）
- Token 验证 ：服务端生成一次性 Token，前端在请求头或参数中携带（如
X-CSRF-TOKEN）。 - SameSite Cookie ：设置 Cookie 的
SameSite=Strict/Lax，防止跨站请求携带 Cookie。 - 校验 Referer/Origin：服务端验证请求来源合法性，拦截非法跨域请求。
3. 点击劫持（Clickjacking）
- X-Frame-Options ：设置 HTTP 头
X-Frame-Options: DENY/SAMEORIGIN，禁止页面被嵌入 iframe。 - JavaScript 检测 ：通过
window.top !== window.self判断页面是否被嵌套，强制跳转。
4. 数据安全
- HTTPS 强制加密：所有通信必须使用 HTTPS，防止中间人攻击（MITM）。
- 敏感数据存储 ：避免在
localStorage存储敏感信息（如密码），优先使用HttpOnlyCookie。 - 依赖库安全：定期更新第三方库（如 npm 包），避免已知漏洞。
5. 补充实践
- 框架安全机制：利用 Vue/React 等框架的内置 XSS 防护（如自动转义模板绑定）。
- 安全头配置 ：合理设置
X-Content-Type-Options（防止 MIME 类型嗅探）、X-XSS-Protection（启用浏览器 XSS 过滤）。 - 定期安全审计：通过工具（如 OWASP ZAP）扫描漏洞，结合 CSP 报告监控违规行为。
总结 ：核心在于 "输入校验 + 输出控制 + 通信加密 + 权限隔离"，结合框架与服务端协作，构建多层次防御体系。