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

 更新时间:2020年03月10日 16:38:17   作者:朱春雨  
这篇文章主要介绍了Js逆向实现滑动验证码图片还原的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

一、某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s

未还原图像:

还原后的图:

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

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

那你应该会想到,那段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);
  }
})();

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

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

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

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

二、某象:aHR0cDovL2Nkbi5kaW5neGlhbmctaW5jLmNvbS9jdHUtZ3JvdXAvY2FwdGNoYS11aS9kZW1vLw==

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

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

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

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

相关文章

  • Javascript多种浏览器兼容写法分析

    Javascript多种浏览器兼容写法分析

    随着以Firefox为代表的第三方浏览器的兴起,我们做的网站也不能再JUST IE了,如果把原来的一些javascript代码放到IE以外的浏览器的话,往往都不能正常运行或出错,所以这里介绍一下怎么改进我们的JS,让它能更加规范,更加具有兼容性。
    2008-09-09
  • JS尾递归的实现方法及代码优化技巧

    JS尾递归的实现方法及代码优化技巧

    这篇文章主要介绍了JS尾递归的实现方法及代码优化技巧,结合实例形式分析了尾递归的原理、JS实现方法及优化技巧,需要的朋友可以参考下
    2019-01-01
  • 原生态js,鼠标按下后,经过了那些单元格的简单实例

    原生态js,鼠标按下后,经过了那些单元格的简单实例

    下面小编就为大家带来一篇原生态js,鼠标按下后,经过了那些单元格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js中document.getElementById(id)的具体用法

    js中document.getElementById(id)的具体用法

    本文主要介绍了js中document.getElementById(id)的具体用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 一篇文章带你浅入webpack的DLL优化打包

    一篇文章带你浅入webpack的DLL优化打包

    这篇文章主要介绍了一篇文章带你浅入webpack的DLL优化打包,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript实现的拼图算法分析

    JavaScript实现的拼图算法分析

    这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下
    2019-02-02
  • HTML中的setCapture和releaseCapture使用介绍

    HTML中的setCapture和releaseCapture使用介绍

    setCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去,由 document、window、object之类的自行来处理。这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰
    2012-03-03
  • js return返回多个值,通过对象的属性访问方法

    js return返回多个值,通过对象的属性访问方法

    下面小编就为大家带来一篇js return返回多个值,通过对象的属性访问方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS控制鼠标拒绝点击某一按钮的实例

    JS控制鼠标拒绝点击某一按钮的实例

    下面小编就为大家分享一篇JS控制鼠标拒绝点击某一按钮的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js二级地域选择的实现方法

    js二级地域选择的实现方法

    js二级地域选择的实现方法,需要的朋友可以参考一下
    2013-06-06

最新评论