照片由 James Pond 发布于 Unsplash
同一话题的下一故事 - 如何使用 JS 对 GeeTest“滑块验证码”进行解算
对于网站所有者而言，垃圾信息一直是一个大问题。另一方面，验证码也会让人头大，因为其会对用户影响造成负面影响。
看到验证码我就烦。相信大家都一样。验证用户身份的方法有很多种，但每一种方法都不是太行。
近年来，机器人的“智商”也在提高，网站所有者很难确保网站内容不会受到机器人的侵扰。只要有足够的时间和资源，我们几乎可以绕过一切验证码。我们可以使用 Puppeteer 插件来解算 reCAPTCHA。我们可以寻求提供验证码解算服务的公司的帮助。如：2Captcha。您可在这里了解如何使用 Puppeteer 和 2Captcha 服务。
目前还有一些网站采用了“滑动验证”的验证码。那么，为什么会有人会选择如此简单的验证方式呢？
其背后的原因是：
- 大部分机器人不会执行 JS，此方式可阻止此类机器人
- 滑动验证是一种对于用户比较友好的方式
- 对于移动端用户而言，滑动也是非常自然的操作方式
所以对于真人用户，滑动验证码算是比较优秀和简单的验证方式了。但在更加智能的机器人看来，对这种方式进行解算也不是什么难事。
下面我们就来试着绕过一些滑动验证码。
滑动提交
“滑动提交”表单 jQuery 插件。这是可用于预防表单垃圾信息的一种验证方式。
首先我们现填写输入字段。为了滑动滑块，我们需要：
- 将鼠标放在滑块中心
- 按下鼠标
- 移动鼠标
- 松开鼠标
大功告成。简简单单。
Dipbit 注册滑块****
Dipbit 是一家数字货币交易所的网站。其登录和注册页面上都使用了“滑动验证”元素。
Dipbit 在其验证方式中采用了更机智的方法，所以这里我们需要添加一段代码来隐藏 Puppeteer 的执行工作。
淘宝****
淘宝是阿里巴巴旗下的网上购物网站。其采用了与注册 Dipbit 时类似的滑块验证方式。唯一的区别是其注册表单被放在了 iframe 内部。对 Puppeteer 而言，这并不是什么问题。
拼图式的滑动验证码****
我也遇到过一种需要进行“滑动验证”的 Vue 组件。对于真人用户来说，这种方式可能非常简单，但对于机器人而言其难度就上去了。
这种验证方式会首先获取图像，然后创建 2 个画布与 1 个滑块。同时采用拼图的方式来对最初的图像进行渲染。用户将需要通过移动滑块来填充缺失的那一块拼，并在拼图位置正确时放开鼠标，此时即可完成验证。
这种验证码会采用随机的拼图位置来迷惑机器人。
这里我其实并不想采取什么特别黑科技的方法（比如：机器学习或者 OCR），所以我选择了一点一点移动滑块，然后将结果图像与初始图像进行对比。
图像对比方面，我使用的是 rembrandt.js 库。移动鼠标，并在找到了结果图像与初始图像差异最轻微的拼图位置时松开鼠标。
还有一个值得一提的地方。这里我对滑块在 Y 轴上的移动方式进行了随机化，用于模拟真实用户的鼠标移动😎
所有代码示例都可在 github repo 中查看，欢迎随意复制粘贴。
结论****
验证码总是让人两难：网站是应该提供更好的体验和更简单验证方式，还是积极保护自身免受机器人侵扰而降低用户体验？
网站和机器人之间的战争永不停歇。无论网站采用何种验证方式，总是会有人能想出绕过验证码的方式——这只是时间问题而已。
在此声明，本文中的内容只是出于交流目的，请各位以负责任的方式使用 Puppeteer。
同一话题的下一故事 - 如何使用 JS 对 GeeTest“滑块验证码”进行解算
感谢阅读！如果您喜欢本文，请给我们多点几个赞 👏 。*
*如果您有任何疑问，也可在下方留下评论，或是在 Twitter **上和我们打个招呼。
