【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析

2024-01-07 01:50
文章标签 分析 实战 参数 加密 js 浏览器 插件 逆向 hook 百例 亚航

本文主要是介绍【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关注微信公众号：K哥爬虫，QQ交流群：808574309，持续分享爬虫进阶、JS/安卓逆向等技术干货！

声明

本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！

逆向目标

  • 目标：亚航 airasia 航班状态查询，请求头 Authorization 参数
  • 主页：aHR0cHM6Ly93d3cuYWlyYXNpYS5jb20vZmxpZ2h0c3RhdHVzLw==
  • 接口：aHR0cHM6Ly9rLmFwaWFpcmFzaWEuY29tL2ZsaWdodHN0YXR1cy9zdGF0dXMvb2QvdjMv
  • 逆向参数：
    • Request Headers：authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI......

逆向过程

抓包分析

来到航班状态查询页面，随便输入出发地和目的地，点击查找航班，例如查询澳门到吉隆坡的航班，MFM 和 KUL 分别是澳门和吉隆坡国际机场的代码，查询接口由最基本的 URL + 机场代码 + 日期组成，类似于：https://xxxxxxxxxx/MFM/KUL/28/09/2021 ，其中请求头 Request Headers 里有个 authorization 参数，通过观察发现，不管是清除 cookie 还是更换浏览器，此参数的值是一直不变的，经过测试，直接复制该参数到代码里也是可行的，但本次我们的目的是通过编写浏览器插件来 Hook 这个参数，找到它生成的地方。

有关 Hook 的详细知识，在 K 哥前期的文章有详细介绍：JS 逆向之 Hook，吃着火锅唱着歌，突然就被麻匪劫了！

01.png

浏览器插件 Hook

浏览器插件事实上叫做浏览器扩展（extensions），它能够增强浏览器功能，比如屏蔽广告、管理浏览器代理、更改浏览器外观等。

既然是通过编写浏览器插件的方式进行 Hook，那么首先我们肯定是要简单了解一下如何编写浏览器插件了，编写浏览器插件也有对应的规范，在以前，不同浏览器的插件编写方式都不太一样，到现在基本上都和 Google Chrome 插件的编写方式一样了，Google Chrome 的插件除了能运行在 Chrome 浏览器之外，还可以运行在所有 webkit 内核的国产浏览器，比如 360 极速浏览器、360 安全浏览器、搜狗浏览器、QQ 浏览器等等，另外，Firefox 火狐浏览器也有很多人使用，火狐浏览器插件的开发方式变化了很多次，但是从 2017 年 11 月底开始，插件必须使用 WebExtensions APIs 进行构建，其目的也是为了和其他浏览器统一，一般的 Google Chrome 插件也能直接运行在火狐浏览器上，但是火狐浏览器插件需要要经过 Mozilla 签名后才能安装，否则只能临时调试，重启浏览器后插件就没有了，这一点较为不便。

一个浏览器插件的开发说简单也简单，说复杂也复杂，不过对于我们做爬虫逆向的开发人员来说，我们主要是利用插件对代码进行 Hook，我们只需要知道一个插件是由一个 manifest.json 和一个 JavaScript 脚本文件组成的就够了，接下来 K 哥以本案例中请求头的 authorization 参数为例，带领大家开发一个 Hook 插件。当然，如果你想深入研究浏览器插件的开发，可以参考 Google Chrome 扩展文档和 Firefox Browser 扩展文档。

按照 Google Chrome 插件的开发规范，首先新建一个文件夹，该文件夹下包含一个 manifest.json 文件和一个 JS Hook 脚本，当然，如果你想为你的插件配置一个图标的话，也可以将图标放到该文件夹下，图标格式官方建议 PNG，也可以是 WebKit 支持的任何格式，包括 BMP、GIF、ICO 和 JPEG 等，注意：manifest.json 文件名不可更改！正常的插件目录类似如下结构：

JavaScript Hook├─ manifest.json        // 配置文件，文件名不可更改├─ icons.png            // 图标└─ javascript_hook.js   // Hook 脚本，文件名顺便取
manifest.json

manifest.json 是一个 Chrome 插件中最重要也是必不可少的文件，它用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version 这 3 个参数是必不可少的，本案例中，manifest.json 文件配置如下：（完整配置参考 Chrome manifest file format）

{"name": "JavaScript Hook",          // 插件名称"version": "1.0",                   // 插件版本"description": "JavaScript Hook",   // 插件描述"manifest_version": 2,              // 清单版本，必须是2或者3"icons": {                          // 插件图标"16": "/icons.png",             // 图标路径，插件图标不同尺寸也可以是同一张图"48": "/icons.png","128": "/icons.png"},"content_scripts": [{"matches": ["<all_urls>"],      // 匹配所有地址"js": ["javascript_hook.js"],   // 注入的代码文件名和路径，如果有多个，则依次注入"all_frames": true,             // 允许将内容脚本嵌入页面的所有框架中"permissions": ["tabs"],        // 权限申请，tabs 表示标签"run_at": "document_start"      // 代码注入的时间}]
}

这里需要注意以下几点：

  • manifest_version：配置清单版本，目前支持 2 和 3，2 将会在将来被逐步淘汰，将来也可能推出 4 或者更高版本。可以在官网查看 Manifest V2 和 Manifest V3 的区别，3 有更高的隐私安全要求，这里推荐使用 2。
  • content_scripts：Chrome 插件中向页面注入脚本的一种形式，包括地址匹配（支持正则表达式），要注入的 JS、CSS 脚本，代码注入的时间（建议 document_start，网页开始加载时就注入）等。
javascript_hook.js

javascript_hook.js 文件里就是 Hook 代码了：

var hook = function () {var org = window.XMLHttpRequest.prototype.setRequestHeader;window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {if (key == 'Authorization') {debugger;}return org.apply(this, arguments);}
}
var script = document.createElement('script');
script.textContent = '(' + hook + ')()';
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

XMLHttpRequest.setRequestHeader() 是设置 HTTP 请求头部的方法，定义了一个变量 org 来保存原始方法，window.XMLHttpRequest.prototype.setRequestHeader 这里有个原型对象 prototype，所有的 JavaScript 对象都会从一个 prototype 原型对象中继承属性和方法，具体可以参考菜鸟教程 JavaScript prototype 的介绍。一旦程序在设置请求头中的 Authorization 时，就会进入我们的 Hook 代码，通过 debugger 断下，最后依然将所有参数返回给 org，也就是 XMLHttpRequest.setRequestHeader() 这个原始方法，保证数据正常传输。然后创建 script 标签，script 标签内容是将 Hook 函数变成 IIFE 自执行函数，然后将其插入到网页中。

到此我们浏览器插件就编写完成了，接下来介绍如何在 Google Chrome 和 Firefox Browser 中使用。

Google Chrome

在浏览器地址栏输入 chrome://extensions 或者依次点击右上角【自定义及控制 Google Chrome】—>【更多工具】—>【扩展程序】，进入扩展程序页面，再依次选择开启【开发者模式】—>【加载已解压的扩展程序】，选择整个 Hook 插件文件夹（文件夹里应包含 manifest.json、javascript_hook.js 和图标文件），如下图所示：

02.png

Firefox Browser

火狐浏览器不能直接安装未经过 Mozilla 签名认证的插件，只能通过调试附加组件的方式进行安装。插件的格式必须是 .xpi、.jar、.zip 的，所以需要我们将 manifest.json、javascript_hook.js 和图标文件一起打包，打包需要注意不要包含顶层目录，直接全选右键压缩即可，否则在安装时会提示 does not contain a valid manifest。

在浏览器地址栏输入 about:addons 或者依次点击右上角【打开应用程序菜单】—>【扩展和主题】，也可以直接使用快捷键 Ctrl + Shift + A 来到扩展页面，在管理您的扩展目录旁有个设置按钮，点击选择【调试附加组件】，在临时扩展项目下，选择【临时载入附加组件】，选择 Hook 插件的压缩包即可。

