好靶场 修改你的金额wp

新学期开个新坑，碎嘴子wp写的有点聒噪

题解

点击靶场链接进入靶场，见到上述页面。

点击立刻转账、充值、查看账单都显示功能开发中，点击”检查我的钱“会出现弹窗现在确定我们的目标是把钱数修改到题目要求的范围，然后点击”检查我的钱“让他检测到钱数满足要求，给我们flag。

根据题目描述，这是前端修改HTML的靶场，我们点击F12打开浏览器开发者工具，切换到【Elements 元素】面板，该面板展示当前网页的 HTML DOM 源码。我们可以点击开发者工具左上角方框箭头图标，鼠标点击页面上钱数的20，可以自动定位到对应 HTML代码行，或者Ctrl+F直接查找也行，总之找到了对应的源代码位置，然后修改就行，详细步骤如下修改钱数就行，上下两个都要改

改完之后得到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.校验余额：再次向后端发请求，后端查数据库做判断，完全不看前端页面上显示什么，改了前端也没有用

之前做过设计一个购物网站的作业，很容易出现这样的漏洞，也是被打穿力（悲）。