【JS 逆向學習】【筆記】03-油猴插件tampermonkey、常用hook腳本 聲明 插件安裝 hook實例 更多插件腳本參考

本文用於接收油猴插件，收錄常見的hook腳本

聲明

本文章內容僅供學習交流，抓包內容、敏感網址、數據接口均已做脫敏處理，嚴禁用於商業用途和非法用途，否則由此產生的一切後果均與作者無關，若有侵權，請聯繫我立即刪除！

---

插件安裝

方法1：將下載下來的壓縮包解壓出來，其中類型爲CRX文件就是接下來需要用到的安裝文件。

打開瀏覽器設置，打開擴展程序頁面，或者直接搜索Chrome://extensions/進入。然後保持頁面開發者模式的開啓。找到被解壓後的tampermonkey.crx文件，將其拖動到擴展程序頁面，釋放並同意完成安裝。

方法2：直接百度手動搜索進入Tampermonkey官網。

點擊下載，並安裝

hook實例

下面介紹常用腳本，或下載常用腳本

實例1:hook cookie

chrome->工具欄->油猴圖標->管理面板->新建腳本

進入管理面板

編寫hook代碼，並保存

// ==UserScript==
// @name         Cookie Hook for aqy __dfp
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  愛奇藝Hook-Cookie 腳本示例
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
  'use strict';
  var cookieTemp = '';
  Object.defineProperty(document, 'cookie', {
    set: function (val) {
      if (val.indexOf('__dfp') != -1) {
        debugger;
      }
      console.log('Hook捕獲到cookie設置->', val);
      cookieTemp = val;
      return val;
    },
    get: function () {
      return cookieTemp;
    },
  });
})();

保持腳本

啓用腳本

在chrome訪問網頁
成功hook到cookie,會自動產生斷點，也打印出信息

實例2:hook localStorage.getItem("某某參數");

// ==UserScript==
// @name         Hook localStorage.getItem
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  localStorage.getItem腳本示例  localStorage.getItem("某某參數");
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    var tmp_getItem = localStorage.getItem;
    localStorage.getItem = function(params) {
        console.log("Hook localStorage.getItem ——> ", params);
        debugger;
        return tmp_getItem(params);
    }
})();

實例3:hook URL open = function (method, url, async);

用於定位請求 URL 中關鍵參數生成位置，以下代碼演示了當請求的 URL 裏包含 "videoTopResource"關鍵字時，則插入斷點：

// ==UserScript==
// @name         Hook URL
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  用於定位請求 URL 中關鍵參數生成位置;
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    var open = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (method, url, async) {
        if (url.indexOf("videoTopResource") != -1) { //url中包含videoTopResource
            debugger;
        }
        return open.apply(this, arguments);
    };
})();

實例4:hook setRequestHeader(key, value);

(function () {
    var org = window.XMLHttpRequest.prototype.setRequestHeader;
    window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
        debugger;
        if (key == 'Accept') {
            debugger;
        }
        return org.apply(this, arguments);
    };
})();

實例5：Hook JSON.stringify(params)

JSON.stringify() 方法用於將 JavaScript 值轉換爲 JSON 字符串，在某些站點的加密過程中可能會遇到，以下代碼演示了遇到 JSON.stringify() 時，則插入斷點：

(function() {
    var stringify = JSON.stringify;
    JSON.stringify = function(params) {
        console.log("Hook JSON.stringify ——> ", params);
        debugger;
        return stringify(params);
    }
})();

實例6：Hook JSON.parse(params)將一個 JSON 字符串轉換爲對象

JSON.parse() 方法用於將一個 JSON 字符串轉換爲對象，在某些站點的加密過程中可能會遇到，以下代碼演示了遇到 JSON.parse() 時，則插入斷點：

(function() {
    var parse = JSON.parse;
    JSON.parse = function(params) {
        console.log("Hook JSON.parse ——> ", params);
        debugger;
        return parse(params);
    }
})();

實例7：Hook eval(src)動態執行 JS

JavaScript eval() 函數的作用是計算 JavaScript 字符串，並把它作爲腳本代碼來執行。如果參數是一個表達式，eval() 函數將執行表達式。如果參數是 Javascript 語句，eval() 將執行 Javascript 語句，經常被用來動態執行 JS。以下代碼執行後，之後所有的 eval() 操作都會在控制檯打印輸出將要執行的 JS 源碼：

// ==UserScript==
// @name         Hook eval() 操作都會在控制檯打印輸出將要執行的 JS 源碼
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hook eval() 操作都會在控制檯打印輸出將要執行的 JS 源碼;
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    // 保存原始方法
    window.__cr_eval = window.eval;
    // 重寫 eval
    var myeval = function(src) {
        console.log(src);
        console.log("=============== eval end ===============");
        debugger;
        return window.__cr_eval(src);
    }
    // 屏蔽 JS 中對原生函數 native 屬性的檢測
    var _myeval = myeval.bind(null);
    _myeval.toString = window.__cr_eval.toString;
    Object.defineProperty(window, 'eval', {
        value: _myeval
    });
})();

實例8：Hook window.Function所有的函數操作都會在控制檯打印輸出將要執行的 JS 源碼

// ==UserScript==
// @name         Hook window.Function
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hook window.Function
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==
(function() {
    // 保存原始方法
    window.__cr_fun = window.Function;
    // 重寫 function
    var myfun = function() {
        var args = Array.prototype.slice.call(arguments, 0, -1).join(","),
            src = arguments[arguments.length - 1];
        console.log(src);
        console.log("=============== Function end ===============");
        debugger;
        return window.__cr_fun.apply(this, arguments);
    }
    // 屏蔽js中對原生函數native屬性的檢測
    myfun.toString = function() {
        return window.__cr_fun + ""
    }
    Object.defineProperty(window, 'Function', {
        value: myfun
    });
})();

