In our front-end JavaScript, hooks are often mentioned. Hook technology is also called hook technology. It refers to rewriting a certain method during the program operation and adding our customized code before and after the original method. Our hooks, hook mechanisms, hook functions, hooks, are all the same concepts.
For Windows systems, it is based on the event-driven mechanism. To put it bluntly, the entire system is implemented through message delivery. Hook is a special message processing mechanism. It can monitor various event messages in the system or process, intercept messages sent to the target window and process them. Used to monitor the occurrence of specific events in the system and complete specific functions, such as screen word collection, monitoring logs, intercepting keyboard, mouse input, etc.
Developers often use some techniques for hooks to monitor or modify the behavior of programs. Below are commonly used hook technology and sample code
1. Dom operation
Reverse Oil Monkey in JSscriptAmong them, DOM operation is the most commonly used Hook method. By modifying the properties and styles of DOM elements, we can control and modify the web page.
// Modify the properties of the DOM element('elementId').setAttribute('attrName', 'attrValue');
// Modify the style of the DOM element('elementId'). = 'value';2. Cookie operation
Cookie Hook is used to locate the location of key parameters generated in cookies. The following code demonstrates that when the __dfp keyword is matched in the cookie, a breakpoint is inserted:
(function () {
'use strict';
var cookieTemp = '';
(document, 'cookie', {
set: function (val) {
if (('__dfp') != -1) {
debugger;
}
('Hook captures cookie settings->', val);
cookieTemp = val;
return val;
},
get: function () {
return cookieTemp;
},
});
})();
(function () {
'use strict';
var org = .__lookupSetter__('cookie');
document.__defineSetter__('cookie', function (cookie) {
if (('__dfp') != -1) {
debugger;
}
org = cookie;
});
document.__defineGetter__('cookie', function () {
return org;
});
})();3. Event monitoring operation
Event listening is also a commonly used Hook method in JS reverse oil monkey scripts. By listening to events on a web page, we can trigger custom actions and behaviors.
// Listen to button click event('buttonId').addEventListener('click', function() {
// Customize operations and behaviors});4. AJAX interception operation
AJAX interception is also a commonly used Hook method in JS reverse oil monkey scripts. By intercepting AJAX requests on web pages, we can control and modify data.
// Intercept AJAX requests._send = ;
= function() {
// Customize operations and behaviorsthis._send.apply(this, arguments);
};5. Function replacement operation
Function replacement is also a commonly used Hook method in JS reverse oil monkey scripts. By replacing the functions on the web page, we can control and modify the functions.
// Replace the original functionvar originalFunction = ;
= function() {
// Customize operations and behaviors(this, arguments);
};6. Header operation
The Header Hook is used to locate the key parameter generation location in the Header. The following code demonstrates inserting breakpoints when the Authorization keyword is included in the Header:
(function () {
var org = ;
= function (key, value) {
if (key == 'Authorization') {
debugger;
}
return (this, arguments);
};
})()7. URL operation
URL Hook is used to locate the location of the key parameter generation in the requested URL. The following code demonstrates inserting a breakpoint when the requested URL contains the login keyword:
(function () {
var open = ;
= function (method, url, async) {
if (("login") != 1) {
debugger;
}
return (this, arguments);
};
})();8. Operation
The () method is used to convert JavaScript values to JSON strings, which may be encountered during the encryption process of some sites. The following code demonstrates that when encountering () is encountered, breakpoints are inserted:
(function() {
var stringify = ;
= function(params) {
("Hook ——> ", params);
debugger;
return stringify(params);
}
})();9. Operation
The () method is used to convert a JSON string into an object. It may be encountered during the encryption process of some sites. The following code demonstrates that when encountering () is encountered, breakpoints are inserted:
(function() {
var parse = ;
= function(params) {
("Hook ——> ", params);
debugger;
return parse(params);
}
})();10. Eval operation
The function of the JavaScript eval() function is to calculate a JavaScript string and use it as ascriptcode to execute. If the parameter is an expression, the eval() function will execute the expression. If the parameter is a Javascript statement, eval() will execute Javascript statements and is often used to dynamically execute JS. After the following code is executed, all eval() operations will print out the JS source code to be executed on the console:
(function() {
// Save the original method window.__cr_eval = ;
// Rewrite eval var myeval = function(src) {
(src);
("=============== eval end ===============");
debugger;
return window.__cr_eval(src);
}
// Mask detection of native function native attributes in JS var _myeval = (null);
_myeval.toString = window.__cr_eval.toString;
(window, 'eval', {
value: _myeval
});
})();11. Function operation
After the following code is executed, all function operations will print out the JS source code to be executed on the console:
(function() {
// Save the original method window.__cr_fun = ;
// Rewrite function var myfun = function() {
var args = (arguments, 0, -1).join(","),
src = arguments[ - 1];
(src);
("=============== Function end ===============");
debugger;
return window.__cr_fun.apply(this, arguments);
}
// Mask detection of native function native properties in js = function() {
return window.__cr_fun + ""
}
(window, 'Function', {
value: myfun
});
})();12. Summary
This is the article about 11 commonly used hook hook technologies and sample codes in JavaScript. For more related hook technology content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!