Hi，大家好，欢迎大家参阅由IT猫之家精心制作的JS实战系列教学课程，我是作者叮当猫，在上期教学中，我分享了如何快速寻找拼多多商城加密字段的入口函数，不知大家学会了没有呢？如果您是第一次观看本教学，欢迎前往：网络爬虫频道查阅，本期我们就来探讨下，在日常爬取数据的过程中，当我们遇到请求头部授权加密时，如何处理，我们将以亚航官网作为演示的目标，如大家有不懂的欢迎留言，或加入我们的QQ技术交流群探讨:544185435
首选我们打开亚航的首页，并输入查询条件，我们需要取得它的查询请求，以便于我们分析它的加密字段，这里我们为了更好的演示，采用了Fiddler进行抓包，大家在点击搜索前记得打开Fiddler。
通过简单的分析，我们不难发现，它的请求接口为：https://k.airasia.com/shopprice-pwa/0/0/CAN/KUL/2020-01-14/1/0/0 ，那么我们再看看Fiddler左下角的请求窗口，里面的“Authorization”正是我们要分析的加密字段，我们的首要任务是打开调试工具，寻找加密字段是如何生成的，So，开启调试之旅吧！
像往常一样，我们可以试试最简单粗暴的方式，直接在控制台搜索相关的字段名称，我们可以看到，找出了四个匹配的请求，那么我们逐个点进去看看吧，（对了，最后一个请求，看上去应该是谷歌的统计文件，所以我们没必要看这个请求。）
不知大家发现没，在打开main开头的那个JS文件时，非常的卡，而且需要非常长的时间才能加载出来，在之前分析该加密字段时，该文件大概约3万多行代码，当时要加载它需要20分钟左右，但这次分析时，我发现它约有10万+行的代码量，所以在调试的时候非常非常的卡，导致我录制视频的时候都耽误了许久，这也促使我放弃了通过这种寻找方式，So，其实我今天要分享的是另一种查询方式，当然其实也是要经历这个调试过程的，但相对来说，我们要调试的次数则相对少了许多。
下面，我们将使用chrome extension构建一个函数钩子，进行debugger，使用它，我们将可以快速的找到加密的入口；以节省更多的调试时间；它的实现原理是：监听XMLHttpRequest接口，一旦发现匹配数据则触发debugger强制断下，事实上，在很多诸如Cookie加密、或是header加密里钩子函数非常有效，命中率极高，由于本文的目标是分析授权加密，它属于header加密的一种，所以我们只需监听它的setRequestHeader（可在此查看API属性： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader ）接口即可，它有两个参数，我们只需实现这个方法即可。
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
if(key=='Authorization'){
debugger;
}
return org.apply(this,arguments);
}
上述为最简单的一个JS重写接口案例，我们定义了org函数用以接收源setRequestHeader对象，然后将setRequestHeader赋值成我们自定义的新函数，一旦网页调用setRequestHeader接口，事实上它调用的是我们定义好的接口，那么势必就会触发上述的判断条件，一旦条件成立，且控制台为开启模式时则会自动断下来，我们便可看到它所提交的信息，但事实上，仅仅依靠上述的文件是不行的，我们还需要一个调用者，这个调用者不是我们，而是浏览器，chrome提供了一个非常强大的扩展机制，使得我们可以自定义chrome，而且，扩展执行的空间是与实际的Dom环境隔离的，也就是说网页不知道是谁篡改了接口，并且，我们可以在网页加载之前就重写了自带的函数，因为扩展的执行顺序比网页优先，事实上，我们可以使用扩展开发出各式各样的扩展，但我们这里仅简单的介绍如何编写这个插件，其他的不在本文讨论的范围内。
chrome extension 事实上就是一个目录+文件的结构，其中根目录必须包含manifest.json这个文件，我们如果要调用我们的JS，就必须定义好相关的权限，我们这里仅仅只是调用Content Script脚本，所以仅仅只给了个”tab”的权限，大家如果有其他操作请前往非官方中文API查询， 而manifest.json 文件的内容如下：
{
"name": "Injection",
"version": "2.0",
"description": "RequestHeader钩子",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"Injection.js"
],
"all_frames": true,
"permissions": [
"tabs"
],
"run_at": "document_start"
}
]
}
我们不妨将上面我们写的JS代码保存到一个JS文件中，并命名为：“Injection.js”；请记住，这两个文件都要放在同一个目录中，然后，我们打开chrome，点击设置 -> 点击更多工具 -> 点击扩展插件 进入插件页面，如果我们的浏览器是非开发者模式，则需要点击打开开发者模式，然后点击加载以解压的扩展程序，选择我们刚创建的那个文件夹，（是文件夹不需要点进去）点击确定后添加完成。
添加完成后会像上图红色框框里标识的那样，开启后我们就可以进行后续的捕获操作了。
回到网站这边，请确定浏览器的任务栏中有插件的图标后，点击Search进行航班搜索，如无意外的话呢，它应该就会命中断点并停下来，如果没有断下来，请刷新一遍页面，这里我们是不是就能看到我们要的参数了呢？嗯，就是这么简单，你学会了吗？
扩展延申
今天写的文章有点长，感谢各位看官耐心的看完，事实上上述的JS代码嵌入到扩展中，并不能起到拦截的效果，因为在启动时就已经执行完了，所以我们需要做一点小小的修改。
var code = 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 = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
请将上述代码替换成上面的JS代码，最后再次感谢大家观看本教学，如有任何疑问或建议欢迎留言，本文仅作学术交流之用，如若阁下认为本文侵犯了您的权益，请与我留言，我将配合删除！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
