某项字体识别乱序图片webp还原

声明

本文章中所有内容，仅提供思路，不提供源码。
本文章仅供学习交流使用，不得用于其他任何目的，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！

网址： aHR0cHM6Ly93d3cuZGluZ3hpYW5nLWluYy5jb20vYnVzaW5lc3MvY2FwdGNoYQ==

网站截图如下

点击“立即点击验证”，弹出验证码如下（要求是找到字体风格不一样的一个图标，即右下角最后一个）：

但是，后端返回的验证码图片确实乱序的， 如下：

还原验证码图片，有几点需要考虑：

1、还原的方向

从乱序图片来看，该网站只需要将乱序图片水平方向切分，然后拼接即可

2、还原的顺序

还原顺序往往会放在一个数组中。但是需要注意，这个数组是固定的，还是每次都变化的。

经过简单几次更新验证码图片，发现，拼接顺序并不是固定的。也就是说需要先找到还原顺序的数组。

2.1 打开开发者模式，勾选画布， 如下

2.2 点击刷新验证码，断点如下

发现一个数组 t， 其内容是乱序的 0-31；这就是要找的那个数组（不放心的话，可以先拷贝下来，本地试试能不能将乱序的图片还原）。

经过几次调试，发现 t 是动态变化的。下面需要看看 t 是如何生成的

2.3 跟踪堆栈，发现 E

2.4 往上找，看看 E 是如何生成的

2.5 如上图，E 是对象 n 中 ranges 的值。全局搜索 ranges ，看哪里有赋值的地方。搜到如下 5 个地方。

2.6 分别点进去看看，发现标识的地方，非常有可能。源码如下

2.7 发现 an 就是那个数组，单步调试，进入方法内部

2.8 发现

• 参数 n 就是乱序图片的 id（图片 url 中后面的地方）

• 返回值 r 就是目标数组（这里刷新调试过几次，所以 id 和 数组内容跟最初图片不匹配，这个不重要）

因此，判定这里就是生成数组的地方，且知道了排序情况跟图片 id 有关。下面直接抠代码即可（索性没有其他混淆和加密，比较简单的几个方法都抠出来就行了）

2.9 还原数组的代码如下