解密 JS 参数:逆向工程的实用技巧
大家好，我是安果！
大部分网站都会对关键参数进行加密，JS 逆向时，我们首要任务是定位参数具体的加密逻辑
常见方式包含：关键字搜索、堆栈调试、XHR 及事件监听、AST 内存漫游、JS Hook 注入等
本篇文章以 JS Hook 注入定位 Cookie 中某个加密参数为例进行讲解
Cookie 监听
编写一个 Chrome 插件（ V3 版本） 监听浏览器 Cookie 值的变动，当 Cookie 的 Name 匹配时执行 debugger 命令主动触发调试
具体实现如下：
1-1 编写 manifest.json 配置文件
在配置文件中，指定 background.js、content_script
并通过 permissions、host_permissions 进行权限设置
{
"manifest_version": 3,
...
"background": {
"service_worker": "background.js"
},
"content_scripts":[
{
"matches": [
""
],
"js": [
"js/cookie.js"
],
"run_at": "document_start"
}],
"permissions": [
"cookies",
"tabs",
"scripting"
],
"host_permissions": [
"https://host/*"
],
...
}
1-2 监听 Cookie
在 background.js 文件中添加一个事件监听，在它的回调函数中再添加一个对 Cookie 的监听事件
当监听到的 Cookie 满足条件时，发送消息给 Content Script 去执行具体的动作
需要指出的是， changeInfo.cause 表示 Cookie 变化的原因，值 explicit 表示 Cookie 变化是由于用户主动操作导致的
# 监听的cookie_name
const targetCookieName = "cookie_name";
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "startDebugging") {
chrome.cookies.onChanged.addListener((changeInfo) => {
//console.log("监控到cookie变化")
//console.log(changeInfo.cookie.name)
//console.log(changeInfo.cause)
if (changeInfo.cookie.name === targetCookieName && changeInfo.cause === "explicit") {
console.log("监控到cookie变化-explicit，名称：",changeInfo.cookie.name)
chrome.tabs.sendMessage(sender.tab.id, { action: "debugger" });
}
});
}
});
1-3 触发调试
在 Content Script 中，主动触发一次发起调试的消息给 Background
然后，设置一个监听事件，特定条件下主动进入调试模式
// cookie.js
chrome.runtime.sendMessage({ action: "startDebugging" });
chrome.runtime.onMessage.addListener((request) => {
if (request.action === "debugger") {
debugger;
}
});
将编写好的 Chrome 插件安装到浏览器上，打开目标网站及浏览器开发者工具
只要指定的 Cookie 变动，就会自动触发调试操作
Cookie Hook
通过上面的方式仅仅只能发现 Cookie 变动了，但是没法定位到参数设置的具体位置，因此我们需要借助 Hook 进行改造
具体实现如下：
2-1 配置文件中指定 Hook 文件
在 manifest.json 文件中，使用 web_accessible_resources 关键字指定 Hook 脚本及匹配 URL
// manifest.json
{
"manifest_version": 3,
...
"content_scripts": [
{
"matches": [
""
],
"js": [
"js/cookie.js"
],
"run_at": "document_end"
}
],
"permissions": [
"cookies",
"tabs",
"scripting"
],
"host_permissions": [
"*://*/*"
],
"web_accessible_resources": [
{
"resources": [
"js/cookie_hook.js"
],
"matches": [
"https://host/*"
]
}
]
}
2-2 Content Script 注入 JS
在 Content Script 中注入 JS Hook 代码
// cookie.js
function import_js(js_path) {
let tmp = document.createElement('script');
tmp.src = chrome.runtime.getURL(js_path);
tmp.setAttribute('type', 'text/javaScript');
document.head.appendChild(tmp);
}
(function () {
let url = window.location.href;
import_js('js/cookie_hook.js')
})()
2-3 JS Hook 具体逻辑
在 cookie_hook.js 文件中，使用 document . __lookupSetter__ 对 Cookie 设置注入脚本，手动触发调试
// cookie_hook.js
//待匹配的Cookie-Key
const targetCookieName = "cookie_name";
//Hook Cookie Set
//注意：这种方法可能与某些网站的JavaScript代码不兼容，因为它依赖于废弃的__defineSetter__方法
function hookCookieSetter() {
const originalCookieSetter = document.__lookupSetter__("cookie");
document.__defineSetter__("cookie", function (value) {
const cookieName = value.split("=")[0].trim();
if (cookieName === targetCookieName) {
debugger;
}
//调用
originalCookieSetter.call(document, value);
});
}
hookCookieSetter();
当然，我们也可以利用下面的方式进行注入
// cookie_hook.js
//待匹配的Cookie-Key
const targetCookieName = "cookie_name";
//cookie 钩子：用于定位 cookie 中关键参数生成位置
var code = function(){
var org = document.cookie.__lookupSetter__('cookie');
document.__defineSetter__("cookie",function(cookie){
if(cookie.indexOf(targetCookieName)>-1){
debugger;
}
org = cookie;
});
document.__defineGetter__("cookie",function(){return org;});
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
2-4 使用
在 Chrome 浏览器中安装扩展后，打开浏览器开发者工具和目前网站，一旦目标 Cookie 被设定一个值后，会自动进入断点模式
在调试模式下，我们就可以在 Source 面板利用 Call Stack 调用栈一步步查询到加密参数生成的具体逻辑
推荐阅读
如何利用 Selenium 对已打开的浏览器进行爬虫！
微软最强 Python 自动化工具开源了！不用写一行代码！
最全总结 | 聊聊 Selenium 隐藏浏览器指纹特征的几种方式！
END