关键词:
难道向上攀登的路,不比站在顶峰更让人沸腾吗?
哈喽,好久不见呐,距离上次b站登录那篇爬虫博客后,小夜斗又去学习java知识辽,但是最近在研究js逆向,想把小夜斗最近学习到的一点点经验分享大伙——滑块底层,小夜斗会将js代码一步步分析讲解!
滑块网址:http://www.geetest.com/demo/
首先,我们进入极验网址中(谷歌浏览器),如下图所示:
我们选中【滑动模式-float】,点击进入,如下图所示:
大致页面如上图所示,一个滑块验证码,平常我们生活中所见到的!
使用无痕模式进行抓包,不会出现cookie那些啥滴之类,方便抓包!
一:第一次刷新页面抓包
抓取到了一些html页面请求和一些js代码请求,以及一些图片请求之类,其中这些请求里面有一些是破解滑块验证需要解密的参数,这个我们下一篇博客再详细说明,今天的任务主要是讲验证码底层图片是如何还原的!
二:下Canvas断点进行抓包
首先点击验证码,出现上面的图片,如何右键检查元素!
如何看到Sources面板中的Even Lister Breakpoints,勾选Canvas
如何点击验证码下方的刷新验证,这样我们就可以进行抓包了!
格式化后的js代码如下所示:
三:底图还原JS代码解析
下面是小夜斗从js源码中扣下来底图还原的核心代码:
switch (vkJ)
case AHkMb.Eyj()[20][34]:
e = e[VPOz(155)];
t = t[WdLA(155)];
var r = e[WdLA(584)];
var n = e[VPOz(522)];
var i = h[WdLA(112)](VPOz(113));
i[VPOz(584)] = r;
i[WdLA(522)] = n;
var o = i[VPOz(191)](VPOz(176));
o[WdLA(618)](e, 0, 0);
var a = t[WdLA(191)](WdLA(176));
t[VPOz(522)] = n;
t[WdLA(584)] = Ne;
var s = n / 2;
var u = 10;
for (var _ = 0; _ < 52; _ = _ + 1)
var c = Ge[_] % 26 * 12 + 1;
var f = Ge[_] > 25 ? s : 0;
var l = o[VPOz(679)](c, f, u, s);
a[WdLA(684)](l, _ % 26 * 10, _ > 25 ? s : 0);
分别在三个地方下断点(其实下一个断点也可以,为了方便调试就多下几个断点),7116行断点可以先不下,不然会直接调到那里,如下图所示:
- e = e[VPOz(155)] :e是img图片对象,然后后面分别把宽和高赋值给了 r 和 n
var i = h[WdLA(112)](VPOz(113));
h是一个document对象,WdLA(112)从console输出是"createElement",VPOz(113)是"canvas",即上述代码可写为:
var i = document.createElement.canvas
后面用 i 来接受了r和n的宽高
i[VPOz(584)] = r;
i[WdLA(522)] = n;
var o = i[VPOz(191)](VPOz(176));
// 还原后的代码
var o = i["getContext"]("2d")
大家可以用同样的方法去还原,把相应的函数调用放入console去输出,然后替换就可以知道是怎么调用的了!
小夜斗没怎么学过js,大概的意思,大概意思是返回一个支持2d环境绘制环境的画布对象
o[WdLA(618)](e, 0, 0);
// 还原后的代码
o["drawImage"](e,0,0)
上面的代码是:有了画布之后,然后绘制图片e的意思
var a = t[WdLA(191)](WdLA(176));
t[VPOz(522)] = n;
t[WdLA(584)] = Ne;
// 还原后的代码
var a = t["getContext"]("2d");
t["height"] = n;
t["width"] = Ne;
到这里,我们来看一下这些数字的含义:
- r:312 图片的宽(下面第一张)
- n:160 图片的高(下面第一张)
- Ne:260 图片的宽(下面第二张)
可以看到,上面的大小为 312 * 160
核心代码:
for (var _ = 0; _ < 52; _ = _ + 1)
var c = Ge[_] % 26 * 12 + 1;
var f = Ge[_] > 25 ? s : 0;
var l = o[VPOz(679)](c, f, u, s);
a[WdLA(684)](l, _ % 26 * 10, _ > 25 ? s : 0);
Ge的值是底图还原顺序:长度length为52,说明有52块小的底图,然后最后拼凑成一块完整的图形,还原顺序是根据上述的c值和f值判定的
而且这个数组最小的为0,最大的为51,就说明总共有52块拼图
还原顺序例如:第一块位置应该是第39块拼图(数组第一个值39),第二块位置应该是第38块拼图(数组第二个值),依次类推,知道最后一块拼图拼好,完整的顺序就还原出来了
"[39,38,48,49,41,40,46,47,35,34,50,51,33,32,28,29,27,26,36,37,31,30,44,45,43,42,12,13,23,22,14,15,21,20,8,9,25,24,6,7,3,2,0,1,11,10,4,5,19,18,16,17]"
- c值:每一个小图片的x坐标
%26可以判断上下,然后*12+1计算出x轴坐标
var c = Ge[_] % 26 * 12 + 1; //
- y值:每一个小图片的y坐标
图片的高的一半是80,从坐标0开始就是: 0、80、160
如果比25要大,y轴坐标就80,下半部分,0就是上半部分
var f = Ge[_] > 25 ? s : 0;
- 然后调用方法getImageData(x,y,width,height)得到图片
var l = o[VPOz(679)](c, f, u, s);
// 还原后的代码
val l = o["getImageData"](c,f,u,s);
- 最后调用方法putImageData(放置对象,x坐标,y坐标) 放置图片
a[WdLA(684)](l, _ % 26 * 10, _ > 25 ? s : 0);
好啦,本期博客分享就到这里了,这个js逆向着实写着有点困,哈哈最后补充一句:志远大佬永远滴神,js逆向是跟着志远大佬课程学的!
喜欢本期博客的小伙伴们不忘给小夜斗点赞、收藏、加关注呐哈哈!
- 在这个星球上,你很重要,请珍惜你的珍贵! ~~~夜斗小神社
手把手教你玩转极验滑块js逆向系列:滑块底层图片还原(代码片段)
难道向上攀登的路,不比站在顶峰更让人沸腾吗?哈喽,好久不见呐,距离上次b站登录那篇爬虫博客后,小夜斗又去学习java知识辽,但是最近在研究js逆向,想把小夜斗最近学习到的一点点经验分享大... 查看详情
手把手教你玩转极验滑块js逆向系列:滑块底层图片还原(代码片段)
难道向上攀登的路,不比站在顶峰更让人沸腾吗?哈喽,好久不见呐,距离上次b站登录那篇爬虫博客后,小夜斗又去学习java知识辽,但是最近在研究js逆向,想把小夜斗最近学习到的一点点经验分享大... 查看详情
每日一题leedcodeday01存在重复元素小夜斗力扣修炼之路(代码片段)
...,但美若神明Hello,好久不见呐!回想上一篇手把手教你玩转极验滑块JS逆向系列这一篇博客后,小夜斗已经将近一年没更新博客了,这一年经历的事情简直太多太多了,不过最令人安心的事情就是当你实... 查看详情
每日一题leedcodeday01存在重复元素小夜斗力扣修炼之路(代码片段)
...,但美若神明Hello,好久不见呐!回想上一篇手把手教你玩转极验滑块JS逆向系列这一篇博客后,小夜斗已经将近一年没更新博客了,这一年经历的事情简直太多太多了,不过最令人安心的事情就是当你实... 查看详情
极验滑块坐标识别
一:介绍一些网站为了区分人机行为,在网站的一些操作上添加验证码机制,来实现反爬虫。目前比较常见的验证码类型有: 1:传统式验证码主要通过用户输入图片中的字母,数字,汉字等来验证。特点:简单易... 查看详情
极验滑块验证的使用(代码片段)
...http://gsxt.haaic.gov.cn/index.jspx 下面这个选项一定要勾选极验打码要的参数 要爬取数据所在的页面 根据上面的截图然后找到相对应的菜蔬 然后下面这个代码就可以实现打印list页面的源代码,剩下的就是... 查看详情
python爬虫之selenium+极验滑块破解(代码片段)
现在使用B站的小伙伴们越来越多,我也是越来越喜欢B站了,因为有很多的资源可以学习。当然小胖子在B站也有自己的主页:https://space.bilibili.com/386395584。大家如果需要可以学习学习。此次B站老铁莫怪宋宋拿你作为... 查看详情
手把手教你玩转git
文章已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号码出Offer领取各种学习资料!在这里插入图片描述Git应用一、初识Git1.1Git的简史同生活中的许多伟大事物一样,Git诞生于一个极富纷争大举创新的年代。Linus... 查看详情
手把手教你玩转git分布式版本控制系统!
目录 Git诞生历史 Git环境准备Git安装部署Git常用命令Git基本操作Git管理分支结构Git管理标签GitLab安装部署GitHub托管服务Git客户端工具 1Git诞生历史 我想大家还记得Linustorvalds在1991年时发布了Linux操作系统吧,从那以... 查看详情
手把手教你玩转阿里云双11拼团活动
各位新老用户们,如果您已经开了团,但是还不知道怎么玩?小编告诉来告诉你!首先,进入活动主页面,点击【我要开团】,选择您想要购买的云产品进行开团!如果您只想开团不想购买,也可以~ 您开团后将享受以下福... 查看详情
手把手教你玩转12306验证码的秘密!
12306相信对很多小伙伴都不陌生,假如问你对这个网站的印象的时候,你不是会立即想起那个坑爹的验证码,而正是这个验证码,也一时间成为小伙伴们讨论的话题,今天思梦PHP就给大家带来他的实现办法,纯属技术交流,有什... 查看详情
手把手带你玩转spark机器学习-使用spark构建分类模型
系列文章目录手把手带你玩转Spark机器学习-专栏介绍手把手带你玩转Spark机器学习-问题汇总[持续更新]手把手带你玩转Spark机器学习-Spark的安装及使用手把手带你玩转Spark机器学习-使用Spark进行数据处理和数据转换手把手带你玩转... 查看详情
手把手教你玩转canvas
参考技术A之前用过echarts等图表插件,首次尝试自己写原生canvas,还以为多难多复杂的东西,深入了解之后发现就是数学中的几何图形嘛~欢迎大家和我一起来入坑!<canvas>看起来和<img>标签一样,只是<canvas>只有两个... 查看详情
手把手带你玩转spark机器学习-使用spark进行文本处理(代码片段)
系列文章目录手把手带你玩转Spark机器学习-专栏介绍手把手带你玩转Spark机器学习-问题汇总手把手带你玩转Spark机器学习-Spark的安装及使用手把手带你玩转Spark机器学习-使用Spark进行数据处理和数据转换手把手带你玩转Spark机器学... 查看详情
oracle小技巧手把手教你玩转sql*plus命令行,工作效率提升200%(代码片段)
作者简介作者:LuciferLiu,中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作,曾从事Oracle数据库开发工作,主要服务于生产制造,汽车金融等行业。现拥有OracleOCP,OceanBaseOBCA认证,擅长Oracle数据库运维... 查看详情
oracle小技巧手把手教你玩转sql*plus命令行,工作效率提升200%(代码片段)
作者简介作者:LuciferLiu,中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作,曾从事Oracle数据库开发工作,主要服务于生产制造,汽车金融等行业。现拥有OracleOCP,OceanBaseOBCA认证,擅长Oracle数据库运维... 查看详情
新生代工程师手把手教你玩转alluxio+ml(上篇)
活动回顾越来越多的公司在其机器学习平台中运用开源系统Alluxio加速训练任务的数据读取。为了帮助用户在机器学习场景下熟悉和部署Alluxio集群,更快的进行性能测试、分析以及调优,我们邀请到Alluxio团队的核心开发... 查看详情
每日一题leedcodeday01存在重复元素小夜斗力扣修炼之路(代码片段)
...,但美若神明Hello,好久不见呐!回想上一篇手把手教你玩转极验滑块JS逆向系列这一篇博客后,小夜斗已经将近一年没更新博客了,这一年经历的事情简直太多太多了,不过最令人安心的事情就是当你实... 查看详情