京东登录滑条验证破解 -- 纯js方法

声明：本文章仅供学习探讨，不建议用于商业用途！

提供一个思路，就是在滑条的div下再追加一个元素A，在元素A创建、注册mouse事件，注意要允许冒泡事件，这样元素A的事件也会触发了滑块的事件，然后将元素A创建鼠标的mousedown、mousemove、mouseup 事件，利用mousemove的冒泡事件触发滑条的事件，最后再调整一下速度，也就是模拟一下人工的速度，先加速后减速，最后停止，就ok了。 注意时间的长度尽量长一点，不然京东会认为这是机器在操作。

 

具体操作流程：

1. 在京东登录页面中找到滑块的元素位置

 

 

2. 在滑块的元素下新增任意一个div，具体代码可以是这样，实际可以自己任意定义

var sliderBtnHtml = `<div id='sliderBtn' style='width:50px;height:50px;background:green;left:0px;top:0px;position: absolute;'></div>`; 
	var sliderDiv = document.querySelector('#JDJRV-wrap-loginsubmit > div > div > div > div.JDJRV-slide-bg > div.JDJRV-slide-inner.JDJRV-slide-btn');
	sliderDiv.innerHTML = '';
	sliderDiv.insertAdjacentHTML('beforeEnd', sliderBtnHtml);
	var slider = document.querySelector('#JDJRV-wrap-loginsubmit > div > div > div > div.JDJRV-slide-bg > div.JDJRV-slide-inner.JDJRV-slide-btn > div#sliderBtn');

3. 新增后会变成下面这样，滑块多了一块绿色的东西；注意：绿色块要在滑块的div下

 

4. 给绿色块新增点击、滑动事件，这样绿色块会触发冒泡事件到滑块中；这样绿色块滑动了，滑块也会跟着滑动

//京东滑块破解js代码
	var x = 0;
	var y = 0;
	var l = 0;
	var t = 0;
	var speedDown;
	var speedUp;
	var isDown = false;
	var sliderBtnHtml = `<div id='sliderBtn' style='width:50px;height:50px;background:green;left:0px;top:0px;position: absolute;'></div>`; 
	var sliderDiv = document.querySelector('#JDJRV-wrap-loginsubmit > div > div > div > div.JDJRV-slide-bg > div.JDJRV-slide-inner.JDJRV-slide-btn');
	sliderDiv.innerHTML = '';
	sliderDiv.insertAdjacentHTML('beforeEnd', sliderBtnHtml);
	var slider = document.querySelector('#JDJRV-wrap-loginsubmit > div > div > div > div.JDJRV-slide-bg > div.JDJRV-slide-inner.JDJRV-slide-btn > div#sliderBtn');
	window.onmousemove = function(e){
		 if (isDown == false) {
		        return;
		    }
		 var nx = e.clientX;
	    var ny = e.clientY;
	    //计算移动后的左偏移量和顶部的偏移量
	    var nl = nx - (x - l);
	    var nt = ny - (y - t);

	    console.log("nl:"+nl+","+"nt:"+nt+",nx:"+nx+", ny:"+ny+", x:"+x+", y:"+y+", l:"+l+", t:"+t+", xPos:"+window.xPos+", yPos:"+window.yPos);
		slider.style.left = nl+'px';
		//slider.style.top = nt+'px';
	};

	slider.onmousedown = function(e){
		 x = e.clientX;
	    y = e.clientY;

	    //获取左部和顶部的偏移量
	    l = slider.offsetLeft;
	    t = slider.offsetTop;
	    //开关打开
	    isDown = true;
	    //设置样式
	    slider.style.cursor = 'move';
	};

	slider.onmouseup = function(e) {	    //开关关闭
	    isDown = false;
	    this.style.cursor = 'default';
	};

	
	var currentLeft = sliderDiv.getBoundingClientRect().left + 10;
	var currentTop = sliderDiv.getBoundingClientRect().top + 10;

	var MouseEvents = document.createEvent('MouseEvents');
	MouseEvents.initMouseEvent('mousedown', true, true, window, 0,currentLeft,currentTop,currentLeft,currentTop);
	slider.dispatchEvent(MouseEvents);

	var mouseMoveEvent = function(ofsx, ofsy){
		MouseEvents.initMouseEvent('mousemove', true, true, window, 0, ofsx, ofsy, ofsx, ofsy);
		return MouseEvents;
	};

	var distance = currentLeft + 110;  //110是滑块到拼图的位置的距离，是python opencv计算出来的
	speedUp = setInterval(function() {
		slider.dispatchEvent(mouseMoveEvent(currentLeft, currentTop));
		currentLeft = currentLeft + 20 + Math.ceil(Math.random()*3);
		if(currentLeft >= distance + 21){
			clearInterval(speedUp);

			sleep(3000); //等待1.5秒
			//往后
			speedDown = setInterval(function(){
				slider.dispatchEvent(mouseMoveEvent(currentLeft, currentTop));
				currentLeft = currentLeft - Math.ceil(Math.random()*3);

				if(currentLeft <= distance){
					clearInterval(speedDown);
					
					//2秒后执行
					setTimeout(function(){
						MouseEvents.initMouseEvent('mouseup', true, true, window, 0, currentLeft, currentTop,currentLeft, currentTop);
						slider.dispatchEvent(MouseEvents);
					}, 2000);
				}
				
			}, 60);
		}
	}, 40);

	function sleep(second){
		for(var i = 0; i < second; i++){

		}
	};

 

5. 最后创建 initMouseEvent 事件，然后 dispatchEvent 触发模拟事件就可以了；具体代码自己写，不难的

 

至于需要滑动的偏移量，可以将缺口图片的大图的base64给python的opencv进行计算具体如下（下面的calculationDistance接口返回的distance 就是 需要移动的偏移量）：

# -*- coding: utf-8 -*-
import flask,json
import cv2
import numpy as np
import base64
server = flask.Flask(__name__)

@server.route("/index", methods=['get'])
def index():
    res = {"msg":"这是一个接口", "msg_code":"0"}
    return json.dumps(res)

@server.route("/calculationDistance", methods=['post'])
def calculationDistance():

    background = flask.request.values.get('background')
    slider = flask.request.values.get('slider')

    if background is None:
        res = {"msg":"background 参数为空", "msg_code":"-1", "distance": ""}
        return json.dumps(res)

    if slider is None:
        res = {"msg":"slider 参数为空", "msg_code":"-1", "distance": ""}
        return json.dumps(res)

    background_img_data = base64.b64decode(background)
    background_img_array = np.fromstring(background_img_data, np.uint8)
    background_img = cv2.imdecode(background_img_array, cv2.COLOR_RGB2BGR)

    slider_img_data = base64.b64decode(slider)
    slider_img_array = np.fromstring(slider_img_data, np.uint8)
    slider_img = cv2.imdecode(slider_img_array, cv2.COLOR_RGB2BGR)

    res = cv2.matchTemplate(background_img, slider_img, cv2.TM_CCORR_NORMED)
    value = cv2.minMaxLoc(res)[2][0]
    # distance = value * backgroundWidth / 360
    distance = value

    res = {"msg":"这是calculationDistance接口", "msg_code":"0", "distance": distance}
    return json.dumps(res)

server.run(port=9991, host='0.0.0.0', debug=True)