前端常见安全问题 + 防御方法 + 面试回答

目录

1. XSS（跨站脚本攻击）
2. CSRF（跨站请求伪造）
3. [SQL 注入](#SQL 注入)
4. 文件上传漏洞
5. 其他前端常见安全问题
6. 面试常见问答

---

1. XSS（跨站脚本攻击）

定义

XSS（Cross-Site Scripting）是一种 通过注入恶意脚本执行非预期操作 的攻击。

分为三类：

• 存储型：代码存储在数据库中，用户访问时执行（评论区、论坛）。
• 反射型：代码通过 URL 参数返回执行。
• DOM 型：前端 JS 动态插入数据时执行。

---

危害

• 窃取 Cookie、Token，盗取用户身份。
• 伪造请求（转账、发帖）。
• 植入恶意脚本、广告、木马。

---

防御手段

• 输入过滤 + 输出转义。
• CSP（Content Security Policy） 限制脚本来源。
• HttpOnly Cookie，防止通过 JS 获取。
• 前端框架（React/Vue）默认转义 HTML。

---

示例

❌ 漏洞代码

document.body.innerHTML = location.search; 

访问：

http://site.com?msg=<script>alert(1)</script>

✅ 安全代码

document.body.textContent = location.search;

---

2. CSRF（跨站请求伪造）

定义

CSRF（Cross-Site Request Forgery）利用 用户已登录状态 ，诱导其访问恶意链接，伪造合法请求。

浏览器会自动带上用户 Cookie，从而冒充用户身份。

---

危害

• 转账、盗刷。
• 修改密码、邮箱。
• 批量操作（删帖、发帖）。

---

防御手段

1. CSRF Token 验证（每个请求附带随机 Token）。
2. SameSite Cookie：阻止跨站请求携带 Cookie。
3. 验证码 / 二次确认。
4. Referer / Origin 校验。

---

示例

❌ 漏洞

<img src="http://bank.com/transfer?to=attacker&amount=1000">

✅ 安全（CSRF Token）

<form method="POST" action="/transfer">
  <input type="hidden" name="csrfToken" value="random123">
  <input name="to">
  <input name="amount">
  <button>提交</button>
</form>

---

3. SQL 注入

定义

SQL 注入是攻击者 在输入中注入恶意 SQL 代码，拼接后数据库直接执行。

---

危害

• 绕过登录验证。
• 窃取/篡改数据。
• 删除数据库。

---

防御手段

1. 参数化查询 / 预编译（Prepared Statement） ✅
2. 输入校验（过滤 ', --, ; 等特殊符号）。
3. 最小权限（避免删库）。
4. 使用 ORM 框架。

---

示例

❌ 漏洞

const sql = `SELECT * FROM users WHERE username='${username}' AND password='${password}'`;
db.query(sql);

输入：

' OR '1'='1

✅ 安全

const sql = 'SELECT * FROM users WHERE username=? AND password=?';
db.query(sql, [username, password]);

---

4. 文件上传漏洞

定义

文件上传漏洞是指：攻击者上传恶意文件（如 WebShell），服务器未严格校验，导致代码执行或 DoS 攻击。

---

危害

• 上传脚本木马，控制服务器。
• 上传恶意文档，攻击用户。
• 上传大文件，导致拒绝服务。

---

防御手段

1. 白名单文件类型（校验扩展名 + MIME + 文件头）。
2. 重命名文件（避免保留原始扩展名）。
3. 存储到非 Web 目录。
4. 限制大小/数量。
5. 前端校验（次要）+ 后端强制校验（核心）。

---

示例

❌ 漏洞

if (substr($_FILES['file']['name'], -4) === ".jpg") {
    move_uploaded_file($_FILES['file']['tmp_name'], "/uploads/" . $_FILES['file']['name']);
}

攻击者上传 evil.php.jpg。

✅ 安全（Node.js）

const upload = multer({
  storage,
  fileFilter: (req, file, cb) => {
    const allowed = ['image/jpeg', 'image/png'];
    if (!allowed.includes(file.mimetype)) return cb(new Error('Invalid type'));
    cb(null, true);
  },
  limits: { fileSize: 1024 * 1024 * 2 }
});

---

5. 其他前端常见安全问题

5.1 点击劫持（Clickjacking）

• 定义：攻击者在透明 iframe 中嵌套目标站点，引导用户点击。
• 防御：X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none';。

5.2 敏感信息泄露

• 问题：前端暴露 API Key、JWT、调试接口。

• 防御：

  • 不在前端存储敏感信息。
  • 使用环境变量 + 后端代理。

5.3 依赖安全漏洞

• 问题：前端依赖（npm 包）可能被注入恶意代码。

• 防御：

  • 使用 npm audit/yarn audit。
  • 锁定依赖版本。
  • 关注供应链安全（supply chain attack）。

---

6. 面试常见问答

Q1: 什么是 XSS？怎么防御？

• 跨站脚本攻击，注入恶意 JS。
• 危害：窃取 Cookie、执行恶意操作。
• 防御：输入过滤 + 输出转义 + CSP + HttpOnly Cookie。

Q2: 什么是 CSRF？怎么防御？

• 跨站请求伪造，利用用户 Cookie 发起伪造请求。
• 防御：CSRF Token、SameSite Cookie、验证码、Referer 校验。

Q3: 什么是 SQL 注入？怎么防御？

• 在输入中拼接 SQL 语句篡改数据库。
• 防御：预编译、参数化查询、最小权限、ORM 框架。

Q4: 文件上传漏洞如何防御？

• 白名单校验文件类型（MIME + 文件头）。
• 上传后重命名，存储到非 Web 目录。
• 限制大小和数量，多层校验。

Q5: 点击劫持如何防御？

• 使用 X-Frame-Options 或 CSP frame-ancestors。