Web 安全
前端安全防护体系 - 从攻击原理到防御实践
📚 内容概览
常见 Web 攻击
- XSS 跨站脚本攻击 - 存储型、反射型、DOM 型 XSS 及防御
- CSRF 跨站请求伪造 - 攻击原理、Token 防御、SameSite
- 点击劫持 - iframe 劫持、X-Frame-Options
HTTPS 与加密
- HTTPS 原理 - TLS/SSL、证书、握手过程
前端安全实践
- 内容安全策略 CSP - CSP 配置、nonce、hash
- Cookie 安全 - HttpOnly、Secure、SameSite
认证与授权
- JWT 认证 - Token 生成、验证、刷新
安全防护体系
- 前端安全检查清单 - 开发、测试、上线检查
🎯 学习路径
初级（了解攻击）
- XSS、CSRF 原理与防御
- HTTPS 基础
- Cookie 安全配置
中级（防御实践）
- CSP 配置
- JWT 认证实现
- 文件上传安全
高级（体系建设）
- 安全防护体系设计
- 安全漏洞扫描
- 应急响应流程
🔥 面试高频
- 什么是 XSS？如何防御？
- CSRF 攻击原理？如何防御？
- 什么是 CSP？如何配置？
- Cookie 的安全属性有哪些？
- HTTPS 握手过程？
- JWT 和 Session 的区别？
- 如何防止点击劫持？
- 前端如何存储敏感信息？
📊 Web 安全全景图
Web 安全
├── 注入攻击
│ ├── XSS（跨站脚本）
│ ├── SQL 注入
│ ├── 命令注入
│ └── LDAP 注入
│
├── 请求伪造
│ ├── CSRF（跨站请求伪造）
│ ├── SSRF（服务端请求伪造）
│ └── 点击劫持
│
├── 传输安全
│ ├── HTTPS（TLS/SSL）
│ ├── 中间人攻击
│ └── 证书验证
│
├── 认证授权
│ ├── Session/Cookie
│ ├── JWT
│ ├── OAuth 2.0
│ └── SSO
│
├── 数据安全
│ ├── 加密存储
│ ├── 敏感信息泄露
│ └── 密码安全
│
└── 防护措施
├── CSP（内容安全策略）
├── CORS（跨域资源共享）
├── 输入验证
└── 安全头部🚀 快速开始
XSS 防御
javascript
// 1. 转义 HTML
function escapeHtml(str) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
};
return str.replace(/[&<>"'/]/g, (char) => map[char]);
}
// 2. 使用 DOMPurify 库
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(dirty);
// 3. CSP 配置
// Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random123'CSRF 防御
javascript
// 1. CSRF Token
// 后端生成 Token
const csrfToken = generateToken();
res.cookie('XSRF-TOKEN', csrfToken);
// 前端发送请求时携带
axios.defaults.headers.common['X-XSRF-TOKEN'] = getCookie('XSRF-TOKEN');
// 2. SameSite Cookie
res.cookie('sessionId', value, {
httpOnly: true,
secure: true,
sameSite: 'strict' // 或 'lax'
});
// 3. 验证 Referer
if (!req.headers.referer.startsWith('https://yourdomain.com')) {
return res.status(403).send('Forbidden');
}CSP 配置
html
<!-- Meta 标签 -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-random123';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;">
<!-- HTTP 响应头 -->
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random123'Cookie 安全配置
javascript
// 设置安全的 Cookie
res.cookie('token', value, {
httpOnly: true, // 防止 XSS 读取
secure: true, // 仅 HTTPS 传输
sameSite: 'strict', // 防止 CSRF
maxAge: 3600000, // 1小时过期
domain: '.example.com',
path: '/'
});JWT 认证
javascript
// 生成 JWT
const jwt = require('jsonwebtoken');
const token = jwt.sign(
{ userId: user.id, role: user.role },
process.env.JWT_SECRET,
{ expiresIn: '1h' }
);
// 验证 JWT
const decoded = jwt.verify(token, process.env.JWT_SECRET);
// 前端存储（不要存储在 localStorage）
// 方案1：HttpOnly Cookie（推荐）
// 方案2：内存中（刷新丢失，需要 refresh token）密码安全
javascript
// 使用 bcrypt 加密密码
const bcrypt = require('bcrypt');
// 注册时加密
const saltRounds = 10;
const hashedPassword = await bcrypt.hash(password, saltRounds);
// 登录时验证
const isMatch = await bcrypt.compare(password, hashedPassword);
// 前端密码强度验证
function validatePassword(password) {
const minLength = 8;
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasNumbers = /\d/.test(password);
const hasSpecialChar = /[!@#$%^&*]/.test(password);
return password.length >= minLength &&
hasUpperCase &&
hasLowerCase &&
hasNumbers &&
hasSpecialChar;
}🛡️ 安全检查清单
开发阶段
- [ ] 所有用户输入都进行验证和转义
- [ ] 使用参数化查询防止 SQL 注入
- [ ] 配置 CSP 策略
- [ ] Cookie 设置 HttpOnly、Secure、SameSite
- [ ] 敏感操作使用 CSRF Token
- [ ] 密码使用强加密算法（bcrypt）
- [ ] 不在前端存储敏感信息
测试阶段
- [ ] 进行 XSS 测试
- [ ] 进行 CSRF 测试
- [ ] 检查文件上传漏洞
- [ ] 检查 SQL 注入漏洞
- [ ] 使用安全扫描工具
上线阶段
- [ ] 启用 HTTPS
- [ ] 配置安全响应头
- [ ] 设置合理的 CORS 策略
- [ ] 隐藏服务器版本信息
- [ ] 配置 WAF（Web 应用防火墙）
🔧 安全工具
扫描工具
- OWASP ZAP - 开源 Web 安全扫描器
- Burp Suite - 专业渗透测试工具
- Nmap - 网络扫描工具
- Nikto - Web 服务器扫描器
前端安全库
- DOMPurify - XSS 防护
- helmet - Express 安全中间件
- csurf - CSRF 防护
- bcrypt - 密码加密
📖 OWASP Top 10（2021）
- 失效的访问控制
- 加密机制失效
- 注入攻击
- 不安全的设计
- 安全配置错误
- 易受攻击和过时的组件
- 身份识别和身份验证失效
- 软件和数据完整性失效
- 安全日志和监控失效
- 服务端请求伪造（SSRF）