如何使用浏览器扩展篡改网页中的JS 文件

紫狮王朝

前言

最近 Hack 了一个前端页面（自家网站，但是暂时不能从源码改），来增强它的某些功能。
这些增强功能需要使用网页中的一些接口，但是经过调试发现需要对接口传输的表单进行签名校验。尝试了一下常见的 Hash 算法以及少许迭代组合，输入输出都对不上，而逆向整个算法代价过高，所以打算使用浏览器扩展篡改 JS ，将签名接口直接暴露出来。

一、JS 文件拦截和篡改

经过调试定位到了签名算法所在的地方，然后取前后若干代码作为特征码，到时候只需要把要插入的内容以合适的方式添加到特征码里面，然后替换原文件中的特征码，就可以达到篡改 JS 的效果了。

1.1 JS 文件拦截

这个拦截需要

1. webRequestBlocking

复制代码

和

1. webRequest

复制代码

权限，因此在

1. manifest.json

复制代码

中声明这两个权限：

1. "permissions": [
   
2.   ...
   
3.   "webRequest",
   
4.   "webRequestBlocking"
   
5. ]

复制代码

然后在

1. background.js

复制代码

中过滤带有签名算法的

1. JS

复制代码

请求：

1. chrome.webRequest.onBeforeRequest.addListener(
   
2.   function(details){
   
3.     const { url } = details;
   
4.     if(/xxxx\.js/.test(url)){
   
5.       // 这个函数要同步返回，因此我们不能在这里篡改文件
   
6.       // 不过先返回一个“信标”，注入到 dom 里作为注入 JS 的凭据
   
7.       // secretPageId 确保页面对得上，不过这一点貌似是多余的
   
8.       const secretPageId = Date.now() + "--" + Math.random();
   
9.       const redirectUrl = `
   
10.         data:javascript,
    
11.         var node = document.createElement('div');
    
12.         node.id = 'secretPageId';
    
13.         node.innerHTML ="${secretPageId}";
    
14.         document.body.appendChild(node);
    
15.       `.replace(/\n/g, '');
    
16.       getAndChangeScript(url, secretPageId);
    
17.       return {
    
18.         redirectUrl
    
19.       }
    
20.     }
    
21.     return {
    
22.       redirectUrl: url,
    
23.     }
    
24.   }
    
25. );

复制代码

1.2 JS 文件篡改

你可能注意到了上面的代码片段中，调用的

1. getAndChangeScript

复制代码

函数还没有定义，看函数名应该猜得到它是用来篡改 JS 的：

1. async function getAndChangeScript(src, secretPageId){
   
2.   const scriptStr = await (await fetch(url)).text();
   
3.   const changedScript = scriptStr.replace(
   
4.     // 这里是特征码
   
5.     "e.filterNoNumber=Y;",
   
6.     // 修改后的特征码，替换到原文中去
   
7.     "window.signMaker = J;e.filterNoNumber=Y;"
   
8.   );
   
9.   scriptInjectBus.send(secretPageId, changedScript);
   
10. }

复制代码

二、将篡改后的 JS 注入页面


2.1 将文件从 background.js 发送到 content.js

毕竟

1. background.js

复制代码

并不能操作 DOM ，因此只能使用

1. content.js

复制代码

，这里就需要一个“传送门”来发送这些内容。
在

1. background.js

复制代码

这一侧，定义一个

1. scriptInjectBus

复制代码

来干这事：

1. const scriptInjectBus = (function () {
   
2.   const listenQueue = [];
   
3.   const send = function (info) {
   
4.     listenQueue.forEach(function (handler) {
   
5.       handler(info);
   
6.     });
   
7.   };
   
8. 
   
9.   const listen = function (handler) {
   
10.     listenQueue.push(handler);
    
11.   };
    
12. 
    
13.   return {
    
14.     send,
    
15.     listen
    
16.   };
    
17. })();

复制代码

并且要监听来自 content 的消息：

1. chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
   
2.   scriptInjectBus.listen(function (info) {
   
3.     chrome.tabs.sendMessage(tab.id, info, function (res) {});
   
4.   });
   
5. });

复制代码

来源:https://www.jb51.net/javascript/284537ous.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！