最近 Hack 了一个前端页面(自家网站,但是暂时不能从源码改),来增强它的某些功能。
这些增强功能需要使用网页中的一些接口,但是经过调试发现需要对接口传输的表单进行签名校验。尝试了一下常见的 Hash 算法以及少许迭代组合,输入输出都对不上,而逆向整个算法代价过高,所以打算使用浏览器扩展篡改 JS ,将签名接口直接暴露出来。
一、JS 文件拦截和篡改
经过调试定位到了签名算法所在的地方,然后取前后若干代码作为特征码,到时候只需要把要插入的内容以合适的方式添加到特征码里面,然后替换原文件中的特征码,就可以达到篡改 JS 的效果了。
1.1 JS 文件拦截
这个拦截需要 webRequestBlocking
和 webRequest
权限,因此在 manifest.json
中声明这两个权限:
"permissions": [
...
"webRequest",
"webRequestBlocking"
]
然后在background.js
中过滤带有签名算法的JS
请求:
chrome.webRequest.onBeforeRequest.addListener(
function(details){
const { url } = details;
if(/xxxx\.js/.test(url)){
// 这个函数要同步返回,因此我们不能在这里篡改文件
// 不过先返回一个“信标”,注入到 dom 里作为注入 JS 的凭据
// secretPageId 确保页面对得上,不过这一点貌似是多余的
const secretPageId = Date.now() + "--" + Math.random();
const redirectUrl = `
data:javascript,
var node = document.createElement('div');
node.id = 'secretPageId';
node.innerHTML ="${secretPageId}";
document.body.appendChild(node);
`.replace(/\n/g, '');
getAndChangeScript(url, secretPageId);
return {
redirectUrl
}
}
return {
redirectUrl: url,
}
}
);
1.2 JS 文件篡改
你可能注意到了上面的代码片段中,调用的 getAndChangeScript
函数还没有定义,看函数名应该猜得到它是用来篡改 JS 的:
async function getAndChangeScript(src, secretPageId){
const scriptStr = await (await fetch(url)).text();
const changedScript = scriptStr.replace(
// 这里是特征码
"e.filterNoNumber=Y;",
// 修改后的特征码,替换到原文中去
"window.signMaker = J;e.filterNoNumber=Y;"
);
scriptInjectBus.send(secretPageId, changedScript);
}
二、将篡改后的 JS 注入页面
2.1 将文件从 background.js
发送到 content.js
毕竟background.js
并不能操作 DOM ,因此只能使用 content.js
,这里就需要一个“传送门”来发送这些内容。
在background.js
这一侧,定义一个scriptInjectBus
来干这事:
const scriptInjectBus = (function () {
const listenQueue = [];
const send = function (info) {
listenQueue.forEach(function (handler) {
handler(info);
});
};
const listen = function (handler) {
listenQueue.push(handler);
};
return {
send,
listen
};
})();
并且要监听来自 content 的消息:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
scriptInjectBus.listen(function (info) {
chrome.tabs.sendMessage(tab.id, info, function (res) {});
});
});
👆这里使用了 tabs
,记得在 manifest.json
中添加 tabs
权限。
2.2 content.js
接收代码并注入页面
content.js
这里的写法想必大家就不陌生了:
chrome.runtime.onMessage.addListener(function(info){
const node = document.getElementById('secretPageId');
const secretPageId = node.innerHTML.trim();
if(secretPageId && secretPageId === info.secretPageId){
node.innerHTML = '';
const scriptNode = document.createElement('script');
scriptNode.innerHTML = info.js;
document.body.appendChild(scriptNode);
}
}
三、也许这并不是最好的办法
但是管用就行,对于自家网站来讲,最好的办法当然是在源码里修改。这种使用浏览器扩展的奇技淫巧至少会有如下缺陷:
- 不支持
import
方法直接引入的ESM
模块; - 对于依赖 JS 加载时序的页面,打乱的时序会影响原来的逻辑。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。