Basic use of JS Hook

Preface

Hook technology is also called hook function. Its function is to pull out the website code and change it into code snippets that we want to execute. Simply put, it means that we can control the input and output parameters of the execution function;

---

1. Resource download

Programming cat plug-in: https://pan.baidu.com/s/1SP8xHoDpugssFRpu-nLxPw?pwd=zhou

2. What is Hook?

What is a hook

• js execution process, initialization (self-execution), page logic, waiting for user input, encrypted data, and submitting data;
• In any of the above steps, insert your own code and let the browser execute the inserted code first and then execute the original code of the website;
• Context = a project environment, JS context (JS v8 virtual machine), scope (the location where variables take effect) is in the context;
• From the perspective of the browser, (new page, new thread) is a new context, eval打开虚拟机运行JS代码是原来的上下文;
• The purpose of hook is to change the original code or the execution process of the original code;
• The hook timing will only affect the code operation after the hook is completed;
• To initialize the browser hook, you need to use (oil monkey [a method of monitoring data received by the browser through a browser plug-in], FD plug-in [through a proxy]) to modify the original data;

3. Several methods of Hook

Several ways to hook

• Overwrite the original method and write a new method in the same scope to assign the value to the variable object of the original method;

• ES6 syntax, Object.defineProperty(obj, prop, descriptor), is more powerful than overriding the original method; use detailed explanation;

• The function of Object.defineProperty: redefine properties for objects, monitor the setting value of the property (set method) and obtain the value (get method);

• JS Proxy monitors the entire object (property initialization, value setting, value acquisition, constructor, etc.), detailed usage explanation;

• The following is a detailed introduction to the parameters of Object.defineProperty() Object.defineProperty

• obj: the current object whose properties need to be defined;

• prop: the name of the property that currently needs to be defined;

• descriptor: attribute descriptor, which can take the following values; introduction to set method & get method

• set(), the assignment method;

• get(), the method to get the value;

4. Fiddler - Programming Cat plug-in installation

1. Unzip the downloaded compressed package;

2. Copy all the plug-in files to (default) C:\Program Files (x86)\Fiddler2\Scripts, the installation directory of fiddler; 3. For first time

use, you must right-click and start as administrator. fiddler, fiddler 版本必须 >= v4.6.3, the following is a screenshot of a successful plug-in installation;

5. Fiddler-Hook case

1. Here we take the cookie of a certain website as an example.

2. Let’s analyze the hook code.

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

Key points: if (val.indexOf('buvid3') != -1) {debugger;}, retrieve buvid3the position where it first appears in the string. -1 means it does not appear, otherwise it means it appears. If it appears, it will enter the condition for debugger;

3. Open fiddler, paste the hook code into the Programming Cat plug-in, and check to enable it. New code added will be automatically saved;
4. Clear the cookies of the browser, refresh the page of a certain site, and it will stop;

5. 注意: Yes In the call stack on the right (Call Stack), you can see the calling process of some functions. If you follow up in sequence, you can find buvid3the place where it was first generated.

6. Commonly used js hook codes

Hook Cookie

buvid3Cookie Hook is used to locate the approximate location where the key parameters in the cookie are generated. The following code demonstrates the debugger when the keyword is matched in the cookie ;

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

Hook Header

tokenCookie Header is used to locate the approximate location where the key parameters in the Header are generated. The following code demonstrates that debugger is performed when the keyword is matched in the Header ;

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

---

Summarize

The above is what I will talk about today. This article only briefly introduces the basic use of JS Hook. More useful JS Hook codes will be updated in this blog post. Finally, I
recommend a better related blog post: JS Reverse Engineering Hook, eating hot pot and singing songs, was suddenly robbed by bandits!