{"id":605,"date":"2025-12-07T10:16:14","date_gmt":"2025-12-07T02:16:14","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=605"},"modified":"2025-12-07T10:16:14","modified_gmt":"2025-12-07T02:16:14","slug":"js-%e9%80%86%e5%90%91%e6%8e%a7%e5%88%b6%e5%8f%b0-hook-%e6%b3%a8%e5%85%a5%e8%a7%a3%e6%9e%90","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/js-%e9%80%86%e5%90%91%e6%8e%a7%e5%88%b6%e5%8f%b0-hook-%e6%b3%a8%e5%85%a5%e8%a7%a3%e6%9e%90\/","title":{"rendered":"JS\u00a0\u9006\u5411\u63a7\u5236\u53f0\u00a0Hook\u00a0\u6ce8\u5165\u89e3\u6790"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd <strong>\u300aJS \u9006\u5411\u63a7\u5236\u53f0 Hook \u6ce8\u5165\u89e3\u6790\u300b<\/strong>\u2014\u2014\u6700\u65b0\u3001\u6700\u6e05\u6670\u3001\u9002\u5408\u505a\u7b14\u8bb0\u6216\u7528\u4f5c\u9879\u76ee\u9006\u5411\u5206\u6790\u53c2\u8003\u7684\u7248\u672c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 JS \u9006\u5411\u63a7\u5236\u53f0 Hook \u6ce8\u5165\u89e3\u6790<\/h1>\n\n\n\n<p><strong>\uff08\u5b8c\u6574\u601d\u8def + \u5e38\u7528 Hook \u6280\u5de7 + \u9632 Hook \u5bf9\u6297\uff09<\/strong><\/p>\n\n\n\n<p>\u5728\u524d\u7aef\u9006\u5411\u4e2d\uff0cHook\uff08\u52ab\u6301\uff09\u662f\u6700\u5e38\u89c1\u3001\u6700\u6709\u6548\u7684\u624b\u6bb5\u4e4b\u4e00\uff0c\u7528\u4e8e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6293\u53d6\u88ab\u524d\u7aef\u4ee3\u7801\u8ba1\u7b97\u540e\u7684\u5173\u952e\u53c2\u6570<\/li>\n\n\n\n<li>\u76d1\u63a7 JS \u51fd\u6570\u6267\u884c<\/li>\n\n\n\n<li>\u4fee\u6539 Web \u5e94\u7528\u884c\u4e3a<\/li>\n\n\n\n<li>\u5b9a\u4f4d\u52a0\u5bc6\u3001\u53cd\u722c\u5173\u952e\u8282\u70b9<\/li>\n\n\n\n<li>\u62e6\u622a WebSocket\u3001XHR\u3001Fetch\u3001Crypto \u7b49 API<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 \u4ec0\u4e48\u662f Hook\uff1f<\/h1>\n\n\n\n<p><strong>Hook \u5c31\u662f\u201c\u4fee\u6539\u67d0\u4e2a\u539f\u751f\u51fd\u6570\uff0c\u8ba9\u6211\u4eec\u80fd\u5728\u5b83\u6267\u884c\u524d\/\u540e\u63d2\u5165\u81ea\u5df1\u7684\u4ee3\u7801\u201d\u3002<\/strong><\/p>\n\n\n\n<p>\u4f8b\u5982\u52ab\u6301 console.log\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n(function() {\n    const oldLog = console.log;\n    console.log = function(...args) {\n        debugger;  \/\/ \u6253\u65ad\u70b9\u5206\u6790\n        oldLog(&quot;Hook \u6355\u83b7\u5230 -&gt;&quot;, ...args);\n    };\n})();\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 \u5e38\u89c1\u63a7\u5236\u53f0 Hook \u7c7b\u578b<\/h1>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.1 Hook console \u7cfb\u5217<\/h2>\n\n\n\n<p>\u6700\u5e38\u7528\uff0c\u7528\u6765\u6293\u65e5\u5fd7\u6216\u9006\u5411\u524d\u7aef\u903b\u8f91\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 Hook \u6240\u6709 console \u8f93\u51fa\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#x5B;&#039;log&#039;,&#039;warn&#039;,&#039;error&#039;,&#039;info&#039;].forEach(fn=&gt;{\n    const old = console&#x5B;fn];\n    console&#x5B;fn] = function(...args){\n        debugger;\n        old.call(this, `&#x5B;Hook ${fn}]`, ...args);\n    }\n});\n\n<\/pre><\/div>\n\n\n<p>\u7528\u9014\uff1a<br>\u2714 \u5b9a\u4f4d\u5173\u952e\u53d8\u91cf<br>\u2714 \u6293\u52a0\u5bc6\u524d\/\u540e\u53c2\u6570<br>\u2714 \u5206\u6790\u8fd0\u884c\u65f6\u7684\u8c03\u7528\u94fe<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.2 Hook XHR\uff08XMLHttpRequest\uff09<\/h2>\n\n\n\n<p><strong>\u6293\u53d6 Ajax \u8bf7\u6c42\u4e2d\u7684\u53c2\u6570<\/strong>\uff08\u5982 sign\u3001token\u3001timestamp\uff09<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n(function() {\n    const open = XMLHttpRequest.prototype.open;\n    const send = XMLHttpRequest.prototype.send;\n\n    XMLHttpRequest.prototype.open = function(method, url) {\n        this._url = url;\n        this._method = method;\n        return open.apply(this, arguments);\n    };\n\n    XMLHttpRequest.prototype.send = function(body) {\n        debugger;\n        console.log(&quot;XHR Hook:&quot;, this._method, this._url, body);\n        return send.apply(this, arguments);\n    };\n})();\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.3 Hook Fetch<\/h2>\n\n\n\n<p>\u524d\u7aef\u5927\u578b\u9879\u76ee\u57fa\u672c\u90fd\u7528 fetch\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst oldFetch = window.fetch;\nwindow.fetch = async function(...args) {\n    debugger;\n    console.log(&quot;Fetch Hook -&gt;&quot;, args&#x5B;0], args&#x5B;1]);\n    const res = await oldFetch.apply(this, args);\n    return res;\n};\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.4 Hook WebSocket<\/h2>\n\n\n\n<p>\u6293\u5b9e\u65f6\u52a0\u5bc6\u901a\u8baf\u6d41\uff08\u6e38\u620f\u3001\u76f4\u64ad\u3001\u52a0\u5bc6\u5e94\u7528\u5e38\u89c1\uff09\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst OldWS = window.WebSocket;\n\nwindow.WebSocket = function(url, protocols) {\n    console.log(&quot;WebSocket Hook -&gt;&quot;, url);\n    const ws = new OldWS(url, protocols);\n\n    ws.addEventListener(&quot;message&quot;, msg =&gt; {\n        debugger;\n        console.log(&quot;WS\u63a5\u6536\uff1a&quot;, msg.data);\n    });\n\n    const oldSend = ws.send;\n    ws.send = function(data) {\n        debugger;\n        console.log(&quot;WS\u53d1\u9001\uff1a&quot;, data);\n        return oldSend.call(ws, data);\n    };\n\n    return ws;\n};\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.5 Hook Object.defineProperty\uff08\u524d\u7aef\u9006\u5411\u5e38\u89c1\u52a0\u5bc6\u70b9\uff09<\/h2>\n\n\n\n<p>\u8bb8\u591a\u7f51\u7ad9\u7528 defineProperty \u9650\u5236\u8c03\u8bd5\u3001\u9690\u85cf\u53d8\u91cf\uff0c\u8fd9\u53ef\u4ee5 Hook\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst oldDefine = Object.defineProperty;\nObject.defineProperty = function(obj, prop, desc) {\n    console.log(&quot;Hook defineProperty -&gt;&quot;, prop, desc);\n    debugger;\n    return oldDefine.call(this, obj, prop, desc);\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 2.6 Hook \u539f\u578b\u94fe\u51fd\u6570\uff08\u6293\u53d6\u5173\u952e\u7b97\u6cd5\uff09<\/h2>\n\n\n\n<p>\u6bd4\u5982\u6293 Array.prototype.push\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst oldPush = Array.prototype.push;\nArray.prototype.push = function(...args){\n    debugger;\n    console.log(&quot;Push Hook:&quot;, args);\n    return oldPush.apply(this, args);\n};\n\n<\/pre><\/div>\n\n\n<p>\u7528\u9014\uff1a<br>\u2714 \u6293\u6df7\u6dc6\u4ee3\u7801\u4e2d\u7684\u6570\u636e\u6784\u5efa\u8fc7\u7a0b<br>\u2714 \u628a\u9690\u85cf\u53d8\u91cf\u201c\u903c\u51fa\u6765\u201d<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 JS \u9006\u5411\u4e2d\u7684\u5e38\u7528 Hook \u601d\u8def<\/h1>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde9 3.1 \u5b9a\u4f4d\u52a0\u5bc6\u51fd\u6570<\/h2>\n\n\n\n<p>\u89c2\u5bdf\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u67d0\u53c2\u6570\u7a81\u7136\u53d8\u957f\uff08sign\u3001token\u3001checksum\uff09<\/li>\n\n\n\n<li>\u53c2\u6570\u51fa\u73b0 base64\u3001hex\u3001\u9ad8 entropy<\/li>\n\n\n\n<li>\u8bf7\u6c42\u65f6\u673a\u7a81\u7136\u53d8\u5316<\/li>\n<\/ul>\n\n\n\n<p>Hook\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconsole.log\nXHR \/ fetch\nObject.defineProperty\nCrypto API\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde9 3.2 \u8ddf\u8e2a\u8fd0\u884c\u6d41\u7a0b<\/h2>\n\n\n\n<p>Hook\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nFunction.prototype.call\nFunction.prototype.apply\nsetTimeout \/ setInterval\n\n<\/pre><\/div>\n\n\n<p>\u6781\u5176\u5f3a\u5927\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n(function(){\n    const oldCall = Function.prototype.call;\n    Function.prototype.call = function(...args){\n        debugger;\n        return oldCall.apply(this, args);\n    }\n})();\n\n<\/pre><\/div>\n\n\n<p>\u53ef\u4ee5\u770b\u5230\u4efb\u4f55\u88ab\u8c03\u7528\u7684\u51fd\u6570\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde9 3.3 \u63a7\u5236\u8c03\u8bd5\u6682\u505c<\/h2>\n\n\n\n<p>\u4f7f\u7528 debugger \u81ea\u52a8\u4e2d\u65ad\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconsole.log = function(...args){\n    debugger;\n    return oldLog.apply(this, args);\n};\n\n<\/pre><\/div>\n\n\n<p>\u4efb\u4f55\u7ecf\u8fc7 console.log \u7684\u5730\u65b9\u90fd\u4f1a\u505c\u4e0b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4\ufe0f\u20e3 Hook \u7684\u52a0\u8f7d\u65b9\u5f0f<\/h1>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 \u65b9\u5f0f 1\uff1a\u6d4f\u89c8\u5668\u63a7\u5236\u53f0\u76f4\u63a5\u6267\u884c<\/h2>\n\n\n\n<p>\u6700\u65b9\u4fbf\u3001\u6700\u5e38\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 \u65b9\u5f0f 2\uff1aCSP \u53d7\u9650\uff0c\u53ef\u4ee5\u7528 Snippet\uff08Chrome Sources \u2192 Snippets\uff09<\/h2>\n\n\n\n<p>\u7ed5\u8fc7 CSP\/XSS \u9650\u5236\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 \u65b9\u5f0f 3\uff1aTamperMonkey\uff08\u6cb9\u7334\uff09\u811a\u672c\u6ce8\u5165<\/h2>\n\n\n\n<p>\u7528\u4e8e\u957f\u671f\u6293\u5305\u9006\u5411\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2714 \u65b9\u5f0f 4\uff1aChrome DevTools Sniffer<\/h2>\n\n\n\n<p>\u4f7f\u7528\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nsources \u2192 overrides \u2192 \u66ff\u6362\u76ee\u6807 JS \u6587\u4ef6\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5\ufe0f\u20e3 \u53cd Hook \u5bf9\u6297\uff08\u7f51\u7ad9\u5e38\u7528\uff09<\/h1>\n\n\n\n<p>\u7f51\u7ad9\u5e38\u7528\u53cd\u9006\u5411\u6280\u672f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u91cd\u5199 console \u8ba9\u4f60\u65e0\u6cd5 Hook<\/li>\n\n\n\n<li>\u51bb\u7ed3\u539f\u751f\u65b9\u6cd5\uff08Object.freeze\uff09<\/li>\n\n\n\n<li>\u4ee3\u7801\u6df7\u6dc6<\/li>\n\n\n\n<li>\u6539\u5199\u539f\u578b\u94fe<\/li>\n\n\n\n<li>\u68c0\u6d4b\u51fd\u6570\u6e90\u7801\u662f\u5426\u88ab\u4fee\u6539\uff08toString \u53cd\u4f5c\u5f0a\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u4f8b\u5982\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconsole.log = function(){};\nObject.defineProperty(console, &quot;log&quot;, { writable: false });\n\n<\/pre><\/div>\n\n\n<p>\u89e3\u51b3\uff1a<br>\u2192 \u5148 Hook defineProperty<br>\u2192 \u518d Hook console<br>\u2192 \u6216\u5728\u7f51\u9875\u52a0\u8f7d\u524d\u7528 Snippet \u6ce8\u5165<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6\ufe0f\u20e3 \u63d0\u4f9b\u7ed9\u4f60\u7684\u4e07\u80fd Hook \u6a21\u677f<\/h1>\n\n\n\n<p>\u4e00\u4e2a Hook \u6240\u6709\u5173\u952e\u524d\u7aef API \u7684\u7efc\u5408\u811a\u672c\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n(function() {\n    \/\/ console\n    &#x5B;&#039;log&#039;,&#039;warn&#039;,&#039;error&#039;,&#039;info&#039;].forEach(fn=&gt;{\n        const old = console&#x5B;fn];\n        console&#x5B;fn] = function(...args){\n            debugger;\n            old.call(this, `&#x5B;Hook ${fn}]`, ...args);\n        };\n    });\n\n    \/\/ XHR\n    const open = XMLHttpRequest.prototype.open;\n    const send = XMLHttpRequest.prototype.send;\n    XMLHttpRequest.prototype.open = function(method, url) {\n        this._url = url;\n        return open.apply(this, arguments);\n    };\n    XMLHttpRequest.prototype.send = function(body) {\n        debugger;\n        console.log(&quot;XHR&quot;, this._url, body);\n        return send.apply(this, arguments);\n    };\n\n    \/\/ fetch\n    const oldFetch = window.fetch;\n    window.fetch = async function(...args) {\n        debugger;\n        console.log(&quot;Fetch&quot;, args);\n        return oldFetch.apply(this, args);\n    };\n\n    \/\/ WebSocket\n    const OldWS = window.WebSocket;\n    window.WebSocket = function(url) {\n        console.log(&quot;WS Connect:&quot;, url);\n        const ws = new OldWS(url);\n        const oldSend = ws.send;\n        ws.send = function(data) {\n            debugger;\n            console.log(&quot;WS Send:&quot;, data);\n            return oldSend.call(ws, data);\n        };\n        return ws;\n    };\n})();\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u300aJS \u9006\u5411\u63a7\u5236\u53f0 Hook \u6ce8\u5165\u89e3\u6790\u300b\u2014\u2014\u6700\u65b0\u3001\u6700\u6e05\u6670\u3001\u9002\u5408\u505a\u7b14&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/js-%e9%80%86%e5%90%91%e6%8e%a7%e5%88%b6%e5%8f%b0-hook-%e6%b3%a8%e5%85%a5%e8%a7%a3%e6%9e%90\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-605","post","type-post","status-publish","format-standard","hentry","category-1"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":606,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/605\/revisions\/606"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}