也可以直接在浏览器地址栏输入 about:debugging#/runtime/this-firefox，直接进入到临时扩展页面，如下图所示：

03.png

自此，浏览器 Hook 插件我们就开发安装完毕了，重新来到航班查询页面，随便输入出发地和目的地，点击查找航班，就可以看到此时已经成功断下：

04.png

TamperMonkey 插件 Hook

前面我们已经介绍了如何自己编写一个浏览器插件，但是不同浏览器插件的编写始终是大同小异的，有可能你编写的某个插件在其他浏览器上运行不了，而 TamperMonkey 就可以帮助我们解决这个问题，TamperMonkey 俗称油猴插件，它本身就是一个浏览器扩展，是最为流行的用户脚本管理器，基本上支持所有带有扩展功能的浏览器，实现了脚本的一次编写，所有平台都能运行，用户可以在 GreasyFork、OpenUserJS 等平台直接获取别人发布的脚本，功能众多且强大，同样的，我们也可以利用 TamperMonkey 来实现 Hook。

TamperMonkey 可以直接在各大浏览器扩展商店里面安装，也可以去 TamperMonkey 官网进行安装，安装过程这里不再赘述。

安装完成后点击图标，添加新脚本，或者点击管理面板，再点击加号新建脚本，写入以下 Hook 代码：

// ==UserScript==
// @name         JavaScript Hook
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  JavaScript Hook 脚本
// @author       K哥爬虫
// @include      *://*airasia.com/*
// @icon         https://profile.csdnimg.cn/1/B/8/3_kdl_csdn
// @grant        none
// @run-at       document-start
// ==/UserScript==(function () {'use strict';var org = window.XMLHttpRequest.prototype.setRequestHeader;window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {if (key == 'Authorization') {debugger;}return org.apply(this, arguments);};
})();

05.png

整个代码 JavaScript 部分是个 IIFE 立即执行函数，具体含义就不解释了，前面浏览器插件开发时已经讲过，重要的是上面几行注释，千万不要以为这只是简单的注释，可有可无，在 TamperMonkey 中，可以将这部分视为基本的配置选项，各项都有其具体含义，完整的配置选项参考 TamperMonkey 官方文档，常见配置项如下表所示（其中需要特别注意 @match、@include 和 @run-at 选项）：

选项含义
@name脚本的名称
@namespace命名空间，用来区分相同名称的脚本，一般写作者名字或者网址就可以
@version脚本版本，油猴脚本的更新会读取这个版本号
@description描述这个脚本是干什么用的
@author编写这个脚本的作者的名字
@match从字符串的起始位置匹配正则表达式，只有匹配的网址才会执行对应的脚本，例如 * 匹配所有，https://www.baidu.com/* 匹配百度等，可以参考 Python re 模块里面的 re.match() 方法，允许多个实例
@include和 @match 类似，只有匹配的网址才会执行对应的脚本，但是 @include 不会从字符串起始位置匹配，例如 *://*baidu.com/* 匹配百度，具体区别可以参考 TamperMonkey 官方文档
@icon脚本的 icon 图标
@grant指定脚本运行所需权限，如果脚本拥有相应的权限，就可以调用油猴扩展提供的 API 与浏览器进行交互。如果设置为 none 的话，则不使用沙箱环境，脚本会直接运行在网页的环境中，这时候无法使用大部分油猴扩展的 API。如果不指定的话，油猴会默认添加几个最常用的 API
@require如果脚本依赖其他 JS 库的话，可以使用 require 指令导入，在运行脚本之前先加载其它库
@run-at脚本注入时机，该选项是能不能 hook 到的关键，有五个值可选：document-start：网页开始时；document-body：body出现时；document-end：载入时或者之后执行；document-idle：载入完成后执行，默认选项；context-menu：在浏览器上下文菜单中单击该脚本时，一般将其设置为 document-start

