位置：首页-资讯-后端开发

【JavaScript 逆向】极验三代滑块验证码逆向分析

2023-09-09 18:48

短信预约 -IT技能 免费直播动态提醒

声明

本文章中所有内容仅供学习交流，相关链接做了脱敏处理，若有侵权，请联系我立即删除！

案例目标

极验验证码 demo：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby8=

滑动验证码：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s

文件版本：slide.7.8.9.js

以上均做了脱敏处理，Base64 编码及解码方式：

import base64# 编码# result = base64.b64encode('待编码字符串'.encode('utf-8'))# 解码result = base64.b64decode('待解码字符串'.encode('utf-8'))print(result)

案例分析

抓包

刚进入页面，F12 打开开发者人员工具，未点击生成验证时 Network 中的抓包情况：

现对关键部分进行分析：

register-slide 注册滑动条请求，响应返回：
- challenge: "d4e44298ed09f654b3c284a5fb6d72ad"，动态变化，关键参数
- gt: "019924a82c70bb123aae90d483087f94"，固定值
gettype.php 获取验证码，Query String Parameters：GET 请求时，参数以 url string 的形式进行传递提交了 gt、callback：
- gt：register-slide 时响应返回的定值
get.php 以 url string 的形式传递了一些参数：
- gt: register-slide 时响应返回的定值
- challenge: register-slide 时响应返回的定值
- w：加密了，环境校验，轨迹

点击滑块后，响应返回的新数据接口：

ajax.php 以 url string 的形式传递了一些参数：
- gt: register-slide 时响应返回的定值
- challenge: register-slide 时响应返回的定值
- w：加密了，环境校验，轨迹，跟前文 get.php 中的 w 值不一样
get.php 以 url string 的形式传递了一些参数：
- gt: register-slide 时响应返回的定值
- challenge: register-slide 时响应返回的定值
- Preview 响应预览中 bg: 带缺口的背景图（乱码），3e72d088a.jpg：
- fullbg：完整的背景原图（乱码），cd0bbb6fe.jpg：
- slice：滑块图片，3e72d088a.png
ajax.php 以 url string 的形式传递了一些参数为：
- gt: register-slide 时响应返回的定值
- challenge: get.php 时响应返回
- w：加密了，环境校验，轨迹，跟前文 ajax.php 中的 w 值不一样，至此三个 w 值均不一样
- 响应预览中，成功返回，message: "success"，success: 1，validate 值：
- 响应预览中，失败返回 message: "fail"，success: 0：

抓包步骤梳理分析：

进入页面，服务器响应返回一些参数（challenge、gt 等）和一些关键的 js 文件，用于生成图片及校验；
点击按钮进行验证后，会调用到第一步中的一些 js 文件，生成缺口图、完整背景图、滑块图、w 值等；
校验滑块是否对其缺口、轨迹是否异常、相关参数是否正确等，判断验证是否成功。

逆向调试

底图还原

点击按钮进行验证，会弹出滑动验证码，审查元素可以发现，底图是通过 canvas 绘制出来的：

所以可以直接通过事件断点进行定位：

Sources → Event Listener Breakpoints → Canvas → Create canvas context，然后点击刷新验证码即会在 slide.7.8.8.js 文件处断住，点击左下角 { } 进行格式化操作，断在了第 295 行：

控制台打印输出一下该行内容：

// canvas.getContext(contextID)var o = canvas.getContext('2d');

参数 contextID 指定想要在画布上绘制的类型， '2d' 指定了二维绘图，返回 CanvasRenderingContext2D 对象，该接口是 Canvas API 的一部分，可为

i 为 canvas 画布，宽为 312，长为 160，对应乱序背景图片的长宽：

正常验证码背景图片的长为 160，宽为 260：

该函数体中的内容经过控制流平坦化混淆处理，打乱了函数原有代码执行流程及函数调用关系，使代码逻变得混乱无序，大体架构为：

for(x){    switch($_DAHHo){        case xx:        ...        break;        case xxx:        ...        break;    }}

