当前位置：首页 > news >正文

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

news 2025/9/1 13:46:57

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，从而冒充用户身份。

危害

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

防御手段

CSRF Token 验证（每个请求附带随机 Token）。
SameSite Cookie：阻止跨站请求携带 Cookie。
验证码 / 二次确认。
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 代码，拼接后数据库直接执行。

危害

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

防御手段

参数化查询 / 预编译（Prepared Statement） ✅
输入校验（过滤 ', --, ; 等特殊符号）。
最小权限（避免删库）。
使用 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 攻击。

危害

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

防御手段

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

示例

❌ 漏洞

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 }
});