前端作为用户与系统的交互入口,承载着80%的数据输入输出。根据OWASP统计,2024年全球Web攻击事件中,XSS和CSRF攻击占比高达63%。
核心漏洞攻防解析
1. XSS跨站脚本攻击
攻击场景:用户评论框未过滤HTML标签,攻击者注入
<script>alert(document.cookie)</script>
盗取会话信息。
防御三板斧:
// 输入过滤
const sanitize = (input) => input.replace(/<[^>]*>?/gm, '');
// 输出编码
document.getElementById('output').textContent = userInput;
// CSP策略
Content-Security-Policy: default-src 'self' *.trusted.com
2. CSRF跨站请求伪造
攻击原理:利用已认证用户的Cookie发起转账请求,如:
<img src="https://bank.com/transfer?to=hacker&amount=1000000">
防御策略:
- 服务端生成Anti-CSRF Token
- 设置SameSite=Strict的Cookie
- 校验Referer头白名单
3. 点击劫持(Clickjacking)
攻击案例:透明iframe覆盖"确认支付"按钮,诱导用户误触。
防御方案:
add_header X-Frame-Options "DENY";
add_header Content-Security-Policy "frame-ancestors 'none'";
4. 第三方依赖风险
典型事件:某流行UI库的旧版本存在RCE漏洞,导致10万+网站受影响。
管理规范:
- 使用npm audit定期扫描
- 锁定依赖版本(package-lock.json)
- 优先选择经过安全审计的库
5. HTTPS配置不当
常见错误:混合内容(HTTP+HTTPS)、弱加密套件、HSTS头缺失。
最佳实践:
ssl_protocols TLSv1.3;
ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384;
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
三、开发者的安全工具箱
- 自动化扫描:OWASP ZAP检测XSS,Burp Suite抓包分析
- 代码审计:ESLint安全插件检查eval等危险函数
- 监控预警:Sentry捕获异常请求,配置WAF规则拦截恶意流量
- 渗透测试:使用Kali Linux进行模拟攻击演练
四、高频面试题精讲
- XSS与CSRF的本质区别?
XSS利用用户对站点的信任执行脚本,CSRF利用站点对用户浏览器的信任伪造请求。 - CSP如何提升安全性?
通过白名单机制限制脚本加载源,例如script-src 'self'仅允许同源脚本。 - 如何防御点击劫持?
组合使用X-Frame-Options响应头和frame-busting脚本。 - HTTPS如何防止中间人攻击?
通过SSL/TLS加密通道+数字证书验证身份,防止数据窃听和篡改。 - 前端如何安全存储敏感数据?
避免localStorage存储令牌,使用HttpOnly+Secure的Cookie,敏感操作增加二次验证。
安全开发心法
- 最小权限原则:API接口按需授权,避免过度开放
- 持续学习机制:每月关注CVE漏洞公告,参与CTF实战演练
- 防御性编码:所有输入都不可信,所有输出都需过滤
- 纵深防御体系:组合WAF、入侵检测、日志审计等多层防护