前端安全有哪些常见威胁？如何防范？
常见安全威胁
1. XSS（跨站脚本攻击）
（详见 BE-005）
2. CSRF（跨站请求伪造）
（详见 BE-005）
3. 点击劫持（Clickjacking）
攻击者用透明 iframe 覆盖在页面上，诱导用户点击。
防御：
// 方法 1：X-Frame-Options 响应头
X-Frame-Options: DENY // 禁止嵌入
X-Frame-Options: SAMEORIGIN // 只允许同源嵌入
// 方法 2：CSP frame-ancestors
Content-Security-Policy: frame-ancestors 'self'
// 方法 3：JS 检测
if (window.top !== window.self) {
window.top.location = window.self.location
}4. 中间人攻击（MITM）
攻击者截获通信数据。
防御：
- 使用 HTTPS
- HSTS 头：
Strict-Transport-Security: max-age=31536000 - 证书固定（Certificate Pinning）
5. SQL 注入
攻击者通过输入恶意 SQL 操作数据库。
防御：
// ❌ 字符串拼接
const sql = `SELECT * FROM users WHERE name = '${name}'`
// ✅ 参数化查询
db.query('SELECT * FROM users WHERE name = ?', [name])6. CSP（内容安全策略）
Content-Security-Policy:
default-src 'self'; # 默认只加载同源
script-src 'self' cdn.example.com; # 脚本来源
style-src 'self' 'unsafe-inline'; # 样式来源
img-src 'self' data: https:; # 图片来源
connect-src 'self' https://api.example.com; # AJAX 来源
font-src 'self' https://fonts.googleapis.com;
frame-ancestors 'none'; # 禁止被嵌入
report-uri /csp-report; # 违规报告7. 敏感数据泄露
// ❌ 密钥硬编码
const API_KEY = 'sk-xxxxx'
// ✅ 环境变量
const API_KEY = process.env.API_KEY
// ❌ Token 存 localStorage（JS 可读）
// ✅ Token 存 HttpOnly Cookie
// ❌ 控制台输出敏感信息
console.log(user.password)8. 依赖安全
# 检查依赖漏洞
npm audit
npm audit fix
# 使用 Snyk 等工具
npx snyk test安全 Headers 汇总
# HTTPS 强制
Strict-Transport-Security: max-age=31536000; includeSubDomains
# XSS 防护
X-XSS-Protection: 1; mode=block
# MIME 类型嗅探
X-Content-Type-Options: nosniff
# 点击劫持
X-Frame-Options: DENY
# CSP
Content-Security-Policy: default-src 'self'
# Referrer 控制
Referrer-Policy: strict-origin-when-cross-origin
# 权限策略
Permissions-Policy: geolocation=(), microphone=()前端安全检查清单
- 所有用户输入都经过转义
- 使用 HTTPS
- 设置安全响应头
- Token 使用 HttpOnly Cookie
- 依赖定期更新和审计
- 不在代码中硬编码密钥
- CORS 配置正确
- 错误信息不泄露敏感数据