1.什么是hook

替换原有方法的这种处理方式我们就叫hook

2.hook的三种方式

2-1 覆盖原方法

// hook示例1
function hello(){
    console.log("1111");
    }

// 不修改hello中的代码的情况下，调用hello()输出2222

hello = function(){
    console.log("2222")
    }

// hook示例2：
// 替换js内部的alert使其，在调用alert的时候，不再弹出警示框, 而是在控制台输出hello world
var origin_alert = window.alert
window.alert = function(){
    return "hello"}
alert()  // 控制台输出"hello"

123456789101112131415161718

2-2 Object.defineProperty()

通过Object.defineProperty()添加或者替换一个对象的属性，属性里面可能存的是一个方法，也可能就是一个值

// 案例1：
var a = "";
var b = {};
Object.defineProperty(b, "c", {    //　注意这里使用的必须带引号的属性名，不能直接写c
        set:function(newValue){    // 这其实和python中的描述符是一个意思
            a = newValue;
            alert("setvalue");
            },
        get:function(){
            alert("get value");
            return a;
            }
        }
    )

b.c= 20  // 在浏览器中执行此行代码的时候，会弹出setvalue的警示框
b.c  // 20， 因为b已经被设置了属性
a  // 20 ,因为在set方法中我们把newValue的值赋值给了a
// 案例2：当前端设置cookie时，利用hook技术在浏览器的控制台上打印出前端设置的cookie值
!function(){
    Object.defineProperty(document, "cookie", {
        set:function(newValue){
            alert(newValue);
            return newValue;
            }
        })
}()  //这断代码不能直接在浏览器控制台进行执行，因为一旦刷新网页,那么hook注入的代码就会失效

1234567891011121314151617181920212223242526272829

3.hook使用的注意事项：

• 在浏览器控制台注入的hook代码，在刷新网页的时候就会失效
• 解决办法：
  1.在网页加载第一个js的时候在js文件的第一行加上断点，这时候除了网页源代码上的js之外 ，大部分的js文件还没有执行，因此这时候浏览器控制台，进行hook注入，捕获cookie的设置就可以了。但是这种方法只能捕获一部分cookie的设置，因为网页上也会有js，也可能会设置cookie值。要想捕获所有的cookie，就需要第二种方法
  2.使用fd进行hook注入js代码，因为fd是一个代理，所有的数据都会在fd中经过，我们在这里hook住所有的cookie的设置。
  3.ES6中的 new Proxy，更推荐使用第二种方法。

// 当js代码设置cookie时自动打印到浏览器的控制台上
!function(){
        var aaa = "";
        Object.defineProperty(document, "cookie", {
            set:function(val){
                console.log(val);
                aaa = val;
                return val;
                },
            get:function(){
                return aaa;
                }
            });
 }()

123456789101112131415

4.小知识点之debugger

• debugger的作用:在浏览器代码执行下述代码的时候，会在debugger处打上断点

    !function(){
        console.log("hello world");
        debugger;
        console.log("hello world1");
        }()

123456

• console.clear():可以清空控制台
• window.navigator这个对象中包含关于浏览器的信息

window.navigator.appName // 获取浏览器的名称，chrome的到的是Netscape(网景)
window.navigator.userAgent // 获取UA

• document.cookie = “key=value”:前端可以通过这行代码设置当前网站的cookie，许多前端设置的加密cookie都是通过这种方式设置的。
• Object(需要调用的函数名fun)(参数a)用法代表：fun(a)