使用浏览器扩展篡改网页中的 JS 文件

最近 Hack 了一个前端页面(自家网站,但是暂时不能从源码改),来增强它的某些功能。
这些增强功能需要使用网页中的一些接口,但是经过调试发现需要对接口传输的表单进行签名校验。尝试了一下常见的 Hash 算法以及少许迭代组合,输入输出都对不上,而逆向整个算法代价过高,所以打算使用浏览器扩展篡改 JS ,将签名接口直接暴露出来。

一、JS 文件拦截和篡改

经过调试定位到了签名算法所在的地方,然后取前后若干代码作为特征码,到时候只需要把要插入的内容以合适的方式添加到特征码里面,然后替换原文件中的特征码,就可以达到篡改 JS 的效果了。

1.1 JS 文件拦截

这个拦截需要 webRequestBlockingwebRequest权限,因此在 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 加载时序的页面,打乱的时序会影响原来的逻辑。

话糙码不糙。

4.9k 声望
2.2k 粉丝
0 条评论
推荐阅读
奇技淫巧话前端:使用 iframe 实现与父页面跨域隔离的 JavaScript 代码沙箱
假如让你实现一个在线的 JavaScript 代码运行环境,要求用户代码不能对页面进行修改,以避免潜在的安全问题,你会怎么做?使用 with?使用 proxy?OK ,都可以,但是这两种方法都需要关注很多细节,否则用户依旧...

知名喷子1阅读 558

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.8k评论 9

话糙码不糙。

4.9k 声望
2.2k 粉丝
宣传栏