当前位置: 首页 > java >正文

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

目录

  1. XSS(跨站脚本攻击)
  2. CSRF(跨站请求伪造)
  3. 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: DENYContent-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-OptionsCSP frame-ancestors
http://www.xdnf.cn/news/19466.html

相关文章:

  • Qt QML连接数据库如何解决重复创建连接问题
  • 大话 IOT 技术(3) -- MQTT篇
  • Qt中使用 GStreamer 播放视频文件
  • HikariCP vs DBCP2 vs Tomcat JDBC:多场景数据库连接池方案对比与实践指南
  • 局域网中使用Nginx部署https前端和后端
  • Qt中解析XML文件
  • word中插入字符后会自动删除后面的字符
  • Visual Studio Code中launch.json的解析笔记
  • Prometheus之启用--web.enable-remote-write-receiver
  • 对于一个多层感知机,参数初始化的时候不是已经把权重的范围根据方差进行优化过了,为什么还要进行正则化惩罚过大权重
  • springboot整合minio实现上传下载搭建minio
  • Unity转抖音小游戏重点摘记
  • 学生请假就餐系统
  • 计算机网络---http(超文本传输协议)
  • XPlayer播放器APP:安卓平台上的全能视频播放器
  • LeetCode每日一题,2025-8-31
  • TFS-2002《Analysis and Efficient Implementation of a Linguistic Fuzzy C-Means》
  • 【量化回测】backtracker整体架构和使用示例
  • Rsync 数据同步工具及实时同步配置
  • SAP PP中的MRP
  • 【OpenGL】LearnOpenGL学习笔记18 - Uniform缓冲对象UBO
  • 模型系列(篇三)-Llama
  • vscode克隆远程代码步骤
  • 合约服务架构-OOP 方式
  • leetcode 371 两个整数之和
  • 微软开源TTS模型VibeVoice,可生成 90 分钟4人语音
  • TFS-1996《The Possibilistic C-Means Algorithm: Insights and Recommendations》
  • 一些八股总结
  • 如何快速学习新技能
  • Redis 7.0 高性能缓存架构设计与优化