如何用js绕过简单前端限制，做一些有趣的事

依旧是个人学习经验的记录，非常浅显的内容，如果可以帮到小白们，那就再好不过啦！

前些天由于下载一些素材，需要1个金币，充值付费1元即可。
在充值的时候，发现最低付费金额为20元，我用不完剩下的这个钱啊...突发奇想，我能否通过简单的（我会的）方式，只充值1元钱，换取1个金币下载素材呢？
经过尝试，最后成功绕过验证，通过支付宝支付1元钱，用1个金币成功下载了素材。#理论上这是酷酷的黑客行为。

总结了一下，想要绕过前端限制大概可以分为3步。

• 查看控制台(F12)，确定是前端验证（js脚本限制）

• 找到真正控制提交的函数，以及需要提交的数据

• 控制台内调用函数和相应参数

举一个栗子

1. 首先尝试下载资源

   
   Paste_Image.png

2. 余额不足，需要充值。顺手查看了一下，这里跳转去充值，是单纯单独的充值页面，没有从这里带去任何参数。

   
   Paste_Image.png

3. 到了充值页面，输入1元，鼠标焦点点击其他地方。右侧立即出现验证失败的字样：“...最小金额20金币” ，推测可能为失焦时对文本框内容进行判断。 并且点击支付也提示失败。

   
   Paste_Image.png
   

   查看对应的<input>标签后，没有发现onblur属性，判断为js/jQuery 。搜索<input>的name，找到一大段js，发现果然是最普通最简单的前端js脚本限制了充值金额20元 。
   到这里，可以判断我们有机会绕过了，可以尝试一下。(仍然可能在服务器端做了限制，那我等菜鸡就没辙了)

   
   Paste_Image.png

4. 查看支付的动作，发现返回 user_pay()的结果：

   
   Paste_Image.png
   

   找到user_pay()，发现3个重要的支付动作所必须的参数cash 、pay_mode、bank_type 以及支付函数pay()：

    function user_pay() {
        if (check_recharge() == false) {
    return false;
    }
     //支付金额
    var cash = parseFloat($("#recharge").val()) + 0;
    //支付方式--财富通，支付宝
    var pay_mode = $(":radio[name='online']:checked").val();
    //财富通就要添加银行类型
    var bank_type = $(":radio[name='bank_type']:checked").val();
    //弹出付款窗口
    pay(pay_mode, cash, bank_type);
    return false;
    }
   

注释都写好了... 这三个参数分别是金额，支付方式，银行类型。
我们用支付宝支付，不需要bank_type ，那么pay_mode等参数怎么获取值呢？我们可以直接在控制台调用页面内的方法

5. 直接复制"="右侧的函数在控制台内，回车。（注意页面的状态应该为填写完所有需要的数据，准备提交时）

   
   Paste_Image.png
   Paste_Image.png
   

   喔。原来cash就是当前填写的充值金额（肯定早猜到了吧XD），而选择了支付宝的话，pay_mode参数就是"alipaydual", 同理，bank_type的值是1001 。

6. 刚才的js中，还有一段真正的调用支付的函数：
   pay(pay_mode, cash, bank_type);
   尝试填入cash为1，pay_mode为alipaydual， bank_type填1001

   
   
   

   报错了，也是中文符号。仔细看下，alipaydual应该是一个值，一个字符串，所以加引号。
   pay("alipaydual", 0.1, 1001);

   
   Paste_Image.png
   虽然依旧返回了一个false，但是成功调起了支付窗口，跳转去支付宝页面支付即可。
   Paste_Image.png 登录后支付，即完成0.1元的充值，绕过了20元的限制喔。
   另外觉得支付宝的console内容好可爱呢...

over ，对于一个非计算机专业非开发岗的同学而言，第一次绕过简单认证，是非常有趣的一件事。