更多相关可参考：【JavaScript 逆向】AST 技术反混淆

大致为从大数组中根据指定的逻辑按照下标进行取值操作：

在第 299 行打下断点，控制台打印输出：

CanvasRenderingContext2D.drawImage() 方法提供了多种在画布（Canvas）上绘制图像的方式，此处为画图操作：

drawImage(image, dx, dy)// image：绘制到上下文的元素// dx：image 的左上角在目标画布上 X 轴坐标// dy：image 的左上角在目标画布上 Y 轴坐标

img 的 class="lazy" data-src 末尾为 7bfaaa72b.webp，就是乱序的完整背景图片：

下一行又绘制了一个 2d 画布：

直接在第 312 行打下断点，第 304、305 行对应了上文验证码背景图的长宽：

其中有个 for 循环需要分析一下：

for (var a = r / 2, _ = 0; _ < 52; _ += 1) {    var c = Ut[_] % 26 * 12 + 1      , u = 25 < Ut[_] ? a : 0      , l = o[$_CJEZ(30)](c, u, 10, a);    s[$_CJEZ(84)](l, _ % 26 * 10, 25 < _ ? a : 0);}

前文提到完整乱序背景图的比例为 312 x 160，即宽为 320，长为 160，a = r / 2，r 为图片长，即 a = 80，为图片长度的一半，此处将图片横切分割为了上下两等份，Ut[_] % 26 * 12 + 1，_ 值为 52，再将图片上下两部分纵向切割为了 26 等份，Ut 数组为取下标的顺序，即数组还原顺序，为固定的，% 26 * 12 + 1 为特征码，不会变动，25 < Ut[_] ? a : 0 判断图片是上半部分还是下半部分，正确图片的顺序为：

0: 39   10: 50  20: 31  30: 14  40: 3   50: 161: 38   11: 51  21: 30  31: 15  41: 2   51: 172: 48   12: 33  22: 44  32: 21  42: 03: 49   13: 32  23: 45  33: 20  43: 14: 41   14: 28  24: 43  34: 8   44: 115: 40   15: 29  25: 42  35: 9   45: 106: 46   16: 27  26: 12  36: 25  46: 47: 47   17: 26  27: 13  37: 24  47: 58: 35   18: 36  28: 23  38: 6   48: 199: 34   19: 37  29: 22  39: 7   49: 18

l = o[$_CJEZ(30)](c, u, 10, a);

CanvasRenderingContext2D.getImageData()，返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为 (sx, sy)、宽为 sw、高为 sh：

ImageData ctx.getImageData(sx, sy, sw, sh);// sx：将要被提取的图像数据矩形区域的左上角 x 坐标// sy：将要被提取的图像数据矩形区域的左上角 y 坐标// sw：将要被提取的图像数据矩形区域的宽度// sh：将要被提取的图像数据矩形区域的高度

s[$_CJEZ(84)](l, _ % 26 * 10, 25 < _ ? a : 0);

CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法，如果提供了一个绘制过的矩形，则只绘制该矩形的像素：

void ctx.putImageData(imagedata, dx, dy);// ImageData：包含像素值的数组对象// dx：源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）// dy：源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）

这里就是同时对上下两部分进行拼凑，_ % 26 * 10 表示每个小块取 10 px 像素。

随便拖动滑块，失败后 Network 中会抓包到如下内容：

响应预览中返回失败信息，ajax.php 以 url string 的形式传递的参数中包括 w 参数，通过 Initiator 跟栈进去：

在第 4567 行 return 处打下断点，再次拖动滑块即会断住：

向上跟栈到第 1182 行，s 中包含请求 url 的全部信息：

所以要找到 s 生成的位置，接着向上跟栈，跟到函数 k 处，在第 1128 行 s 已经被作为参数传进来值了：

接着向上跟，跟到第 868 行，n 即 s 的值：

往上找，在第 844 行打下断点，o 中包含我们所要的 w 参数：

