浏览器扩展拦截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 加载时序的页面，打乱的时序会影响原来的逻辑。

以上就是如何使用浏览器扩展篡改网页中的JS 文件的详细内容，更多关于浏览器扩展篡改网页JS的资料请关注本站其它相关文章！

利用浏览器扩展拦截并篡改网页JS文件的实战方法

前言