實例9：Hook createElement查看創建了什麼元素

document下的createElement()方法的hook,查看創建了什麼元素

// ==UserScript==
// @name         Hook createElement查看創建了什麼元素
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  查看創建了什麼元素createElement
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict'
   var _createElement = document.createElement.bind(document);
   document.createElement = function(elm){
   // 這裏做判斷 是否創建了script這個元素
   debugger;
   if(elm == 'body'){
        debugger;
   }
    return _createElement(elm);
}
})();

實例10：websocket hook

// ==UserScript==
// @name         websocket hook
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  websocket hook
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

 // 1、webcoket 一般都是json數據格式傳輸，那麼發生之前需要JSON.stringify
var my_stringify = JSON.stringify;
JSON.stringify = function (params) {
    //這裏可以添加其他邏輯比如 debugger
    console.log("json_stringify params:",params);
    return my_stringify(params);
};

var my_parse = JSON.parse;
JSON.parse = function (params) {
    //這裏可以添加其他邏輯比如 debugger
    console.log("json_parse params:",params);
    return my_parse(params);
};

// 2  webScoket 綁定在windows對象，上，根據瀏覽器的不同，websokcet名字可能不一樣
//chrome window.WebSocket  firfox window.MozWebSocket;
window._WebSocket = window.WebSocket;

// hook send
window._WebSocket.prototype.send = function (data) {
    console.info("Hook WebSocket data", data);
    return this.send(data)
}

Object.defineProperty(window, "WebSocket",{value: WebSocket})

實例11：js hook ajax 進一步分析

// ==UserScript==
// @name         js hook ajax 進一步分析
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  js hook ajax 進一步分析
// @author       younghare
// @match        *
// @icon         http://wework.qpic.cn/bizmail/MRHcKwRohReU225xmwYk2qqQW6oHFzXdy105rFyic0JJgSq43QAWY2A/0
// @grant        none
// @run-at       document-start
// ==/UserScript==

//將此代碼粘貼到工具中
!function(t) {
    function n(e) {
        if (r[e]) return r[e].exports;
        var i = r[e] = {
            exports: {},
            id: e,
            loaded: !1
        };
        return t[e].call(i.exports, i, i.exports, n),
        i.loaded = !0,
        i.exports
    }
    var r = {};
    return n.m = t,
    n.c = r,
    n.p = "",
    n(0)
} ([function(t, n, r) {
    r(1)(window)
},
function(t, n) {
    t.exports = function(t) {
        var n = "RealXMLHttpRequest";
        t.hookAjax = function(t) {
            function r(n) {
                return function() {
                    var r = this.hasOwnProperty(n + "_") ? this[n + "_"] : this.xhr[n],
                    e = (t[n] || {}).getter;
                    return e && e(r, this) || r
                }
            }
            function e(n) {
                return function(r) {
                    var e = this.xhr,
                    i = this,
                    o = t[n];
                    if ("function" == typeof o) e[n] = function() {
                        t[n](i) || r.apply(e, arguments)
                    };
                    else {
                        var u = (o || {}).setter;
                        r = u && u(r, i) || r;
                        try {
                            e[n] = r
                        } catch(t) {
                            this[n + "_"] = r
                        }
                    }
                }
            }
            function i(n) {
                return function() {
                    var r = [].slice.call(arguments);
                    if (!t[n] || !t[n].call(this, r, this.xhr)) return this.xhr[n].apply(this.xhr, r)
                }
            }
            return window[n] = window[n] || XMLHttpRequest,
            XMLHttpRequest = function() {
                var t = new window[n];
                for (var o in t) {
                    var u = "";
                    try {
                        u = typeof t[o]
                    } catch(t) {}
                    "function" === u ? this[o] = i(o) : Object.defineProperty(this, o, {
                        get: r(o),
                        set: e(o),
                        enumerable: !0
                    })
                }
                this.xhr = t
            },
            window[n]
        },
        t.unHookAjax = function() {
            window[n] && (XMLHttpRequest = window[n]),
            window[n] = void 0
        },
        t.
    default = t
    }
}]);
hookAjax(
        // hook functions and callbacks of XMLHttpRequest object
        {
            onreadystatechange: function (xhr) {
                //console.log("onreadystatechange called: %O", xhr)

            },
            onload: function (xhr) {
                //console.log("onload called: %O", xhr)
                xhr.responseText = "hook" + xhr.responseText;

            },
            open: function (arg, xhr) {
                console.log("open called: method:%s,url:%s,async:%s", arg[0], arg[1], arg[2], xhr)
                arg[1] += "?hook_tag=1";
                //統一添加請求頭
            },
            send: function (arg, xhr) {
                //console.log("send called: %O", arg[0])
                xhr.setRequestHeader("_custom_header_", "ajaxhook")
            },
            setRequestHeader: function (arg, xhr) {
                //console.log("setRequestHeader called!", arg)
            },
            // hook attributes of XMLHttpRequest object
            timeout: {
                setter: function (v, xhr) {
                    //timeout shouldn't exceed 10s
                    return Math.max(v, 1000);
                }
            }
        }
    );

更多插件腳本參考

油猴腳本市場
js的hook方法和技巧
githubGist插件