进一步往上跟栈到 $_CCBd 处，在第 6076 行，可以看到 w 参数的值由 h + u 生成：

所以接下来需要知道 h 和 u 的值是怎么生成的，c 的生成位置在第 6065 行，h 的生成位置在第 6067 行：

var u = r[$_CAHJR(706)]()  , l = V[$_CAIAZ(339)](pt[$_CAHJR(278)](o), r[$_CAHJR(721)]())  , h = m[$_CAIAZ(769)](l)

u 参数逆向分析

u 由 r[$_CAHJR(706)] 方法生成，先在第 6065 行打下断点，断住后，选中跟进过去，跳转到第 6206 行，在第 6215 行打下断点，点击下一个断点即会断住：

控制台打印后可以看到，返回值 e 为 u 参数的值，定义在第 6212 行，$_CBFJf(339) 为 "encrypt"，同时 new U() 的原型链中包含 setPublic 方法，设置公钥，因此可以推测，这里是经过了 RSA 加密，this[$_CBFJf(721)](t) 为一串明文值，先跟进到 this[$_CBFJf(721)] 中，会跳转到第 6196 行，在下一行打下断点，Mt 即为那串明文值：

Mt 是由 rt 方法赋值的，跟进到 rt 方法中，在第 4197 行，在第 4203 行打下断点，可以知道 rt 方法的返回值是由四个 t 方法的值加起来得到的，长度为 16 位：

进一步跟进到 t 方法中，在第 4187 行，在 4192 行打下断点，返回值即为 t 方法的值，每次生成结果不一样：

(65536 * (1 + Math[$_BFBFy(14)]()) | 0)[$_BFBFy(287)](16)[$_BFBEu(489)](1);

控制台打印一下这部分内容：

根据打印内容，手动解混淆：

(65536 * (1 + Math["random"]()) | 0)["toString"](16)["substring"](1);

所以逻辑已经清楚了，直接通过代码对 this[$_CBFJf(721)](t) 的值进行复现即可：

function randomStr() {    var data = "";    for (var index = 0; index < 4; index++) {        data += (65536 * (1 + Math["random"]()) | 0)["toString"](16)["substring"](1);    }    return data;}// console.log(randomStr());// console.log(randomStr().length);

明文部分解决了，再来看看 RSA 加密部分，跟进到 new U() 原型链中 setPublic 设置公钥的位置：

跳转到第 2895 行，在第 2896 行打下断点，t 为 key 值，e 为公钥模数：

所以接下来只需要把 U 定义的位置找到，导出为全局变量调用即可拿到 key 值，ctrl + f 局部搜索 var U =，会发现其定义位置在第 2030 行，在后面加个 window.yyy = U; 即可导出，整个 js 文件扣下来改写后如下：

!function(){    wv_ZX.$_AA = function() {...    }();    wv_ZX.$_Bo = function() {...    }();    wv_ZX.$_CN = function() {...    }();    wv_ZX.$_Dg = function() {...    }();    function wv_ZX() {}    !function(){        ...        var U = function(){            ...        }();        window.yyy = U;    }();}();

粘贴到 Snippets 中，打印结果无误：

key 处 debugger 后，t 值与 e 值也与网页 js 中的一致：

接下来就可以复现 u 值了：

!function(){    wv_ZX.$_AA = function() {...    }();    wv_ZX.$_Bo = function() {...    }();    wv_ZX.$_CN = function() {...    }();    wv_ZX.$_Dg = function() {...    }();    function wv_ZX() {}    !function(){        ...        var U = function(){            ...        }();        window.yyy = U;    }();}();function randomStr() {    var data = "";    for (var index = 0; index < 4; index++) {        data += (65536 * (1 + Math["random"]()) | 0)["toString"](16)["substring"](1);    }    return data;}function getU(){    return new window.yyy()['encrypt'](randomStr());}// console.log(getU());

成功获取到 u 值：

l 参数逆向分析

u 值获取到了，下一步就需要获取 l 值了，l 是个大数组：

