当前位置: 首页>后端>正文

滑块验证demo 滑块验证的种类

一:介绍

一些网站为了区分人机行为,在网站的一些操作上添加验证码机制,来实现反爬虫。

目前比较常见的验证码类型有:

  1:传统式验证码

  • 主要通过用户输入图片中的字母,数字,汉字等来验证。
  • 特点:简单易操作,人机交互性较好,但安全系数比较低。
  • 目前通过机器学习技术对传统验证码的识别率已经可以达到90%以上。

  2:行为式验证码

  • 行为式验证码是一种较为流行的验证码。从字面来理解,就是通过用户的操作行为来完成验证,而无需去读懂扭曲的图片文字。常见的有两种:拖动式与点触式。
  • 特点:操作简单,体验好,但容易被逆向模拟
  • 代表:极验验证码

  3:图标选择与行为辅助

  • 给出一组图片,按要求点击其中一张或者多张。借用万物识别的难度阻挡机器。
  • 特点:安全性强。对于图片、图库、技术要求高。
  • 代表:12306验证码

 

二:分析

目前博客园采用的就是极验的验证码

推荐使用Chrome浏览器进行研究

  1:初步了解

  进入博客园的登陆界面:

  输入账号密码以后点击登陆

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_滑块验证demo,第1张

  这就是极验的滑块验证码,最开始显示的是一幅完整的图片,当鼠标按住滑块时

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_验证码_02,第2张

  出现缺口位置,需要通过鼠标滑动到缺口位置,释放鼠标完成验证

  2:抓包分析

  可以猜想到,图片是从网络读取过来的,我们打开开发者工具(F12)进行抓包

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_ajax_03,第3张

  点击刷新按钮,再加载一张新的验证码图片

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_开发者工具_04,第4张

  抓到了4个数据包,第一个是js文件,后面三个是图片文件(webp格式不了解的可以去查一下)

  我们首先点开这个js文件,切换到Preview视图中

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_验证码_05,第5张

  可以看出这是js的一个回调函数,参数中有几个url,逐个复制到浏览器中打开,可以发现应该是验证码图片

  打开后面几个数据包可以查看到相同结果

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_开发者工具_06,第6张

  但是我们又发现这图片并不是在浏览器上看到的一样,被打乱了,应该是在加载以后在浏览器中进行还原的

  我们点击开发者工具中的选择元素按钮(快捷键Ctrl+Shift+C)

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_开发者工具_07,第7张

  将鼠标放到图片验证码上单击

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_开发者工具_08,第8张

  

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_验证码_09,第9张

  开发者工具锁定到了对应的元素位置,我们发现是一个canvas元素,可以猜想到,应该是通过js计算之后画到浏览器上面的

  (在早期的极验版本中,验证码使用的是无数个div块进行拼接,网上文章也很多,本文不再讲解)

  3:js代码分析

  进行代码分析的第一步就是需要定位到核心代码位置,再进行分析

  我在定位代码时候尝试了两种方法

  • ajax断点
  • 事件监听断点

  下面将这两种方法都说一下

    (1):ajax断点

      很多网站都是通过ajax异步加载服务器的数据用来提高用户的体验

      我们也可以通过ajax断点来中断到发送请求的地方

      选择开发者工具的Sources视图

    

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_开发者工具_10,第10张

    在右侧的xhr/fetch breakpoints 中点击+号

    

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_验证码_11,第11张

    回车,即下了一个断点

     

滑块验证demo 滑块验证的种类,滑块验证demo 滑块验证的种类_ajax_12,第12张

    现在要触发这个断点,我们进行刷新验证码

    我们发现,代码并没有断下,网站可能不是通过这种方式加载代码的

    接下来尝试进行事件监听断点


https://www.xamrdz.com/backend/3wz1926465.html

相关文章: