EAMS 滑动拼图验证码破解原理
验证码机制
EAMS 使用的是 AJ-Captcha 风格的滑动拼图验证码：
- 服务端返回两张 Base64 图片：
- 背景图（380×170，有缺口）
- 拼图块（60×170，RGBA 带透明通道）
- 用户需要把拼图块水平滑动到缺口位置
- 服务端验证
point.x坐标是否正确
核心算法：拼图轮廓模板匹配 + 像素差异
我用纯 JS（无任何图像库依赖）实现了 PNG 解码和缺口定位，关键分两步：
策略 A — 轮廓模板匹配（权重 60%）
- 从拼图块的 alpha 通道提取出拼图的不规则边界轮廓
（左边界和右边界每行的 x 坐标） - 对背景图计算边缘图（相邻像素灰度差）
- 将拼图轮廓当作“模板”，在背景图上水平滑动
- 对每个候选偏移量，累加背景边缘图上对应轮廓位置的边缘强度
- 边缘强度最高的偏移量就是缺口位置
→ 因为缺口的边缘恰好吻合拼图块的锯齿形状
策略 B — 像素差异（权重 40%）
- 对每个候选偏移量，计算拼图块 RGB 与背景图对应区域 RGB 的均方差（SSD）
- 缺口区域的背景被服务端做了暗化 / 模糊处理
- 因此差异最大的位置就是缺口
最终定位
综合得分 = normalize(轮廓分) × 0.6 + normalize(差异分) × 0.4
- 取综合得分最高的偏移量
- 经过平滑后作为
point.x提交
为什么前两版失败了
| 版本 | 方法 | 失败原因 |
|---|---|---|
| v1 | 按列累加边缘能量 | 自然图像中的纹理边缘远强于缺口边缘，被噪声淹没 |
| v2 | 多策略边缘连续性 + 成对边缘检测 | 同样被自然边缘干扰，没有利用拼图形状信息 |
| v3 ✅ | 用拼图自身的不规则轮廓作为模板去匹配背景边缘 | 只有缺口位置的边缘能精确吻合拼图的锯齿形状，天然抗噪声 |
关键洞察
拼图块的 alpha 通道本身就是最好的“钥匙”——
它精确定义了缺口的不规则形状。
用这个形状去背景图上找匹配，比任何通用边缘检测都更准确。
实测效果
- 首次尝试成功率约：50% - 70%
- 配合最多 3 次重试：基本能稳定通过