控制台打印下各部分内容，这里也是个加密，pt[$_CAHJR(278)](o) 包含很多 JSON 格式的信息：

还原一下，r[$_CAHJR(721)]() 就是随机的是十六位字符串：

V["encrypt"](pt["stringify"](o), randomStr())

stringify 是将 JSON 格式转换为字符串，所以那部分信息是由 o 生成的，o 定义在第 6000 行：

拖动几次滑块对比一下参数 o 中有哪些值会发生变化：

imgload 为图片生成时间，不一样的有 aa、passtime、rp、userresponse，滑块拖动的距离不一样，aa 值的长度会不一样，所以 aa 的值很可能是滑块的移动轨迹，aa 定义在第 6005 行：

e 值是函数传进来的参数，所以向上跟栈查看生成的位置，在第 8154 行：

l = n[$_CJJJ_(957)][$_DAAAl(1022)](n[$_DAAAl(957)][$_DAAAl(1027)](), n[$_DAAAl(90)][$_CJJJ_(1004)], n[$_CJJJ_(90)][$_CJJJ_(386)]);

打下断点后，控制台打印一下各部分内容：

n[$_CJJJ_(957)][$_DAAAl(1022)] 为一个函数，传入了三个参数，n[$_DAAAl(957)][$_DAAAl(1027)]() 的值为 aa 的一部分，为轨迹值，n[$_DAAAl(90)][$_CJJJ_(1004)] 为数组，值是固定的， n[$_CJJJ_(90)][$_CJJJ_(386)] 是一个八位字符串，值会变化，根据控制台打印的内容可解混淆为：n["$_CJT"]["c"] 和 n["$_CJT"]["s"]，这两个值是 get.php 响应返回的：

因此接下来就需要跟进到 n[$_DAAAl(957)][$_DAAAl(1027)] 中，从第 4049 行一直到第 4117 行，在第 4092 行打下断点，t 即为鼠标轨迹，为 x 轴，y 轴，时间，自执行函数括号中的 this[$_BEGJj(311)] 为传入的轨迹值：

在第 4117 行打下断点，控制台打印，为 n[$_DAAAl(957)][$_DAAAl(1027)]() 的值：

对其内容逐个分析：

r[$_BEHAq(439)]($_BEHAq(50)) + $_BEGJj(476) + i[$_BEGJj(439)]($_BEGJj(50)) + $_BEHAq(476) + o[$_BEHAq(439)]($_BEHAq(50));

控制台打印还原：

r["join"]("") + "!!" + i["join"]("") + "!!" + o["join"]("");

r 在第 4093 行定义为一个空数组，传入的鼠标轨迹：

r["join"]("")：x轴
i["join"]("")：y轴
o["join"]("")：时间

同样将这一部分内容定义为全局变量导出，加到 W[$_CJEZ(251)] 的最后：

window.get_track = W[$_CJEZ(251)]["\u0024\u005f\u0047\u0046\u004a"];

将鼠标轨迹作为参数传递进去，mouseTrack：

"\u0024\u005f\u0047\u0046\u004a": function(mouseTrack) {    var $_BEGJj = wv_ZX.$_CN      , $_BEGIl = ['$_BEHCf'].concat($_BEGJj)      , $_BEHAq = $_BEGIl[1];    $_BEGIl.shift();    var $_BEHBo = $_BEGIl[0];    function n(t) {...    }    var t = function(t) {...    }(mouseTrack)      , r = []      , i = []      , o = [];    return new ct(t)[$_BEHAq(94)](function(t) {...    }),    r[$_BEHAq(439)]($_BEHAq(50)) + $_BEGJj(476) + i[$_BEGJj(439)]($_BEGJj(50)) + $_BEHAq(476) + o[$_BEHAq(439)]($_BEHAq(50));}

获取轨迹值，this[$_BEGJj(311)]：

传入导出的 window.get_track() 中，成功得到想要的结果：

