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

起因

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

排查

首先咱们打开淘宝登录页面,这里我就以阿里妈妈的超级推荐登录为例登录地址如下:登录地址
打开之后我们来到输入账户密码的地方
由于要实现自动登录的功能所以需要跟编辑框赋值，
但是淘宝是使用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

巴特西

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

起因

排查

分析

处理

最新文章

热门文章