JavaScript中11種常用的hook鉤子技術及示例代碼
我們前端的JavaScript中，經(jīng)常提到鉤子，Hook技術又叫鉤子技術，指在程序運行過程中，對其中某個方法進行重寫，在原先某個方法前后加入我們自定義的代碼。我們的鉤子，鉤子機制，鉤子函數(shù)，hook，都是同一個概念。
對于Windows系統(tǒng)，它是建立在事件驅(qū)動機制上的，說白了就是整個系統(tǒng)都是通過消息傳遞實現(xiàn)的。hook（鉤子）是一種特殊的消息處理機制，它可以監(jiān)視系統(tǒng)或者進程中的各種事件消息，截獲發(fā)往目標窗口的消息并進行處理。用來監(jiān)視系統(tǒng)中特定事件的發(fā)生，完成特定功能，如屏幕取詞，監(jiān)視日志，截獲鍵盤、鼠標輸入等等。
開發(fā)者經(jīng)常使用一些用于hook（鉤子）的技術來監(jiān)視或修改程序的行為。下面是常用的hook技術及示例代碼
1、dom操作
在JS逆向油猴腳本中，DOM操作是最常用的一種Hook方式。通過修改DOM元素的屬性和樣式，我們可以實現(xiàn)對網(wǎng)頁的控制和修改。
// 修改DOM元素的屬性
document.getElementById('elementId').setAttribute('attrName', 'attrValue');
// 修改DOM元素的樣式
document.getElementById('elementId').style.property = 'value';2、Cookie操作
Cookie Hook 用于定位 Cookie 中關鍵參數(shù)生成位置，以下代碼演示了當 Cookie 中匹配到了 __dfp 關鍵字， 則插入斷點：
(function () {
'use strict';
var cookieTemp = '';
Object.defineProperty(document, 'cookie', {
set: function (val) {
if (val.indexOf('__dfp') != -1) {
debugger;
}
console.log('Hook捕獲到cookie設置->', val);
cookieTemp = val;
return val;
},
get: function () {
return cookieTemp;
},
});
})();
(function () {
'use strict';
var org = document.cookie.__lookupSetter__('cookie');
document.__defineSetter__('cookie', function (cookie) {
if (cookie.indexOf('__dfp') != -1) {
debugger;
}
org = cookie;
});
document.__defineGetter__('cookie', function () {
return org;
});
})();3、事件監(jiān)聽操作
事件監(jiān)聽也是JS逆向油猴腳本中常用的一種Hook方式。通過監(jiān)聽網(wǎng)頁上的事件，我們可以觸發(fā)自定義的操作和行為。
// 監(jiān)聽按鈕點擊事件
document.getElementById('buttonId').addEventListener('click', function() {
// 自定義操作和行為
});4、AJAX攔截操作
AJAX攔截也是JS逆向油猴腳本中常用的一種Hook方式。通過攔截網(wǎng)頁上的AJAX請求，我們可以實現(xiàn)對數(shù)據(jù)的控制和修改。
// 攔截AJAX請求
XMLHttpRequest.prototype._send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
// 自定義操作和行為
this._send.apply(this, arguments);
};5、函數(shù)替換操作
函數(shù)替換也是JS逆向油猴腳本中常用的一種Hook方式。通過替換網(wǎng)頁上的函數(shù)，我們可以實現(xiàn)對函數(shù)的控制和修改。
// 替換原有函數(shù)
var originalFunction = window.functionName;
window.functionName = function() {
// 自定義操作和行為
originalFunction.apply(this, arguments);
};6、Header操作
Header Hook 用于定位 Header 中關鍵參數(shù)生成位置，以下代碼演示了當 Header 中包含 Authorization 關鍵字時，則插入斷點：
(function () {
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
if (key == 'Authorization') {
debugger;
}
return org.apply(this, arguments);
};
})()7、URL操作
URL Hook 用于定位請求 URL 中關鍵參數(shù)生成位置，以下代碼演示了當請求的 URL 里包含 login 關鍵字時，則插入斷點：
(function () {
var open = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url, async) {
if (url.indexOf("login") != 1) {
debugger;
}
return open.apply(this, arguments);
};
})();8、JSON.stringify操作
JSON.stringify() 方法用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串，在某些站點的加密過程中可能會遇到，以下代碼演示了遇到 JSON.stringify() 時，則插入斷點：
(function() {
var stringify = JSON.stringify;
JSON.stringify = function(params) {
console.log("Hook JSON.stringify ——> ", params);
debugger;
return stringify(params);
}
})();9、JSON.parse操作
JSON.parse() 方法用于將一個 JSON 字符串轉(zhuǎn)換為對象，在某些站點的加密過程中可能會遇到，以下代碼演示了遇到 JSON.parse() 時，則插入斷點：
(function() {
var parse = JSON.parse;
JSON.parse = function(params) {
console.log("Hook JSON.parse ——> ", params);
debugger;
return parse(params);
}
})();10、eval操作
JavaScript eval() 函數(shù)的作用是計算 JavaScript 字符串，并把它作為 腳本代碼來執(zhí)行。如果參數(shù)是一個表達式，eval() 函數(shù)將執(zhí)行表達式。如果參數(shù)是 Javascript 語句，eval() 將執(zhí)行 Javascript 語句，經(jīng)常被用來動態(tài)執(zhí)行 JS。以下代碼執(zhí)行后，之后所有的 eval() 操作都會在控制臺打印輸出將要執(zhí)行的 JS 源碼：
(function() {
// 保存原始方法
window.__cr_eval = window.eval;
// 重寫 eval
var myeval = function(src) {
console.log(src);
console.log("=============== eval end ===============");
debugger;
return window.__cr_eval(src);
}
// 屏蔽 JS 中對原生函數(shù) native 屬性的檢測
var _myeval = myeval.bind(null);
_myeval.toString = window.__cr_eval.toString;
Object.defineProperty(window, 'eval', {
value: _myeval
});
})();11、Function操作
以下代碼執(zhí)行后，所有的函數(shù)操作都會在控制臺打印輸出將要執(zhí)行的 JS 源碼：
(function() {
// 保存原始方法
window.__cr_fun = window.Function;
// 重寫 function
var myfun = function() {
var args = Array.prototype.slice.call(arguments, 0, -1).join(","),
src = arguments[arguments.length - 1];
console.log(src);
console.log("=============== Function end ===============");
debugger;
return window.__cr_fun.apply(this, arguments);
}
// 屏蔽js中對原生函數(shù)native屬性的檢測
myfun.toString = function() {
return window.__cr_fun + ""
}
Object.defineProperty(window, 'Function', {
value: myfun
});
})();12、總結(jié)
到此這篇關于JavaScript中11種常用的hook鉤子技術及示例代碼的文章就介紹到這了,更多相關js常用的hook技術內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
從setTimeout看js函數(shù)執(zhí)行過程
這篇文章主要介紹了從setTimeout看js函數(shù)執(zhí)行過程,需要的朋友可以參考下2017-12-12
跟我學習javascript的執(zhí)行上下文，讀完本文后，你應該清楚了解釋器做了什么，為什么函數(shù)和變量能在聲明前使用以及它們的值是如何決定的，需要了解這些內(nèi)容的朋友可以參考下2015-11-11
這篇文章主要給大家介紹了一道關于閉包bind、this的面試題，文中給出了詳細的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
js二級地域選擇的實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
微信小程序開發(fā)打開另一個小程序的實現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)打開另一個小程序的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
javascript 框架小結(jié) 個人工作經(jīng)驗
javascript 框架小結(jié) 個人工作經(jīng)驗,對于新手來說還是值得學習的。2009-06-06
json數(shù)據(jù)處理技巧(字段帶空格、增加字段、排序等等)
json數(shù)據(jù)處理技巧例如：正常取值、字段帶空格、賦值、增加字段、排序、拷貝、數(shù)組添加和刪除等，詳細請參考本文或許對你有所幫助2013-06-06
最近在研習“犀牛書6th”，看完Element Content as HTML一節(jié)，就想隨即展開寫點東西記錄記錄2011-12-12
使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化),本文重點給大家介紹基礎的動畫類實現(xiàn)時間軸，通過示例代碼給大家介紹的很詳細，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了JavaScript模板引擎用法,涉及javascript實現(xiàn)模板的定義與字符替換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07