至此传入的三个参数都解决了，就需要跟进到 n[$_CJJJ_(957)][$_DAAAl(1022)] 函数中没在第 4135 行：

同样将这部分内容导出即可：

window.get_func = W[$_CJEZ(251)]["\u0024\u005f\u0042\u0042\u0045\u0053"];

将这一部分封装成函数，参数值先固定，验证一下：

function getTrack_(){    return window.get_func(window.get_track([[-41,-33,0],[0,0,0],[1,0,67],[5,0,84],[10,0,88],[17,0,96],[24,0,104],[29,0,111],[33,0,117],[36,0,128],[39,0,133],[40,0,144],[42,0,148],[43,-1,155],[44,-1,164],[46,-1,171],[48,-2,177],[49,-2,186],[50,-2,194],[51,-2,207],[51,-2,254]]), [12, 58, 98, 36, 43, 95, 62, 15, 12], "705a5874");        }

成功获取到结果，aa 参数复现完成：

对比一致：

接下来是 userresponse，在第 6014 行：

t 为滑块滑动的距离，i[$_CAHJd(182)] 为 challenge 的值：

跟进到 H 中，在第 704 行，将其作为全局变量导出：

window.userResponse = H;

t 值，challenge 值写入，控制台打印测试：

同样方法也可以将 ep 等导出：

window.getPasstime = ne[$_CJEZ(251)]["\u0024\u005f\u0043\u0043\u0043\u0071"];

passtime 值为 n，这里值为 374：

断住后向上跟栈到 $_CGlj 中，在第 8164 行生成：

n[$_DAAAV(871)] = $_Ii() - n[$_DAAAV(961)]

为滑块滑动开始到结束的时间：

rp 定义在第 6076 行，把 gt、32 位 challenge、passtime 通过 X 方法进行了加密：

// 混淆o[$_CAIAt(791)] = X(i[$_CAIAt(104)] + i[$_CAIAt(182)][$_CAHJd(139)](0, 32) + o[$_CAHJd(704)]);// 解混淆o['rp'] = X(i['gt'] + i['challenge']['slice'](0, 32) + o['passtime']);

X 方法定义在第 1876 行：

同样在函数末尾，将其导出为全局变量：

window.xFunc = X;window.xFunc(i['gt'] + i['challenge']['slice'](0, 32) + o['passtime']);

对比测试，结果一致：

后面的直接先写成固定值，一开始的 l 参数复现大半：

现在把 V["encrypt"] 导出即可，局部搜索 var V =，只有一个结果，定义在第 2974 行，在函数结尾导出为全局变量：

window.getV_encrypt = V["encrypt"];

gt[$_CAIAt(218)](o) 先写为固定值，打印测试一下，成功得到结果：

h 参数逆向分析

拿到 l 值，再将 m[$_CAIAt(782)] 方法导出即可进一步拿到 h 值，在第 1568 行，同样导出为全局变量，控制台打印输出结果，成功得到 h 值：

function getH(){    return window.getM["\u0024\u005f\u0047\u0047\u0063"](window.getV_encrypt('{"lang":"zh-cn","userresponse":"6d06000dd600","passtime":269,"imgload":1193,"aa":"P,-,,,(!!@ypy!)Zy!)t!)!)!)yyXstsssxsussss(!!(k0020028/112.19/11CC:0)","ep":{"v":"7.8.9","$_BIB":false,"me":true,"tm":{"a":1668740199343,"b":0,"c":0,"d":0,"e":0,"f":1668740199352,"g":1668740199352,"h":1668740199352,"i":1668740199352,"j":1668740199352,"k":0,"l":1668740199357,"m":1668740199759,"n":1668740199760,"o":1668740199770,"p":1668740200226,"q":1668740200226,"r":1668740200229,"s":1668740200229,"t":1668740200229,"u":1668740200230},"td":-1},"vsof":"2515396075","rp":"3ced63451bb55c70951d6bbb5b851096"}', "c18a0f7fbb499af0"));}function getW(){    return getH() + getU();}

将值固定后对比，结果一致：