如何使用瀏覽器擴展篡改網頁中的JS?文件

更新時間：2023年05月16日 11:53:26 作者：知名噴子

這篇文章主要為大家介紹了如何使用瀏覽器擴展篡改網頁中的JS文件實現解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

最近 Hack 了一個前端頁面（自家網站，但是暫時不能從源碼改），來增強它的某些功能。

這些增強功能需要使用網頁中的一些接口，但是經過調試發(fā)現需要對接口傳輸的表單進行簽名校驗。嘗試了一下常見的 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 發(fā)送到 content.js

畢竟background.js并不能操作 DOM ，因此只能使用 content.js，這里就需要一個“傳送門”來發(fā)送這些內容。
在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
  };
})();

并且要監(jiān)聽來自 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);
    }
}