从零破解一款轻量级滑动验证码

})

results.push({

left,

diff: compareRes.differences

})

left += 1

}

最后，把 results 扔到里面展示一下（这里给个 ECharts 折线图示例网址），不出意外能得到这样一张图表。看到那个尖尖的“V”型山谷了嘛，呼哈哈哈，答案很明显，当我们把滑块从左往右移动时，滑块约接近缺口，那截出来的图片就越像原图，它两之间像素差异越小；一直往右移动，滑块会逐渐远离缺口，截出来的图片和原图相比像素差异又逐渐开始增大。我们只需要把差异最小的那个点找到，然后滑动滑块到对应的 left 偏移量就阔以了。题外话，为什么最大的差异在 3000 左右呢？我们简单估算一下。滑块的大小为 45*45，再加上外面的圆形，约摸占了 2100 像素；也就是说缺口加滑块，理论上最大会有 4200 个像素和原图不同。不过滑块可能和遮住的地方像素有重合，假设重合了 350 像素，再加上我们的最低点的图片差异都有 351，减去这些误差，得 3499。呜呼，3499 约等于 3000，估算成功（手动狗头）。

速度优化技巧

不过这还没完，你要是把代码跑起来就会发现，卧草，太慢了这玩意儿！正常人划一下验证码顶多两秒钟的事儿，我们一帧一帧截图得花个 40s 的时间才能截完图算出山谷谷底的值来。这里提供几种思路优化效率：

1. 把元素缩小，复制多份，平铺开来展示；这样只要截一次，然后再裁剪、比对就好。

2. 放大步长，比方说先每次平移 15px，找到局部最优解，然后在局部最优解附近再回到平移 1px 的方案找最优解。

3. 因为图片比对的结果类似“V”字，“V”字右半边其实是可以不用再计算的。

使用 1+2+3 我觉得可以在 3s 内搞定最优解，不过代码复杂度会变得很高，文中简单起见暂只实现一下方案 2。首先是每次移动 15px 找局部最优解。

// 图片缺口是不会给挖在初始附近的，

// 所以 left 从 45 像素开始计算可以节约不少计算量，

let left = 45;

const max15Offset = 265;

const res15px = [];

while (left <= max15Offset) {

await setLeft(left);

const compareRes = await compare();

res15px.push({

left,

diff: compareRes.differences,

});

left += 15;

}

然后再尝试每次移动 2px 找最优解，搜寻的范围是 15px 步长最优解的 left 偏移量的左右共 20 个像素。

const min15pxDiff = Math.min(…res15px.map((x) => x.diff));

const min15pxLeft = res15px.find((x) => x.diff === min15pxDiff).left;

left = min15pxLeft - 12;

const max2Offset = min15pxLeft + 8;

const res2px = [];

while (left <= max2Offset) {

await setLeft(left);

const compareRes = await compare();

res2px.push({

left,

diff: compareRes.differences,

});

left += 2;

}

此时得到的解可以约等于最优解了。当然，如果你觉得不稳的话，还可以使用 1px 步长去找。估算一下，原先需要截 245 次图片，现在直接降到 1/10，23 次。不过，也别太高兴，因为测试发现只做优化 2，解验证码的时候还是要 7s…

操作鼠标滑滑块

缺口位置都搞定了，那移鼠标滑滑块儿还不简单嘛~Puppeteer 已经提供了鼠标相关的接口，一共四个：mouse.click、mouse.down、mouse.move、mouse.up，分别是点击、按下、移动和松开。使用 mouse.move 可以直接把鼠标位置移动到一个特定的坐标上。假设我们现在从坐标（100,100）花大约 1s 把鼠标移动到 （200,200），可以使用循环实现。

const now = {

x: 100,

y: 100

}

const target = {

time: 1000,

x: 200,

y: 200,

}

const steps = 10

const step = {

x: Math.floor((target.x - now.x) / steps),

y: Math.floor((target.y - now.y) / steps),

time: target.time / steps

}

while (now.x < target.x) {

await sleep(step.time)

now.x += step.x

now.y += step.y

await page.mouse.move(now)

}

鼠标轨迹优化

害，要是打游戏的时候也像这段代码一样，我想我的手点到哪儿它就点到哪儿就好了~机器是不会手抖的，这段代码和真实世界的滑动效果相差太远了！我们看一张我用手滑的效果，尤其是要仔细观察滑动过程中鼠标的位置。

• 鼠标 Y 轴位置总是在变

• 鼠标 X 轴位置会滑过头（别笑，你肯定也经常划过头）

这里做一波小优化，把这两个细节整合进去。

// 获得一个随机的偏移量

const getRandOffset = (randNegative = true, max = 3) => {

const negative = randNeagtive

? (Math.random() < 0.5) ? -1 : 1

: 1

return Math.floor(Math.random() * max) * negative

}

// 先滑过头十几像素，然后再花 100 毫秒的时间往回滑到正确位置

const points = [

{

time: 1000,

x: 200 + getRandOffset(false, 15),

y: 200 + getRandOffset(false, 15),

steps: 10

},

{

time: 100,

x: 200,

y: 200,

steps: 3

}

]

// 注意这里用 for await 循环把 points 串起来执行

for await (const target of points) {

const step = {

x: Math.floor((target.x - now.x) / target.steps),

y: Math.floor((target.y - now.y) / target.steps),

time: target.time / target.steps,

}

let gap

while (gap = Math.abs((target.x - now.x)), gap > 0) {

await sleep(step.time)

// 最后一步就直接滑动到位，不需要随机数了

const inOneStep = Math.abs(target.x - now.x) <= Math.abs(step.x);

if (inOneStep) {

now.x = target.x;

now.y = target.y;

} else {

now.x += step.x + getRandOffset();

now.y += step.y + getRandOffset();

}

moveMouseTo(now)

}

}

如何移动鼠标到这里就解决了，如果要考虑加速度、用户习惯等因素，代码会复杂许多，暂时就不深入讨论啦，有兴趣的同学可以自己研究。最终效果见下图。源码地址在此：CrackTheShield。

阅读更多

---