前端安全指南：常见攻击方式及防御策略

本文链接：https://blog.youkuaiyun.com/s686ttttt/article/details/146387244

引言
前端作为用户与系统交互的“窗口”，承担着数据展示和操作的核心职责。然而，前端代码的开放性和动态特性也使其成为攻击者的主要目标。本文将介绍前端开发中常见的攻击方式，并分享实用的防御策略，帮助开发者构建更安全的 Web 应用。

前端网络攻击的方式有很多，比如：

1. 跨站脚本攻击（XSS, Cross-Site Scripting）

2. 跨站请求伪造（CSRF, Cross-Site Request Forgery）

3. 点击劫持（Clickjacking）

4. CORS 配置错误

5. JSONP 劫持

6. 第三方依赖风险

7. 开放重定向（Open Redirect）

8. 本地存储泄露

9. 钓鱼攻击（Phishing）

10. SEO 垃圾内容注入

一、跨站脚本攻击（XSS）

攻击原理

攻击者通过注入恶意脚本（如 JavaScript）到网页中，当其他用户访问时执行脚本，窃取 Cookie、会话信息或篡改页面内容。

类型与示例

存储型 XSS：恶意脚本存储在服务器（如论坛评论区），每次访问页面时触发。
```

<script>stealCookie(document.cookie);</script>
```
反射型 XSS：通过 URL 参数传递恶意脚本，页面直接反射输出。
```
https://example.com/search?query=<script>alert('XSS')</script>
```

DOM 型 XSS：通过修改 DOM 触发漏洞。

// 攻击者控制输入后动态写入页面
document.write('<img src="x" onerror="恶意代码">');

防御方案

输入过滤与转义：对用户输入的特殊字符（如 <, >, &）进行转义。

function escapeHTML(str) {
  return str.replace(/&/g, '&amp;')
           .replace(/</g, '&lt;')
           .replace(/>/g, '&gt;');
}

启用 CSP 策略：通过 HTTP 头限制脚本来源。

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

避免危险 API：优先使用 textContent 替代 innerHTML，禁止 eval()。

二、跨站请求伪造（CSRF）

攻击原理

诱导用户在已登录目标网站的状态下，发起非预期的操作请求（如转账、修改密码）。

示例

<!-- 恶意网站中嵌入转账请求 -->
<img src="https://bank.com/transfer?to=attacker&amount=1000">

防御方案

CSRF Token：后端生成唯一 Token 并嵌入表单，提交时校验。

<form action="/transfer">
  <input type="hidden" name="csrf_token" value="随机Token">
</form>

SameSite Cookie：设置 Cookie 的 SameSite 属性。

Set-Cookie: session_id=123; SameSite=Strict; HttpOnly

校验请求来源：检查 Referer 或 Origin 头是否合法。

三、点击劫持（Clickjacking）

攻击原理

通过透明 iframe 覆盖恶意按钮在合法页面上，诱导用户点击。

示例

<iframe src="https://bank.com" style="opacity: 0; position: absolute;"></iframe>

防御方案

设置 X-Frame-Options：禁止页面被嵌套。
```
X-Frame-Options: DENY
```
使用 CSP 的 frame-ancestors：更灵活的防护。
```
Content-Security-Policy: frame-ancestors 'none';
```

四、CORS 配置错误

风险场景

错误配置跨域资源共享（CORS）导致敏感数据泄露。

Access-Control-Allow-Origin: *  // 允许任意域访问

防御方案

限制可信域名：

Access-Control-Allow-Origin: https://your-domain.com

避免暴露敏感头：

Access-Control-Expose-Headers: X-Custom-Header

五、第三方依赖风险

典型案例

2018 年 event-stream npm 包被植入恶意代码，窃取加密货币钱包信息。

防御方案

依赖扫描：使用 npm audit 或 yarn audit 检查漏洞。
锁定版本：通过 package-lock.json 或 yarn.lock 固定版本。
最小化依赖：仅引入必要库，定期清理未使用的包。

六、本地存储泄露

风险场景

将敏感数据（如 Token）存储在 localStorage 中，可能被 XSS 窃取。

防御方案

优先使用 HttpOnly Cookie：避免 JavaScript 读取。
```
Set-Cookie: auth_token=abc123; HttpOnly; Secure
```
加密敏感数据：如需本地存储，使用 AES 等加密算法。

七、开放重定向攻击

攻击示例

https://example.com/redirect?url=https://phishing-site.com

防御方案

白名单校验：仅允许跳转到可信域名。

静态映射重定向：避免动态参数。

const allowedUrls = { 'home': '/home', 'blog': '/blog' };

八、钓鱼攻击（Phishing）

防御策略

用户教育：提示检查域名和 HTTPS 证书。
双因素认证（2FA）：即使密码泄露，仍需二次验证。
反钓鱼技术：使用 WebAuthn 生物识别认证。

总结：构建前端安全防线

输入即威胁：始终对用户输入进行过滤和转义。
最小权限原则：Cookie 设置 HttpOnly + SameSite，API 按需授权。
安全头配置：启用 CSP、X-Frame-Options、HSTS 等。
依赖管理：定期更新第三方库，使用自动化扫描工具。
监控与测试：结合 OWASP ZAP、Burp Suite 进行渗透测试。

延伸阅读

作者提示：安全是一场持续的战斗，保持警惕并定期审查代码是守护用户数据的关键！ 🔒