起因

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

排查

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