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