滑块验证码
1. 滑块简介

注:重点是识别滑块缺口,测出需要拖动的距离
1.1 核心步骤
-
从服务器随机取一张图片,并对图片上的随机
x,y
坐标和宽高一块区域抠图; -
根据步骤一的坐标和宽高,使用二维数组保存原图上抠图区域的像素点坐标;
-
根据步骤二的坐标点,对原图的抠图区域的颜色进行处理。
-
完成以上步骤之后得到两张图(扣下来的方块图,带有抠图区域阴影的原图),将这两张图和抠图区域的y坐标传到前台,前端在移动方块验证时,将移动后的x坐标传递到后台与原来的x坐标作比较,如果在阈值内则验证通过。
-
请求验证的步骤:前台向后台发起请求,后台随机一张图片做处理将处理完的两张图片的
base64
,抠图y坐标和token
(token为后台缓存验证码的唯一token
,可以用缓存和分布式缓存)返回给前台。 -
前台滑动图片将
x
坐标和token
作为参数请求后台验证,服务器根据token
取出x
坐标与参数的x进行比较。
1.2 突破规则
这类验证码可以使用 selenium
操作浏览器拖拽滑块来进行破解,难点两个,一个如何确定拖拽到的位置,另一个是避开人机识别(反爬虫)。
首先我们先看看,确定滑块验证码需要拖拽的位移距离
有三种方式
- 人工智能机器学习,确定滑块位置
- 通过完整图片与缺失滑块的图片进行像素对比,确定滑块位置
- 边缘检测算法,确定位置
各有优缺点。人工智能机器学习,确定滑块位置,需要进行训练比较麻烦,所以我们主要看后面两种。
对比完整图片与缺失滑块的图片
1.3 验证码图片处理
-
站点:https://www.geetest.com/demo/
-
使用浏览器技术提取滑块图片,进行处理
# 提取背景图
document.getElementsByClassName('geetest_canvas_bg geetest_absolute')[0].toDataURL('image/png')
document.getElementsByClassName('geetest_canvas_fullbg geete