osin 发表于 2021-8-31 13:01:23

某验第三代滑动验证码分析(最新):第二部分


接着之前的部分来,老规矩,仅供学习研究,勿用于商业用途
第二步:识别验证码图片缺口距离验证码图片还原
将两张验证码背景图片(带缺口和不带缺口)下载到本地之后,可以看到它们大概长这个样子的:
https://img-blog.csdnimg.cn/f96048898d4d4e05bed93502221bde65.webp#pic_center

可以看到图片是被打乱了的,需要进一步还原

图片的还原逻辑在slide.7.8.3.js里,混淆还原就不说了吧,第一部分里面有。关键逻辑我们可以通过追堆栈找到(这是下下策),想要快速定位的话,推荐hook或者搜索关键字,看看两种方式:
[*]
hook:

由于某验验证码是用canvas绘图的(F12查看验证码元素可以看出),那么我们就可以hook创建canvas对象的地方,直接百度上抄一个:
// hook canvas(function() {
    'use strict';
    let create_element = document.createElement.bind(document);

    document.createElement = function (_element) {
        console.log("create_element:",_element);
        if (_element === "canvas") {
            debugger;
        }
        return create_element(_element);
    }})();
https://img-blog.csdnimg.cn/6351bbd0346d44f280cd7acbbdc518f9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAT1Npbm9vTw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

能直接断到,右边往下追一个堆栈,就能找到图片还原逻辑:
https://img-blog.csdnimg.cn/e1bd04f495d241e98459394b192b37f7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAT1Npbm9vTw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[*]
搜索关键字

因为canvas还原图片的操作需要用到两个函数getImageData(裁剪)和putImageData(粘贴),直接搜索这两关键字也行:
https://img-blog.csdnimg.cn/78bcc294bc3a4a68bd9a6d3c391d8e1d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAT1Npbm9vTw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

这里逻辑还是很清晰的,但如果扣js的话相对来说要麻烦一些,还要依赖第三方canvas库,不如直接用python复写逻辑(用到了PIL库):
https://img-blog.csdnimg.cn/8b94da0b7b684b0186b8f60be09b3a15.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAT1Npbm9vTw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
缺口距离识别
现在我们手上有了两张还原好的验证码背景图片,类似下图:
https://img-blog.csdnimg.cn/a0dd44d73772497482013ab30682e92a.png#pic_center
https://img-blog.csdnimg.cn/91d32d560b764fcbbe66f2149eef33bf.png#pic_center

识别验证码缺口的主要逻辑就是通过对比两张图片的像素差,从左往右对比,在遇到像素差值过大时,就认为这里就是缺口最左边的位置。这里直接推荐个项目:
https://github.com/crazyxw/SlideCrack

需要注意的是这里的像素差阈值,原项目里使用的阈值是60:
https://img-blog.csdnimg.cn/1c544773960b46b1aa1a559ef268dfd8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAT1Npbm9vTw==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

但由于某验图片里会包含一些干扰阴影(从上面两张验证码图片也可以看出来),这个值需要调整。实测阈值改为80以上就识别效果就已经很好了(我个人用的100,别问,问就是我乐意(╯^╰))

接着就能计算出缺口距离,为了方便检测效果,我加了一条线来判断:
https://img-blog.csdnimg.cn/ca36e9ed0a174474bc8f38680d09eb84.png#pic_center

好了,这部分就结束了。。。

才怪。

到后面会发现我们识别出来的缺口距离匹配出的轨迹还是过不了验证,是因为:
https://img-blog.csdnimg.cn/e70c909fba59487b97cb443ffd9b5732.png#pic_center

滑块是有一小段初始距离的!用个笨方法——PS量一下,不到6个像素点,那就算作6吧。所以缺口距离最后还得减个6才能去匹配滑动轨迹


第二部分就结束了,最后一部分抽空补上。

欢迎访问我的原始文章:https://blog.csdn.net/qq_31998745/article/details/120015288

下一篇:某验第三代滑动验证码分析(最新):第三部分
页: [1]
查看完整版本: 某验第三代滑动验证码分析(最新):第二部分