起因
众所周知淘宝滑块很难过掉，今天博主就专门研究了一下淘宝滑块，
之前博主也有研究过但是发现并不好过。
今天恰好有个项目需要淘宝登录，就有滑块验证，
说明一下博主做的是浏览器插件哦。今天博主打算在研究滑块。
记录一下博主的解密过程。
排查
首先咱们打开淘宝登录页面,这里我就以阿里妈妈的超级推荐登录为例登录地址如下:登录地址
打开之后我们来到输入账户密码的地方
由于要实现自动登录的功能所以需要跟编辑框赋值，
但是淘宝是使用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);下面看一下效果