快捷導(dǎo)航

如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁(yè)中的JS?文件

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

這篇文章主要為大家介紹了如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁(yè)中的JS文件實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

最近 Hack 了一個(gè)前端頁(yè)面（自家網(wǎng)站，但是暫時(shí)不能從源碼改），來(lái)增強(qiáng)它的某些功能。

這些增強(qiáng)功能需要使用網(wǎng)頁(yè)中的一些接口，但是經(jīng)過(guò)調(diào)試發(fā)現(xiàn)需要對(duì)接口傳輸?shù)谋韱芜M(jìn)行簽名校驗(yàn)。嘗試了一下常見(jiàn)的 Hash 算法以及少許迭代組合，輸入輸出都對(duì)不上，而逆向整個(gè)算法代價(jià)過(guò)高，所以打算使用瀏覽器擴(kuò)展篡改 JS ，將簽名接口直接暴露出來(lái)。

一、JS 文件攔截和篡改

經(jīng)過(guò)調(diào)試定位到了簽名算法所在的地方，然后取前后若干代碼作為特征碼，到時(shí)候只需要把要插入的內(nèi)容以合適的方式添加到特征碼里面，然后替換原文件中的特征碼，就可以達(dá)到篡改 JS 的效果了。

1.1 JS 文件攔截

這個(gè)攔截需要 webRequestBlocking和 webRequest權(quán)限，因此在 manifest.json 中聲明這兩個(gè)權(quán)限：

"permissions": [
  ...
  "webRequest",
  "webRequestBlocking"
]

然后在background.js中過(guò)濾帶有簽名算法的JS請(qǐng)求：

chrome.webRequest.onBeforeRequest.addListener(
  function(details){
    const { url } = details;
    if(/xxxx\.js/.test(url)){
      // 這個(gè)函數(shù)要同步返回，因此我們不能在這里篡改文件
      // 不過(guò)先返回一個(gè)“信標(biāo)”，注入到 dom 里作為注入 JS 的憑據(jù)
      // secretPageId 確保頁(yè)面對(duì)得上，不過(guò)這一點(diǎn)貌似是多余的
      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 文件篡改

你可能注意到了上面的代碼片段中，調(diào)用的 getAndChangeScript 函數(shù)還沒(méi)有定義，看函數(shù)名應(yīng)該猜得到它是用來(lái)篡改 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 注入頁(yè)面

2.1 將文件從 background.js 發(fā)送到 content.js

畢竟background.js并不能操作 DOM ，因此只能使用 content.js，這里就需要一個(gè)“傳送門”來(lái)發(fā)送這些內(nèi)容。
在background.js這一側(cè)，定義一個(gè)scriptInjectBus來(lái)干這事：

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)聽來(lái)自 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權(quán)限。

2.2 content.js 接收代碼并注入頁(yè)面

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);
    }
}