码迷,mamicode.com
首页 > 其他好文 > 详细

极验滑块坐标识别(一)

时间:2018-05-27 16:25:07      阅读:2091      评论:0      收藏:0      [点我收藏+]

标签:进入   shift   特点   https   view   alt   回车   break   第一个   

 

 

一:介绍

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

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

  1:传统式验证码

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

  2:行为式验证码

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

  3:图标选择与行为辅助

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

 

二:分析

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

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

  1:初步了解

  进入博客园的登陆界面:https://passport.cnblogs.com/user/signin?ReturnUrl=https%3A%2F%2Fwww.cnblogs.com%2F

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

  技术分享图片

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

  技术分享图片

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

  2:抓包分析

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

  技术分享图片

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

  技术分享图片

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

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

  技术分享图片

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

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

  技术分享图片

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

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

  技术分享图片

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

  技术分享图片

  技术分享图片

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

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

  3:js代码分析

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

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

  • ajax断点
  • 事件监听断点

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

    (1):ajax断点

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

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

      选择开发者工具的Sources视图

    技术分享图片

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

    技术分享图片

    回车,即下了一个断点

     技术分享图片

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

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

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

    

下面内容请看极验滑块坐标识别(二)

极验滑块坐标识别(一)

标签:进入   shift   特点   https   view   alt   回车   break   第一个   

原文地址:https://www.cnblogs.com/windpiaoxue/p/9096276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!