如何使用纯JS过掉淘宝滑块

Posted 2022-06-03 yizhiyan

起因

众所周知淘宝滑块很难过掉，今天博主就专门研究了一下淘宝滑块，
之前博主也有研究过但是发现并不好过。
今天恰好有个项目需要淘宝登录，就有滑块验证，
说明一下博主做的是浏览器插件哦。今天博主打算在研究滑块。
记录一下博主的解密过程。

排查

首先咱们打开淘宝登录页面,这里我就以阿里妈妈的超级推荐登录为例登录地址如下:登录地址
打开之后我们来到输入账户密码的地方
由于要实现自动登录的功能所以需要跟编辑框赋值，
但是淘宝是使用react写的所以一般情况下是无法外部赋值的
在React和Vue如何使用原生JS赋值中我已经讲过如何赋值了，这里就不在多讲。
好了我们输入一个a在用户名的地方

可以看见滑块已经出来了

分析

咱们f12打开开发者工具，选中滑块拖动的span查看一下绑定事件

可以看到只绑定了一个鼠标按下事件，按照正常思路不是应该还有鼠标拖动事件吗？
别急咱们进入代码看一下

来到代码可以看到是进入了i这个方法中，咱们往下找找,下面我把i方法贴出来

function i(i) 
    function a() 
        s.btn.onmousedown = null,
        s.txt.onmousedown = null,
        e.removeEvt(l, "mousemove", r),
        e.removeEvt(l, "mouseup", f),
        e.removeEvt(l, "touchmove", h),
        e.removeEvt(l, "touchend", g),
        e.removeEvt(s.btn, "touchstart", o),
        e.removeEvt(s.txt, "touchstart", o);
        var i = ;
        i.btn = s.btn,
        i.bar = s.bar.childNodes[1],
        n(d.actionend),
        n(d.slide_end),
        t.onScaleReady(i)
    
    function r(e) 
        m || (n(d.actionstart),
        n(d.slide_start),
        m = !0);
        var t = (e || p.event).clientX
          , i = _.min(y, _.max(-2, k + (t - v)));
        s.btn.style.left = i + "px",
        s.ondrag(_.round(100 * _.max(0, i / y)), i);
        var o = x + s.bar.offsetWidth;
        if (t >= o && (i < y || t - k < y))
            return void f.call(this);
        var r = c.getClientRect(s.btn).left;
        i != y && t - r - b != y || a()
    
    function f() 
        var t = parseInt(s.btn.style.left);
        t < y && (c.addClass(s.btn, "button_move"),
        c.addClass(e.id(u + "_bg"), "bg_move"),
        s.btn.style.left = "0px",
        s.ondrag(0, 0),
        setTimeout(function() 
            c.removeClass(s.btn, "button_move"),
            c.removeClass(e.id(u + "_bg"), "bg_move")
        , 500)),
        e.removeEvt(this, "touchmove", h),
        e.removeEvt(l, "touchmove", h),
        e.removeEvt(l, "mousemove", r),
        e.removeEvt(l, "mouseup", f)
    
    function g(e) 
        f.call(this, e.touches[0])
    
    function h(e) 
        e.preventDefault(),
        r.call(this, e.touches[0])
    
    var m = !1
      , v = (i || p.event).clientX
      , b = s.btn.offsetWidth
      , y = s.bar.offsetWidth - b
      , k = s.btn.offsetLeft
      , x = c.getClientRect(s.bar).left;
    e.addHandler(l, "mousemove", r),
    e.addHandler(l, "mouseup", f),
    e.addHandler(l, "touchmove", h),
    e.addHandler(l, "touchend", g)

仔细分析一下上面的代码可以发现在咱们鼠标按下的时候绑定mousemove事件也就是鼠标移动事件，
根据以上代码来到r方法，仔细分析一下r方法的代码。
可以发现这段代码

var t = (e || p.event).clientX

获取了e对象的clientX来进行对比，那么和谁对比呢？下面这句代码是关键

i = _.min(y, _.max(-2, k + (t - v)));

可以看到t-v是取出了差来进行对比的，那么t可以在方法中看到但是v变量呢？
仔细看一下绑定事件之前的代码可以发现，v是咱们按下时的坐标

 v = (i || p.event).clientX

通过上面的分析可以得到的是，鼠标按下获取了鼠标按下的坐标并绑定了事件。
咱们拖动的时候一直在计算鼠标的差，到这里懂的人应该都可以分析出来了。
没错，就是取差来判断是否拖动到了指定的长度
咱们继续分析，可以看到r方法最后一句

i != y && t - r - b != y || a()

i!=y就不管他，那么i==y就进入a方法,咱们来看一下y变量在哪里

var m = !1
  , v = (i || p.event).clientX
  , b = s.btn.offsetWidth
  , y = s.bar.offsetWidth - b
  , k = s.btn.offsetLeft
  , x = c.getClientRect(s.bar).left;

可以看到y其实就是取的容器的长度减去b的长度，而b就是滑块的长度。
由此已经可以看出来了最关键的过程。

处理

好了上面已经分析出过程了，所以咱们接下来写代码过掉滑块
第一步，触发滑块id为nc_1_n1z的mousedown事件，这里直接触发

event = document.createEvent(‘MouseEvents‘);
event.initEvent(‘mousedown‘, true, false);
document.querySelector("#nc_1_n1z").dispatchEvent(event);

在触发这个事件之后nc_1_n1z就绑定了mousemove事件，这里咱们先不触发，可以把鼠标移上去
在把鼠标移入网页的一瞬间可以看到滑块已经过掉了。看懂上面分析过程的孩纸应该都知道这是为什么

好了下面咱们在触发一下mousemove事件

event = document.createEvent(‘MouseEvents‘);
event.initEvent(‘mousemove‘, true, false);
Object.defineProperty(event,‘clientX‘,get()return 260;)
document.querySelector("#nc_1_n1z").dispatchEvent(event);

通过上面的执行可以看到滑块一下子就过掉了。好了，咱们把代码合并一下

event = document.createEvent(‘MouseEvents‘);
event.initEvent(‘mousedown‘, true, false);
document.querySelector("#nc_1_n1z").dispatchEvent(event);
event = document.createEvent(‘MouseEvents‘);
event.initEvent(‘mousemove‘, true, false);
Object.defineProperty(event,‘clientX‘,get()return 260;)
document.querySelector("#nc_1_n1z").dispatchEvent(event);

下面看一下效果

 

原文地址：http://blog.1zyan.cn/956.html