java滑动验证码 base变色滑块验证码js逆向

转载

AI大梦想家 2023-12-22 20:42:05

文章标签 java滑动验证码 base变色 javascript 开发语言 ecmascript Python 文章分类 Java 后端开发

早餐店不会开到晚上，想吃的人早就来了！😄

Js逆向教程-15滑块流程极验

java滑动验证码 base变色滑块验证码js逆向_ecmascript

一、滑块是什么？

区分是否是机器人。根据滑动轨迹区分是否是人操作的。

滑块肯定有滑动条

访问极验网站

https://www.geetest.com/demo/

滑块就是让你产生一个滑动的轨迹。从而判断你不是机器人。

二、看代码分析流程

主要分析和服务器交互的流程。

2.1抓包

2.1.1抓整个页面包

切换到无痕模式，打开浏览器，切换到开发者模式F12，打开这个网站：

https://www.geetest.com/demo/slide-float.html

可以看到，抓到了这么多包：

java滑动验证码 base变色滑块验证码js逆向_javascript_02

click-float.html

请求页面

jquery.js

jquery.js的库

gt.js

极验的网址js

register-click?t=1669468731786

注册滑动条的请求。

返回如下数据

challenge: "ffc57c53b989bed8d4c8c82a6c91bdc5"
gt: "6216680937717fdab947ed9e71a3aaa1"
new_captcha: true
success: 1

gettype.php?gt=6216680937717fdab947ed9e71a3aaa1&callback=geetest_1669468736576

获取类型。Get请求，传递gt和callback：

gt: 6216680937717fdab947ed9e71a3aaa1
callback: geetest_1669468736576

拿js代码，这其中，就包括下面请求的fullpage.9.1.0.js滑块js代码

java滑动验证码 base变色滑块验证码js逆向_ecmascript_03

fullpage.9.1.0.js

请求到的滑块的js代码

get.php?gt=

Get请求，传递gt和challenge：

gt: 6216680937717fdab947ed9e71a3aaa1
challenge: ffc57c53b989bed8d4c8c82a6c91bdc5
lang: zh-cn
pt: 0
client_type: web
w（加密了）:f0HVBwkfn97PhhKiVEp6FNZPqU5)bMpN5JGSg2yoTPdjAmajveEIy4Vn25xywvajJFCkMzftbSGx5s
callback: geetest_1669468732692

返回如下数据

java滑动验证码 base变色滑块验证码js逆向_开发语言_04

返回了验证的提示语看起来不是很重要。除了c这个数组可能比较重要

sprite2x.1.1.5.png

滑块的图片

2.1.2抓滑块包

ajax.php?gt=6216680937717fdab947ed9e71a3aaa1&challenge=

传递下面数据：

gt: 6216680937717fdab947ed9e71a3aaa1
challenge: 1352a9b060f5416e4fce04456c41cf20
lang: zh-cn
pt: 0
client_type: web
w: qpQ8YI90jS)Uia6GY33dIIES0fDVyiHd9FQZw9tXiLbZmNjrMHQ5VBd5oJLzi1W(vrADm4z
callback: geetest_1669471683493

获取的数据：

data: {result: "click"}
result: "click"
status: "success"

get.php?is_next=true

传递下面数据

is_next: true
type: click
gt: 6216680937717fdab947ed9e71a3aaa1
challenge: 1352a9b060f5416e4fce04456c41cf20
lang: zh-cn
https: true
protocol: https://
offline: false
product: float
api_server: apiv6.geetest.com
isPC: true
autoReset: true
width: 100%
callback: geetest_1669471689746

获得如下数据：

java滑动验证码 base变色滑块验证码js逆向_开发语言_05

注意这里返回了3图片数据,这里的数据都是乱码的。

原图乱码
遮罩图乱码
滚动条小图

java滑动验证码 base变色滑块验证码js逆向_Python_06

2.1.3拖动成功抓包

ajax.php?gt=

请求数据

gt: 019924a82c70bb123aae90d483087f94
challenge: eeb750045c93cfa70baccbdba3a8dce3aa
lang: zh-cn
$_BCw: 0
client_type: web
w（环境校验、轨迹）: 0oWm8yh9ZzJCU
callback: geetest_1669472577308

返回数据

message:"success"
score:"3"
success:1
validate:"466f55adcf14596f1516b6ac2e271386"

目前需要解决的问题：

这里的w值是加密的，如何破解加密。
滑动的轨迹如何生成，如何识别到缺口的位置。
乱码的图片如何还原回来

三、Js代码调试

3.1图片的乱码如何还原

右键审查元素发现是canvas ，一个div容器下面有2个canvas，一个背景一个滑动条。

java滑动验证码 base变色滑块验证码js逆向_java滑动验证码 base变色_07

3.1.1什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

就是位图操作，可以理解为一个画图工具。

可以任意对每个像素点进行任意操作

之前讲解有一种断点类型叫做事件监听断点，里面可以对canvas进行监听

Canvas
Create canvas context 创建事件
WebGL Error Fired
WebGL Warning Fired

都选创建事件断点后，再刷页面

java滑动验证码 base变色滑块验证码js逆向_javascript_08

断在这个地方：

java滑动验证码 base变色滑块验证码js逆向_ecmascript_09

这里的代码用了流程平坦化打乱了

3.1.2流程平坦化

for里面有个switch一般：流程平坦化

function XX(x){
	return x+2;
}
var a= 1;
a=XX(a);
a=a-1;

流程平坦化:不改变代码原执行流程，但是改变了源代码书写流程。

function XX(x){
	return x+2;
}
(function (){
	var listA = [0,1]
    var a= 1;
	for (i=0; i<listA.size(); i++)
	{
        switch(listA[i]){
        case 0:
            a=XX(a);
        case 1:
            a=a-1;
        }
    }
})();

3.1.4还原乱码图片

在这里我们可以通过数组去破解这个流程但是这里的数组非常大：

java滑动验证码 base变色滑块验证码js逆向_开发语言_10

所以最好是通过断点调试。

这个函数是用来还原的，

单步调试到这里可以看到再画图：

java滑动验证码 base变色滑块验证码js逆向_ecmascript_11

这行语句又创建了一个东西

java滑动验证码 base变色滑块验证码js逆向_javascript_12

说明第一个case里面已经渲染完成了。

通过在这里代码可以猜测，这个图片有52个部分。

java滑动验证码 base变色滑块验证码js逆向_java滑动验证码 base变色_13

这段代码就会针对于每一块做渲染但是顺序打乱了。

可以分析出它是分为上下2个部分绘制出来的。

java滑动验证码 base变色滑块验证码js逆向_开发语言_14

// 特征码
var c = Ut[_] % 26 * 12 + 1
// 对应关系 还原的顺序
JSON.stringify(Ut)
[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]

java滑动验证码 base变色滑块验证码js逆向_javascript_15