Js逆向實現(xiàn)滑動驗證碼圖片還原的示例代碼

更新時間：2020年03月10日 16:38:17 作者：朱春雨

這篇文章主要介紹了Js逆向實現(xiàn)滑動驗證碼圖片還原的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文列舉兩個例子：某象和某驗的滑動驗證

一、某驗：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s

未還原圖像:

還原后的圖:

從服務端請求來的圖片是打亂后的，給用戶看的時候是完整的，這個過程肯定是運行了某段js代碼，將打亂的圖片進行還原操作。所以我們需要找到這段js，然后還原它的代碼邏輯，實現(xiàn)圖片的還原操作，找到缺口距離，實現(xiàn)滑動操作。

如果你仔細觀察的話，你會發(fā)現(xiàn)還原后的圖它是canvas生成出來的

那你應該會想到，那段js中會生成canvas，然后使用它下面的一些方法，實現(xiàn)圖片的還原操作，所以我們需要知道他啥時候生成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);
  }
})();

我們現(xiàn)在來看看效果，刷新頁面: