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

目錄

• 前言
• 一、JS 文件攔截和篡改
• 1.1 JS 文件攔截
• 1.2 JS 文件篡改
• 二、將篡改后的 JS 注入頁面
• 2.1 將文件從 background.js 發送到 content.js
• 2.2 content.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) {});
  });
});