js hook

目錄

• Hook定義
• Hook 步驟
• Hook 插件：油猴腳本
• 原型鏈 hook

Hook定義

Hook 技術又叫做鈎子函數，在系統沒有調用該函數之前，鈎子程序就先捕獲該消息，鈎子函數先得到控制權

這時鈎子函數既可以加工處理（改變）該函數的執行行為，還可以強制結束消息的傳遞

簡單來說，就是把系統的程序拉出來變成我們自己執行代碼片段。

在 js 中，系統程序可以指瀏覽器API，也可以指代碼中實現的一些方法等

Hook 步驟

1、尋找 hook 點

2、編寫 hook 邏輯

3、調試

函數 hook 公式：

old_func = func
func = function(argument){
	my task;
	return old_func .apply(argument)
}
func.prototype..... = .......

func ：要hook的函數

對象中屬性 hook 公式：

old_attr = obj.attr
Object.defineProperty(obj, 'attr', {
        get: function() {
            console.log(cookie_cache);
            return old_attr 
	},
        set: function(val) {
		 return  ......
}

hook cookie

Object.defineProperty(document, 'cookie', {
        get: function(){
        debugger;
        return;
    },
        set: function(val){
        debugger;
        return;
    }
})

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

在 Network 請求列表后面回溯，找到請求的位置 request

Object.defineProperty(document, 'cookie', {
        set: function(cookie){
            if (cookie.indexOf('RM4hZBv0dDon443M') != -1){
                debugger;
            }
        	return cookie;
    	}
})

頁面一刷新，注入代碼就會失效，可以在刷新之前找個斷點斷住，然后注入代碼

成功 hook 住之后，按 F8 往后走，發現 cookie 生成的時候，這個時候在調用棧里回溯到上一層

然后再具體找到 cookie 生成的地方

hook eval

eval_bk = eval
eval = function(val){
    debugger;
    return eval_bk(val)
}
eval.toString = function(){
    return "function eval() { [native code] }"
}

js hook目的是找到函數入口以及一些參數變化，便於分析js邏輯

Hook 插件：油猴腳本

Tampermonkey

// ==UserScript==
// @name         Hook global
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       悅來客棧的老板+妄為寫代碼+萌木蓋
// @include      *
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    //全局變量 監控
    var t = window._t;
    var window_flag = '_t';
    var window_value = window[window_flag];
    Object.defineProperty(window, window_flag, {
        get: function() {
            console.log('Getting window._t',window_value);
            return t;
        },
        set: function(val) {
            console.log('Setting window._t', val);
            debugger;
            t = val;
            return t;
        }
    });
})();

hook的關鍵代碼：@run-at document-start 意思為腳本將盡快注入。

還一個主要函數是defineProperty他監控函數值，set該值和get該值都會調用這里面的兩個方法。

此腳本是針對一號店的登錄頁面，其他網站需根據想監控的數據改對象名和變量值

原型鏈 hook

String.prototype.split_bk = String.prototype.split;
String.prototype.split = function(val){
    str = this.toString()
    debugger;
    return str.split_bk(val)
}
邏輯正常需要返回 split_bk

XMLHttpRequest.protorype.setRequestHeader = function(){
    degugger;
}
a = new XMLHttpRequest()
a.setRequestHeader