前端架构知识体系：常见网络攻击和防范策略

最新推荐文章于 2026-06-18 21:05:44 发布

原创最新推荐文章于 2026-06-18 21:05:44 发布 · 738 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #网络安全 #安全架构 #架构 #代码规范

前端常见网络攻击及防范措施

引言

在前端开发中，安全问题至关重要。攻击者往往通过各种手段入侵网站，获取敏感信息或破坏网站功能。本文将详细介绍前端常见的网络攻击类型及其防范方法，并提供实际的代码示例和最佳实践。

本文涵盖以下攻击类型：XSS、CSRF、SQL 注入、点击劫持、暴力攻击，以及其他前端安全威胁，如敏感信息泄露、文件上传漏洞、开放重定向等。

1. XSS 攻击（Cross-Site Scripting）

描述

XSS 攻击是指攻击者在网页中注入恶意脚本，当其他用户浏览该页面时，脚本被执行，可能窃取用户的 Cookie、会话信息或进行钓鱼操作。

类型

存储型 XSS：恶意代码存储在服务器数据库中，每次访问相关页面时被执行。
反射型 XSS：恶意代码通过 URL 或请求参数传递，立即在页面中执行。
DOM 型 XSS：恶意脚本通过操作 DOM 执行，通常发生在前端 JavaScript 处理不当时。

示例

<!-- 不安全示例 -->
<div id="comment"></div>
<script>
  const userInput = '<img src=x onerror=alert(1)>'; // 恶意输入
  document.getElementById('comment').innerHTML = userInput;
</script>

<!-- 安全示例 -->
<div id="comment-safe"></div>
<script>
  const safeInput = '<img src=x onerror=alert(1)>';
  document.getElementById('comment-safe').textContent = safeInput;
</script>

防范措施

使用输入过滤和编码库（如 DOMPurify）。
配置 CSP（Content Security Policy）限制脚本来源。
避免直接使用 innerHTML，使用 textContent 或框架安全渲染方法。
HTTP Only Cookie 防止脚本访问敏感 Cookie。

2. CSRF 攻击（Cross-Site Request Forgery）

描述

CSRF 攻击是指攻击者诱导已经登录目标网站的用户在不知情的情况下发送恶意请求，从而执行敏感操作。例如修改密码、转账、提交表单等。关键点在于攻击利用了用户的登录状态（Cookie、Session），而用户本人并未发起请求。

原理示意：

用户登录网站A，并保存了 Cookie。
攻击者在网站B上诱导用户访问恶意页面。
恶意页面向网站A发送请求，由于浏览器会自动携带 Cookie，网站A认为这是用户的合法操作，从而执行敏感操作。

攻击示例

<!-- 攻击者网站尝试发送 CSRF 请求 -->
<img src="https://target.com/change-password?new=123456" />
<!-- 或通过表单自动提交 -->
<form action="https://target.com/transfer" method="POST" id="csrfForm">
  <input type="hidden" name="amount" value="1000">
  <input type="hidden" name="to" value="attacker">
</form>
<script>
  document.getElementById('csrfForm').submit();
</script>

3. SQL 注入（SQL Injection）

描述

攻击者通过输入恶意 SQL 语句获取或篡改数据库数据。

示例

// 不安全示例
const query = "SELECT * FROM users WHERE username='" + username + "' AND password='" + password + "'";
db.query(query);

// 安全示例（参数化查询）
const query = 'SELECT * FROM users WHERE username=? AND password=?';
db.query(query, [username, password]);