重新来到航班查询页面，启用 TamperMonkey 脚本，如果配置正确的话，就可以看到我们编写的 Hook 脚本已开启，随便输入出发地和目的地，点击查找航班，就可以看到此时已经成功断下：

06.png

参数逆向

不管你是使用浏览器插件还是 TamperMonkey 进行 Hook，此时 Hook 到的是设置请求头 Authorization 的地方，也就是说 Authorization 的值是产生肯定经过了之前的某个函数或者方法，那么我们跟进开发者工具的 Call Stack 调用栈，就一定能够找到这个方法，跟调用栈是一个考验耐心的过程，花费时间也比较多。

通常情况下，我们是挨个函数查看其传递的参数有没有包含我们目标参数，如果上一个函数里没有而下一个函数里出现了，那么大概率加密过程就在这两个函数之间，进入上一个函数再进行单步调试，一般就能找到加密代码，在本案例中，我们跟到 t.getData 函数埋下断点进行单步调试，可以看到其实后面在反复调用 t.subscribe 和 t.call，之所以不在这两个函数处埋下断点，是因为循环过多不好调试，而且 t.getData 通过名称判断也比较可疑。

07.png

重新点击登陆，来到我们刚刚埋下断点的地方，F11 或者点击向下箭头，进入函数内部进行单步调试，调试大约 7 步后，来到一个 t.getHttpHeader 函数，可以看到 Authorization 的值就是 "Bearer " + r.accessToken，我们在控制台打印 r.accessToken 可以看到就是我们想要的值，如下图所示：

08.png

那么重点是这个 r.accessToken，如果你尝试直接往上找，你会发现找了很多行也没有找到，直接搜索关键字 accessToken，可以发现在 zUnb 对象里面是直接定义死了的，直接拿来用即可，如下图所示：

09.png

关于出发地、目的地的各个地方的代码，是通过 JSON 传递过来的，很容易找到，可根据实际需求灵活处理，如下图所示：

10.png

这个案例本身不难，直接搜索还能更快定位参数位置，但是本案例重点在于如何使用浏览器插件进行 Hook 操作，这对于某些无法经过搜索得到的参数，或者搜索结果太多难以定位的情况来说，是一个很好的解决方法。

完整代码

GitHub 关注 K 哥爬虫，持续分享爬虫相关代码！欢迎 star ！https://github.com/kgepachong/

以下只演示部分关键代码，不能直接运行！ 完整代码仓库地址：https://github.com/kgepachong/crawler/

Python 示例代码

#!/usr/bin/env python3
# -*- coding: utf-8 -*-import requestsstatus_url = '脱敏处理，完整代码关注 GitHub：https://github.com/kgepachong/crawler'def get_flight_status(departure, destination, date):headers = {'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36','authorization': '脱敏处理，完整代码关注 GitHub：https://github.com/kgepachong/crawler'}complete_url = status_url + departure + '/' + destination + '/' + dateresponse = requests.get(url=complete_url, headers=headers)print(response.text)if __name__ == '__main__':departure = input('请输入出发地代码：')destination = input('请输入目的地代码：')date = input('请输入日期（例如：29/09/2021）：')# departure = 'MFM'# destination = 'KUL'# date = '29/09/2021'get_flight_status(departure, destination, date)

这篇关于【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/578346。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

​ 面壁智能 在 AI 的世界里，总有那么几个时刻让人惊叹不已。面壁智能推出的 MiniCPM 3.0，这个仅有4B参数的"小钢炮"，正在以惊人的实力挑战着 GPT-3.5 这个曾经的AI巨人。 MiniCPM 3.0 MiniCPM 3.0 MiniCPM 3.0 目前的主要功能有： 长上下文功能：原生支持 32k 上下文长度，性能完美。我们引入了
阅读更多...
滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE啦，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好习惯，别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏，专业攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎大家关注&&收藏！持续更新中，up！up！up！！ 环境说明：Windows 10
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2