目录
[二、第17关 文件上传(前端拦截)](#二、第17关 文件上传(前端拦截))
本文通过《webug4.0靶场第17文件上传之前端拦截》来进行渗透实战。文件上传前端拦截是文件上传前端拦截是一种在前端页面实现的对文件上传操作进行限制和验证的技术手段，但是这种方法可以通过修改前端代码或直接发送 HTTP 请求来绕过前端的限制，本文通过3种不同的方法实现渗透测试。
一、文件上传前端拦截原理
文件上传前端拦截是指在用户提交文件时，通过浏览器端的JavaScript或HTML5技术对文件进行初步验证，以减少非法文件上传的风险。前端拦截主要用于提升用户体验，快速反馈文件合法性，但不能替代后端安全校验，因为攻击者可以绕过前端直接发送恶意请求。
| 类别 | 详情 |
|---|---|
| 定义 | 文件上传前端拦截是指在网页前端对用户的文件上传操作进行限制和验证的技术，通过一定手段判断文件是否符合规定，在文件上传至服务器前进行初步处理 |
| 目的 | 1. 安全层面 ：阻止用户上传恶意文件（如可执行文件、病毒脚本等）和不符合要求的文件类型，降低服务器被攻击、感染的风险，防止因文件上传引发的安全问题； 2. 体验层面：提前告知用户文件存在的问题（如格式不支持、大小超限等），减少用户等待时间和无效网络请求，提升上传操作的流畅性和用户满意度 |
| 实现方式 | 以JavaScript 验证为例 ：监听change事件，获取用户所选文件，检查文件类型（通过file.type）、大小（通过file.size）等属性。借助FileReader对象读取文件部分内容，进一步验证文件格式，如检查文件头； |
| 优势 | 1. 即时反馈 ：能快速在用户选择文件后给出反馈，让用户及时知晓文件是否符合要求； 2. 减轻服务器压力：在前端过滤掉大量不符合要求的文件，减少服务器端的验证工作和无效文件传输，节省服务器资源 |
| 局限性 | 1. 易被绕过 ：攻击者可通过修改前端代码（如修改 JavaScript 验证逻辑、accept属性值）或直接构造 HTTP 请求绕过前端拦截，无法提供绝对的安全防护； 2. 验证范围有限：前端验证主要基于文件基本属性，对于一些复杂的文件内容检测（如深度病毒扫描、文件内容合规性检查）能力不足，需结合服务器端验证 |
二、第17关 文件上传(前端拦截)
1.打开靶场
打开webug4.0靶场的第17关文件上传（前端拦截）关卡，完整URL地址如下所示。
http://192.168.71.1/webug4/control/upload_file/upload_file_1.php
2.构造php脚本
构造info.php,脚本内容为获取服务器的php版本信息，具体如下所示。
<?php phpinfo();?>随手上传php脚本，提示不允许上传该格式类型，这说明本关卡进行了格式检查，如下所示。
3.源码分析
（1）js源码
右键查看源码，发现是使用js进行渗透的，也就是说这是前端验证的文件上传。
（2）服务器源码
如下服务器源码并未过滤，看来只有客户端进行过滤。
<?php
// 引入公共配置文件，该文件通常包含一些全局的函数、常量或配置信息
// 路径为相对于当前文件的上两级目录下的 common 文件夹中的 common.php 文件
require_once "../../common/common.php";
// 检查用户会话中是否存在 'user' 变量
// 如果不存在，说明用户未登录，将用户重定向到登录页面
if (!isset($_SESSION['user'])) {
header("Location:../login.php");
}
// 检查上传文件是否存在错误
// $_FILES['file']['error'] 是 PHP 中用于获取上传文件错误信息的变量
// 如果存在错误，直接终止脚本执行
if ($_FILES['file']['error']) {
die();
}
// 检查是否有文件被上传
if ($_FILES['file']) {
// 将上传文件的相关信息赋值给变量 $arr
$arr = $_FILES['file'];
// 检查目标上传目录中是否已经存在同名文件
// TPMELATE 应该是一个定义好的常量，表示上传目录的路径
// 如果文件已存在，弹出提示框告知用户
if (file_exists(TPMELATE."/upload/".$arr['name'])){
echo "<script>alert('该文件已经存在')</script>";
} else {
// 将文件名从 UTF-8 编码转换为 gb2312 编码
// 这可能是为了适应服务器文件系统的编码要求
$filename = iconv("UTF-8","gb2312",TPMELATE."/upload/".$arr['name']);
// 将临时上传的文件移动到目标目录
// move_uploaded_file 是 PHP 中用于移动上传文件的函数
// $arr["tmp_name"] 是临时上传文件的路径
move_uploaded_file($arr["tmp_name"],$filename);
// 输出文件的完整路径并终止脚本执行
echo $filename;
die();
}
}
// 引入上传文件页面的 HTML 文件
// 该文件通常包含一个文件上传表单
require_once TPMELATE."/upload_file_1.html";（3）总结
综上，本关卡存在文件上传前端绕过的可能性，这是因为前端可被绕过且服务器未做过滤。
前端验证可被绕过：前端代码实现的文件类型过滤逻辑仅在客户端执行。攻击者可以通过直接修改前端代码（例如在浏览器的开发者工具中修改 JavaScript 代码）来禁用或绕过这个验证逻辑。攻击者不需要经过服务器的验证，直接构造一个包含恶意文件的 HTTP 请求发送到服务器，就可以实现文件上传，因为服务器端没有对文件类型进行二次验证，所以存在被绕过的风险。
未与服务器端配合：该前端代码仅在客户端对文件类型进行判断，没有与服务器端的验证机制紧密配合。服务器端端没有对上传文件类型进行严格检查，那么即使前端做了限制，攻击者依然可以通过其他手段（如直接发送请求）绕过前端的限制上传任意文件，从而导致安全问题。
4.渗透实战
（1）禁用js法
将js开关变灰禁用，如下图红框所示。
禁用后刷新页面，再次上传文件，这里要特别强调如果不刷新会上传失败，此时上传成功，具体如下所示显示了脚本的完整URL地址。
上一步获取到的脚本路径如下所示。
D:/web/phpstudy_pro/WWW/webug4/template/upload/info.php根据文件上传路径构造木马路径，如下所示。
http://192.168.71.1/webug4/template/upload/info.php 
做完渗透后记得打开js开关，如下所示。
打开开关后记得刷新页面才可以生效。
（2）修改页面法
右键查询元素-搜索框输入关键字filter。
找到onchange，使其等于空处理，删除js的处理函数οnchange="type_filter(this.files)"。
将如下函数变为空处理。
onchange="type_filter(this.files)"变空后如下所示。
onchange=""修改后如下所示。
重新复制info.php，将文件复制为info1.php,修改后不刷新页面上传php文件。
上传结果如下所示。
如下所示，上传的脚本执行成功。
（3）bp改包法
由于对文件的检查是客户端处理，故而可以在客户端上传图片，绕过客户端的前端检查然后在bp中修改报文并将报文后缀改为info2.php 发送到服务器。
将info.php修改为info.jpg，如下所示。
bp开启拦截功能，firefox浏览器开启代理。
将info.jpg上传，并使用bp抓包，同时将报文发送给repeater。
接下来将info.jpg改名为info2.php。
如下所示，点击发送后上传成功。
访问info2.php，如下所示。
