Js逆向实现滑动验证码图片还原的示例代码


Posted in Javascript onMarch 10, 2020

本文列举两个例子:某象和某验的滑动验证

一、某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s

未还原图像:

Js逆向实现滑动验证码图片还原的示例代码

还原后的图:

Js逆向实现滑动验证码图片还原的示例代码

从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作。所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作。

如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的

Js逆向实现滑动验证码图片还原的示例代码

那你应该会想到,那段js中会生成canvas,然后使用它下面的一些方法,实现图片的还原操作,所以我们需要知道他啥时候生成canvas,找到位置,然后慢慢往下调试,找到还原代码。

这时我们就需要使用油猴插件,进行hook了。如果对油猴不了解的同学,可以谷歌百度下,学习下,这是非常有用的,代码如下:

// ==UserScript==
// @name     hook createElement
// @namespace  http://tampermonkey.net/
// @version   0.1
// @description try to take over the world!
// @author    朱宇
// @match    *://*/*
// @grant    none
// ==/UserScript==

(function() {
  'use strict';

  // Your code here...
  let _createElement = document.createElement.bind(document);

  document.createElement = function (elm) {
    console.log("createElement:",elm);
    if (elm === "canvas") {
      // debugger;
    }
    return _createElement(elm);
  }
})();

我们现在来看看效果,刷新页面:

Js逆向实现滑动验证码图片还原的示例代码

那我们就可以能快速定位到创建canvas的位置了,

Js逆向实现滑动验证码图片还原的示例代码

下面就是慢慢分析代码了,具体就不多说了

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码

这个例子主要就是对油猴插件(hook)的使用吧。

二、某象:aHR0cDovL2Nkbi5kaW5neGlhbmctaW5jLmNvbS9jdHUtZ3JvdXAvY2FwdGNoYS11aS9kZW1vLw==

同样的验证码图片还原也是使用canvas生成的,如果使用上面的方式的话,没啥效果的

Js逆向实现滑动验证码图片还原的示例代码

但是通过search关键字canvas还是能过发现一些猫腻的。

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码

好了,两个例子就是这样了,具体还原代码,有兴趣自己去实现吧。

到此这篇关于Js逆向实现滑动验证码图片还原的示例代码的文章就介绍到这了,更多相关Js逆向滑动验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
js模糊查询实例分享
Dec 26 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
mysql 字段类型说明
2007/04/27 PHP
PHP基础知识介绍
2013/09/17 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
详解react-router如何实现按需加载
2017/06/15 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
会计电算化专业求职信
2014/06/10 职场文书
博士生求职信
2014/07/06 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
礼仪培训心得体会
2016/01/22 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript