新学期开个新坑碎嘴子wp写的有点聒噪题解点击靶场链接进入靶场见到上述页面。点击立刻转账、充值、查看账单都显示功能开发中点击”检查我的钱“会出现弹窗现在确定我们的目标是把钱数修改到题目要求的范围然后点击”检查我的钱“让他检测到钱数满足要求给我们flag。根据题目描述这是前端修改HTML的靶场我们点击F12打开浏览器开发者工具切换到【Elements 元素】面板该面板展示当前网页的 HTML DOM 源码。我们可以点击开发者工具左上角方框箭头图标鼠标点击页面上钱数的20可以自动定位到对应 HTML代码行或者CtrlF直接查找也行总之找到了对应的源代码位置然后修改就行详细步骤如下修改钱数就行上下两个都要改改完之后得到flag。关键js代码如下document.getElementById(check-money-btn).addEventListener(click, function() { var amountText document.querySelector(.amount).innerText; var moneyValue amountText.replace(/[^\d.-]/g, ); fetch(/check?money moneyValue) .then(function(response) { return response.json(); }) .then(function(data) { alert(data.message); }) .catch(function(error) { console.error(Error:, error); }); });应用在网上经常刷到的“修改你的粉丝数到一亿”的视频其实也是这个原理可以改了截图去开个玩笑当然刷新一下就恢复了。而很多开发者把「校验、判断、权限、业务逻辑」放在前端执行这就非常危险例子就是这道题他把对金额的检验放到了前端执行导致我们可以进行修改。试想如果我建的购物网站也有这个漏洞就可能会在判断你是否有能力获得这个商品的时候出错导致财产的损失。防范了解一个漏洞不仅要了解它工作的方式还要了解它的防范。可以想想红队和蓝队不知道啥意思搜网安”黑话“扫盲之类的文章。前端不可信我们引入后端数据库。现在的真实业务流程是1.页面展示余额从后端接口拉取真实余额渲染到页面只是展示2.校验余额再次向后端发请求后端查数据库做判断完全不看前端页面上显示什么改了前端也没有用之前做过设计一个购物网站的作业很容易出现这样的漏洞也是被打穿力悲。