使用瀏覽器擴充套件篡改網頁中的 JS 檔案

知名噴子發表於2022-12-15
瀏覽器套件網頁JS
最近 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 載入時序的頁面，打亂的時序會影響原來的邏輯。

相關文章