python学习交流公众号 Hello Python上线啦,欢迎关注
一:检测鼠标移动轨迹场景
部分爬虫使用selenium,airtest等,模拟用户点击等操作,以及在滑块验证码等,这时候通过检测鼠标移动轨迹,将可以在一定程度上检测出机器人,并触发反爬措施
二:逻辑与实现方式
基于监听 mousemove 事件,触发,记录鼠标坐标,验证逻辑如下:
- 鼠标移动位移不连续
- 多次点击相同位置
- 点击等操作前 无位移,或位移触发次数少于阈值
三:实践
前端代码示例:从左侧进入,未检测到位移,直接点击,则认为是机器人,使用中将按钮放置div 中间,或检测在body中的移动轨迹。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
.stage {
}
.track-monitor {
background-color: orange;
}
.track-pad {
height: 200px;
background-color: green;
}
.track-coordinate {
background-color: purple;
color: white;
height: 25px;
line-height: 25px;
font-size: 12px;
}
.track-coordinate-list {
font-size: 12px;
width: 100%;
word-break: break-word;
}
</style>
<script>
window.addEventListener('load', function () {
var pad = document.getElementsByClassName('track-pad')[0];
var monitor = document.getElementsByClassName('track-monitor')[0];
var coordinate = document.getElementsByClassName('track-coordinate')[0];
var clist = document.getElementsByClassName('track-coordinate-list')[0];
var reset = document.getElementsByTagName('button')[1];
var btn_click11 = document.getElementsByTagName('button')[0];
var fixSize = function () {
monitor.width = window.innerWidth;
};
var context = monitor.getContext('2d');
var cset = [];
window.addEventListener('resize', function () {
fixSize();
});
pad.addEventListener('mousemove', function (e) {
context.strokeStyle = 'white';
context.lineTo(e.x, e.y);
context.stroke();
coordinate.innerHTML = e.x + ':' + e.y;
cset.push(coordinate.innerHTML);
clist.innerHTML = cset.join(',');
});
reset.addEventListener('click', function () {
fixSize();
cset = [];
clist.innerHTML = '';
coordinate.innerHTML = '在绿色的方块中滑动鼠标';
});
btn_click11.addEventListener('click', function () {
if (cset.length < 10){
console.log('机器人');
alert('机器人')
}else {
console.log('real people')
}
fixSize();
cset = [];
clist.innerHTML = '';
coordinate.innerHTML = '在绿色的方块中滑动鼠标';
});
fixSize();
});
</script>
</head>
<body>
<div class="stage">
<div class="track-pad">
<button>
点我
</button>
</div>
<canvas width="100" height="200" class="track-monitor"></canvas>
<div class="track-coordinate">在绿色的方块中滑动鼠标</div>
<button>重置</button>
<div class="track-coordinate-list"></div>
</div>
</body>
</html>
四:问题
- mosemove 触发时间粒度问题。
- 前端有一些鼠标移动插件,需要具体分析。
- 记录大量位移信息,需要做相应处理