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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
js校验开始时间和结束时间
May 26 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
微信小程序获取公众号文章列表及显示文章的示例代码
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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js获取变量
2006/08/24 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python简单分割文件的方法
2015/07/30 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
wxpython绘制音频效果
2019/11/18 Python
python 字典访问的三种方法小结
2019/12/05 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
会计专业自我鉴定
2014/02/10 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL