前端作为用户与系统的交互入口，承载着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";

三、开发者的安全工具箱

1. 自动化扫描：OWASP ZAP检测XSS，Burp Suite抓包分析
2. 代码审计：ESLint安全插件检查eval等危险函数
3. 监控预警：Sentry捕获异常请求，配置WAF规则拦截恶意流量
4. 渗透测试：使用Kali Linux进行模拟攻击演练

四、高频面试题精讲

1. XSS与CSRF的本质区别？
   XSS利用用户对站点的信任执行脚本，CSRF利用站点对用户浏览器的信任伪造请求。
2. CSP如何提升安全性？
   通过白名单机制限制脚本加载源，例如script-src 'self'仅允许同源脚本。
3. 如何防御点击劫持？
   组合使用X-Frame-Options响应头和frame-busting脚本。
4. HTTPS如何防止中间人攻击？
   通过SSL/TLS加密通道+数字证书验证身份，防止数据窃听和篡改。
5. 前端如何安全存储敏感数据？
   避免localStorage存储令牌，使用HttpOnly+Secure的Cookie，敏感操作增加二次验证。

安全开发心法

1. 最小权限原则：API接口按需授权，避免过度开放
2. 持续学习机制：每月关注CVE漏洞公告，参与CTF实战演练
3. 防御性编码：所有输入都不可信，所有输出都需过滤
4. 纵深防御体系：组合WAF、入侵检测、日志审计等多层防护