144 |
145 | # 十、逆向技术交流群
146 |
147 | 扫码加入逆向技术交流群：
148 |
149 | 
150 |
151 | 如群二维码过期，可以加我个人微信，发送【逆向群】拉你进群：
152 |
153 | 
154 |
155 | [点此](https://t.me/jsreijsrei)或扫码加入TG交流群：
156 |
157 | 
158 |
159 |
--------------------------------------------------------------------------------
/README_en.md:
--------------------------------------------------------------------------------
1 | # jQuery Hook
2 |
3 | GitHub Repository: https://github.com/JSREI/jQuery-hook
4 |
5 | [简体中文](./README.md) | English
6 |
7 |
8 |               
9 | 
10 |
11 | # I. What is the purpose of this script?
12 |
13 | It is designed to swiftly identify the actual code location that binds events to `DOM` elements using `jQuery`, facilitating reverse engineering analysis.
14 |
15 | # II. Why does this exist?
16 |
17 | Though `jQuery` has seen better days, it still persists in many legacy systems, maintaining a significant market share. During the author's journey through `js` reverse engineering, it was observed that the Chrome developer tools, when used to inspect element event bindings, reveal code encapsulated by `jQuery`:
18 | 
19 | This封装 occurs because `jQuery` has superimposed its own event management system over the native `DOM` element event mechanism. While this system offers developers conveniences, such as the ability to easily attach multiple callback methods to the same event of a `DOM` element, it poses challenges for reverse engineering efforts. It's not straightforward for reversers to pinpoint the actual code location of `DOM` event logic. This script addresses this issue, **offering a straightforward and potent approach to swiftly identify the true code location associated with `jQuery DOM` element events**.
20 |
21 | # III. Installation
22 |
23 | ## 3.1 Install from the Greasy Fork Store (Recommended Method)
24 |
25 | The script is readily available on the Greasy Fork Store. Click the link below to install it directly from the store with ease and speed. Additionally, should the script be updated in the future, the Greasy Fork extension will automatically notify you to upgrade.
26 |
27 | [Install jQuery Hook from Greasy Fork](https://greasyfork.org/zh-CN/scripts/435556-jquery-hook)
28 |
29 | ## 3.2 Manual Installation
30 |
31 | Copy the `jQuery-hook.js` file manually from the root directory of the `main` branch of this repository into your Greasemonkey plugin to create a new script and paste the code.
32 |
33 | ```
34 | [Download jQuery-hook.js](https://github.com/JSREI/jQuery-hook/blob/main/jQuery-hook.js)
35 | ```
36 |
37 | Please be aware that with this approach, the Greasemonkey plugin will not automatically notify you of updates to this script. However, you can `star`/`watch` this repository to stay informed about future updates.
38 |
39 | # 4. Usage Example
40 |
41 | Locate any website developed with `jQuery`, for instance:
42 |
43 | [Example Website](http://wap.wfu.edu.cn:8001/authz/login/slogin)
44 |
45 | Initiate a login request, and you will notice that the password parameter `mm` in the login request is encrypted during transmission.
46 |
47 | 
48 | From this perspective, it's evident that the request sent is of the `doc` type, seemingly dispatched via the form submission method.
49 | 
50 | Drawing on our past experience with js reverse engineering, we can deduce:
51 |
52 | - The `click` event bound to the "Login" button is likely triggered upon clicking the button.
53 | - The `click` event's `js` code retrieves the plaintext password value from the `input` named `mm`, encrypts it to obtain the encrypted password value.
54 | - It then updates the value of the `mm input` to the encrypted password value.
55 | - The form is subsequently submitted, and the password parameter `mm` in the request is now the encrypted value.
56 |
57 | Of course, the above is all speculative based on experience; the actual event code must be examined for certainty. Using the element inspection feature in `Chrome` to select the login button, the left side automatically switches to the `Elements` tab and locates the code position of the `DOM` element. Then, switch to the `Event Listener` tab on the right to view the events bound to this element and discover a `click` event, albeit with the code position within `jQuery`. Pay no mind to these details, rejoice, and click through to this code location:
58 |
59 | 
60 | Then you find yourself ensnared in `jQuery`'s closure, prematurely excited, because `jQuery` has encapsulated its own event mechanism, which is not easily reversible:
61 | 
62 | This is where the script comes into play. Enable the Greasemonkey plugin with this script `jQuery hook`, refresh the page to reload so that the script can be injected into the page. If the loading is successful, a prompt will appear in the console:
63 |
64 | 
65 | Inspect the login button again, disregarding the bound events provided by `Chrome` in the `Event Listener` on the right. Note that the events bound by `jQuery` in the `Elements` panel on the left are now displayed as element attributes:
66 |
67 | 
68 | For example:
69 |
70 | ```text
71 | cc11001100-jquery-click-event-function="cc11001100_click_5"
72 | ```
73 | This indicates that there is a click event on this element, and the code associated with this event's callback function has been assigned to a global variable with this name:
74 | ```text
75 | cc11001100_click_5
76 | ```
77 | Then, switch to the `console` in the developer tools, paste the name of this global variable `cc11001100_click_5`, and press enter to view its memory address:
78 | 
79 | Click the memory address to navigate directly to the code bound to the `click` event of the login button:
80 | 
81 | Scroll down to see the encryption method of the parameter `mm`:
82 |
83 | 
84 |
85 | With this, the process is clear. We have easily located the encryption position in a more scientific manner. Reverse engineering is not a laborious task; this is the joy of reverse engineering!
86 |
87 | # V. Principle Overview
88 | It is implemented by `hooking` some event setting methods on the prototype of `jQuery`'s `$.fn`. The currently supported `jQuery` event methods are:
89 |
90 | ```text
91 | "click",
92 | "dblclick",
93 | "blur",
94 | "change",
95 | "contextmenu",
96 | "error",
97 | "focus",
98 | "focusin",
99 | "focusout",
100 | "hover",
101 | "holdReady",
102 | "proxy",
103 | "ready",
104 | "keydown",
105 | "keypress",
106 | "keyup",
107 | "live",
108 | "load",
109 | "mousedown",
110 | "mouseenter",
111 | "mouseleave",
112 | "mousemove",
113 | "mouseout",
114 | "mouseover",
115 | "mouseup"
116 | "on"
117 | ```
118 |
119 | Each time an element is assigned an event, an additional attribute is created. Copy the value of this attribute, which corresponds to a global variable. Paste it in the `console`, and this is the actual code location associated with this element's event.
120 |
121 | # VI. Feedback
122 |
123 | - If you encounter any events that are not `Hooked`, please provide feedback in the [issue](https://github.com/JSREI/jQuery-hook/issues) section.
124 | - For any requests or suggestions, please provide feedback in the [issue](https://github.com/JSREI/jQuery-hook/issues) section.
125 | - If you feel that this project has any areas for improvement (not limited to documentation, code) and prefer to jump straight into making changes rather than explaining at length, welcome to submit a `pr`.
126 |
127 | # VII. TODO
128 |
129 | - Monitor and `Hook` requests issued by `jQuery`.
130 | - If you wish for additional features, please discuss in the [issue](https://github.com/CC11001100/jQuery-hook/issues) section.
131 |
132 | # VIII、Contributors
133 |
134 | 🎯 核心功能
304 |-
305 |
- 原生事件定位 - 穿透jQuery封装直达原生代码 306 |
- 加密逻辑追踪 - 快速定位加密函数调用栈 307 |
- 动态事件追踪 - 实时监控DOM事件绑定 308 |
310 | 【此处为GIF预留位置】
311 |
312 | 🚀 快速安装
316 |
317 |
331 |
318 |
319 | 已经有
320 | 数据获取中...
321 | 人安装了此脚本
322 |
323 |
327 |
328 | 前往油猴商店
329 |
330 | 🔍 演示视频
334 | 335 |
336 |
344 |
345 | 👥 逆向技术交流群
350 |
351 |
374 | 扫码加入逆向技术微信交流群：
352 |
353 |
373 |
354 | 
355 |
357 |
358 |
355 | 微信交流群
356 |
359 | 
360 |
362 |
363 |
360 | 如群二维码过期，可加此微信并发送【逆向群】
361 |
364 | 
365 |
372 |
365 | 366 | 367 | 368 | Telegram 交流群 369 | 370 |
371 |