web安全代码基础-JavaScript(原生js和Ajax技术)

📅 2026/7/6 1:55:42
web安全代码基础-JavaScript(原生js和Ajax技术)
目录原生JS-语法模型概念基础JavaScript 在网页里的基础作用JS 前端安全审计四大维度从 JS 中挖掘站点路径、接口、域名等资产信息从 JS 提取硬编码敏感机密信息识别危险 JS 函数判断存在的前端漏洞逆向 JS分析前端业务逻辑与校验规则Ajax技术概念AJAX作用JS-AJAX知识点相关安全问题安全风险 1安全风险 2安全风险 3安全风险 4文件上传模块安全问题前端 JS 过滤后端依赖前端校验前端后缀校验可直接绕过代码演示两种绕过方式绕过 1浏览器禁用 JavaScript绕过 2F12 修改 / 删除 JS 过滤代码后端仅信任前端校验无二次校验PHP 危险代码附加上传漏洞衍生风险登录验证模块安全问题AJAX 登录前端判断逻辑后端校验薄弱完整错误业务代码前端 AJAX 登录 JS 代码后端 PHP 登录存在缺陷对应的 4 类安全漏洞详解前端密码长度校验可绕过前端返回判断逻辑可篡改无后端会话凭证SQL 注入后端直接拼接参数无验证码、无登录失败次数限制→暴力破解补充登录接口无 CSRF Token安全问题核心根本原因修复通用方案原生JS-语法模型概念基础JavaScript 在网页里的基础作用原文第一段是 JS 的正常业务用途简单翻译解释 JavaScript 是网页前端核心脚本语言运行在用户浏览器本地核心能力往 HTML 页面动态插入文字、图片、弹窗等内容监听用户操作点击、输入、滚动、提交表单等浏览器事件并做出反应增删修改页面上所有 HTML 标签元素表单提交前本地校验比如手机号格式、密码长度不用先发给服务器获取用户浏览器型号、版本、设备信息操作本地存储、用户登录凭证Cookie、localStorage、token 等。关键点安全点JS 完全暴露在前端按 F12 就能查看完整源码攻击者可以随意阅读、修改、调试因此会产生下面四类安全测试利用点。JS 前端安全审计四大维度从 JS 中挖掘站点路径、接口、域名等资产信息原理前端 JS 写死了大量程序访问地址开发不会刻意隐藏直接写在代码字符串里。能挖到什么资产正式站、测试站、预发布后台域名 / URL管理后台路径、隐藏功能页面如/admin、/manage、/debug前后端交互 API 接口地址增删改查、上传、查询接口内部文件路径、文件下载地址、内网服务地址。攻击价值拿到隐藏后台、未公开接口后可直接访问未授权页面、调用后端接口做越权、批量查询数据。从 JS 提取硬编码敏感机密信息原理开发偷懒把账号、密码、密钥直接写死在 JS 源码明文注释里也常残留开发调试信息任何人查看源码都能看到。风险点1、硬编码账号密码写死测试账号、后台管理员账号 明文密码攻击者直接登录后台2、各类密钥泄露第三方 API Key、签名密钥、加密密钥、OSS / 存储访问密钥拿到可调用第三方付费接口、盗取存储文件3、注释残留敏感内容开发调试注释遗留数据库地址、内网账号、服务器 IP、开发环境密码、SQL 语句、接口调试参数。高危后果密钥泄露可造成大量数据泄露、产生高额第三方服务账单账号泄露直接后台沦陷。识别危险 JS 函数判断存在的前端漏洞文中举例eval()、dangerouslySetInnerHTML都是高危代码这类代码代表网站存在输入渲染、代码执行风险对应常见漏洞1、eval()作用把字符串当成 JS 代码执行 风险如果字符串内容可控用户输入会产生前端代码注入2、dangerouslySetInnerHTMLReact 框架专用作用直接将文本渲染成 HTML 标签 风险未过滤用户输入就使用直接触发XSS 跨站脚本漏洞配套漏洞场景URL 跳转漏洞JS 用window.location拼接用户可控 URL无白名单限制可钓鱼跳转恶意网站XSS 跨站直接解析用户输入的 HTML/JS 代码窃取用户 Cookie、登录凭证SSTI 模板注入前端模板引擎解析可控变量特殊语法可执行任意代码、读取本地信息。简单说只要源码出现这类危险函数就要重点测试是否存在注入类漏洞。逆向 JS分析前端业务逻辑与校验规则核心作用看透前端所有限制绕过前端防护1、前端校验绕过登录验证码、密码复杂度、上传文件大小 / 后缀、支付金额限制、权限判断全部写在 JS 里 攻击者可直接修改 JS、删除校验代码、抓包改参数绕过所有前端限制前端校验仅做体验不能当安全防线2、加密逆向很多接口请求参数会用 JS 加密MD5、AES、自定义签名算法密钥、加密逻辑全部在前端 读懂 JS 就能还原加密算法伪造合法请求数据包3、梳理数据走向跟踪 JS 代码用户输入数据→如何处理→哪些接口上传→后端返回哪些敏感数据 快速定位数据传输漏洞明文传输敏感信息、接口返回过多用户隐私。实战价值绝大多数业务限制只放在前端看懂 JS 逻辑就能绕过风控、伪造请求、篡改交易 / 查询参数。Ajax技术概念Asynchronous JavaScript AndXML异步的 JavaScript 和XML。异步请求、前后端分离交互大量校验、参数拼接写在 JS前端所有逻辑可控、可篡改。AJAX作用1、数据交换通过AJAX可给服务器发送请求并获取服务器响应的数据2、后台发送浏览器的请求是后台js发送给服务器的js会创建单独的线程发送异步请求这个线程不会影响浏览器的线程运行。3、局部刷新浏览器接收到结果以后进行页面局部刷新JS-AJAX知识点1、变量函数运算事件等2、引用库AjaxJQueryAxios等相关安全问题安全风险 1前端无权限校验仅靠 AJAX 请求判断身份错误示例前端只在 AJAX 回调判断权限后端无校验// 获取用户订单接口 $.ajax({ url: /api/getOrder, method: get, success: function(res){ // 只在前端判断是否管理员 if(res.isAdmin true){ // 展示全部订单 showAllOrder(res.data); }else{ alert(无权限); } } })漏洞攻击者 F12 删除if(res.isAdmin)判断代码直接打印res.data就能看到所有人订单或者抓包直接调用/api/getOrder后端没做身份校验直接返回敏感数据→垂直越权。安全风险 2AJAX 参数前端可控未做后端过滤SQL 注入、越权let orderId $(#orderId).val(); $.get(/api/orderDetail?idorderId, res{ render(res); }) //前端传订单 ID漏洞攻击者抓包修改id1001改为id10088别人的订单后端没校验该订单归属当前用户直接返回数据→水平越权。安全风险 3异步接口未做 CSRF 防护漏洞AJAX 请求默认携带 Cookie无 token 校验钓鱼网站可伪造 AJAX 请求篡改用户数据。安全风险 4接口路径、API 地址全部暴露在 JS 源码漏洞前文提到的 JS 源码泄露接口AJAX 全部写死接口地址黑客批量扫描测试接口。文件上传模块安全问题前端 JS 过滤后端依赖前端校验业务流程页面选择文件→JS 校验后缀→AJAX 提交文件→PHP 后端接收前端后缀校验可直接绕过代码演示// 危险前端过滤代码 // 前端仅校验文件后缀 function checkFile(file){ let suffix file.name.split(.).pop(); let allow [jpg,png,gif]; if(!allow.includes(suffix)){ alert(仅允许图片); return false; } return true; } // 上传按钮事件 $(#upload).click(function(){ let file $(#file)[0].files[0]; if(!checkFile(file)) return; // ajax上传 let formData new FormData(); formData.append(img, file); $.ajax({url:/upload.php, data:formData, processData:false, contentType:false, type:POST}) })两种绕过方式绕过 1浏览器禁用 JavaScript浏览器设置关闭 JScheckFile函数不会执行直接提交.php、.asp木马文件后端如果不再二次校验直接上传 webshell。绕过 2F12 修改 / 删除 JS 过滤代码控制台删除checkFile函数或修改允许后缀数组// 控制台执行覆盖原有过滤规则 allow [jpg,png,gif,php]直接上传 php 脚本。后端仅信任前端校验无二次校验PHP 危险代码// upload.php 错误写法 ?php // 完全不校验文件后缀、MIME、文件内容直接保存 $file $_FILES[img]; $path ./upload/.$file[name]; move_uploaded_file($file[tmp_name], $path); echo 上传成功; ?后果前端过滤被绕过上传 php 木马访问upload/木马.php接管服务器。附加上传漏洞衍生风险1、前端仅校验文件名后缀抓包修改文件名xxx.jpg→xxx.php%00.jpg00 截断旧版本 PHP 可绕过2、仅校验 Content-Type 文件类型可抓包伪造 MIME 类型绕过登录验证模块安全问题AJAX 登录前端判断逻辑后端校验薄弱完整错误业务代码前端 AJAX 登录 JS 代码$(#loginBtn).click(function(){ let user $(#user).val(); let pwd $(#pwd).val(); // 简单前端长度校验 if(pwd.length 6){ alert(密码至少6位); return; } // ajax提交登录 $.post(/login.php, {username:user, password:pwd}, function(res){ // 只在前端判断登录结果 if(res.code 200){ location.href /admin; }else{ alert(账号密码错误); } },json) })后端 PHP 登录存在缺陷?php $user $_POST[username]; $pwd $_POST[password]; // 简单查询无防暴力破解、无验证码 $sql select * from user where username$user and password$pwd; $res mysqli_query($conn,$sql); if(mysqli_num_rows($res) 0){ echo json_encode([code200,msg登录成功]); }else{ echo json_encode([code500,msg失败]); } ?对应的 4 类安全漏洞详解前端密码长度校验可绕过绕过手段1、禁用 JS前端pwd.length6判断失效直接提交 1 位密码暴力猜解2、F12 删除校验代码控制台手动发起 AJAX 请求$.post(/login.php,{username:admin,password:123},rconsole.log(r))漏洞后端没有密码长度限制可暴力破解。前端返回判断逻辑可篡改无后端会话凭证1、极端缺陷场景后端返回用户名是否为 admin前端自行赋予权限高危2、普通缺陷场景后端返回{isAdmin:false,code:200}前端代码if(res.code200 res.isAdmintrue){ window.isAdmin true; }绕过控制台执行window.isAdmintrue直接访问后台地址后端没校验 Session直接放行。SQL 注入后端直接拼接参数攻击者账号输入admin or 11 --拼接后 SQLselect * from user where usernameadmin or 11 -- and passwordxxx无需密码直接登录管理员账号。无验证码、无登录失败次数限制→暴力破解前端仅做简单拦截禁用 JS 后可批量脚本循环发送 AJAX 请求爆破后台账号密码。补充登录接口无 CSRF Token攻击者搭建钓鱼页面自动发送 AJAX 登录请求窃取账号。安全问题核心根本原因把安全校验放在前端 JS前端不可信1、JavaScript 代码完全暴露任何人可查看、修改、删除、禁用2、所有前端的格式校验、长度校验、权限判断、后缀过滤都只能做用户体验优化不能作为安全防线3、AJAX 异步接口如果后端缺少二次校验、权限判断、输入过滤会产生越权、注入、文件上传、未授权访问漏洞。修复通用方案1、所有安全校验必须在后端完成文件后缀、参数长度、权限、账号密码校验2、前端校验仅做辅助拦截不能替代后端3、AJAX 接口增加 CSRF Token、请求签名校验4、文件上传后端同时校验后缀、MIME、文件二进制内容限制上传目录执行脚本权限5、登录模块增加图形验证码、登录失败锁定、参数预编译防 SQL 注入、登录后校验 Session 身份6、敏感 API 增加接口访问频率限制防止暴力扫描。