Hi，大家好滓走，歡迎大家參閱由IT貓之家精心制作的JS實(shí)戰(zhàn)系列教學(xué)課程垦江，我是作者叮當(dāng)貓，在上期教學(xué)中搅方，我分享了如何快速尋找拼多多商城加密字段的入口函數(shù)比吭，不知大家學(xué)會了沒有呢？如果您是第一次觀看本教學(xué)姨涡，歡迎前往：網(wǎng)絡(luò)爬蟲頻道查閱衩藤，本期我們就來探討下，在日常爬取數(shù)據(jù)的過程中涛漂，當(dāng)我們遇到請求頭部授權(quán)加密時赏表，如何處理检诗，我們將以亞航官網(wǎng)作為演示的目標(biāo)，如大家有不懂的歡迎留言瓢剿，或加入我們的QQ技術(shù)交流群探討:544185435
首選我們打開亞航的首頁逢慌，并輸入查詢條件，我們需要取得它的查詢請求间狂，以便于我們分析它的加密字段攻泼，這里我們?yōu)榱烁玫难菔荆捎昧薋iddler進(jìn)行抓包前标，大家在點(diǎn)擊搜索前記得打開Fiddler坠韩。
通過簡單的分析，我們不難發(fā)現(xiàn)炼列，它的請求接口為：https://k.airasia.com/shopprice-pwa/0/0/CAN/KUL/2020-01-14/1/0/0?，那么我們再看看Fiddler左下角的請求窗口音比，里面的“Authorization”正是我們要分析的加密字段俭尖，我們的首要任務(wù)是打開調(diào)試工具，尋找加密字段是如何生成的洞翩，So稽犁，開啟調(diào)試之旅吧！
像往常一樣骚亿，我們可以試試最簡單粗暴的方式已亥，直接在控制臺搜索相關(guān)的字段名稱，我們可以看到来屠，找出了四個匹配的請求虑椎，那么我們逐個點(diǎn)進(jìn)去看看吧，（對了俱笛，最后一個請求捆姜，看上去應(yīng)該是谷歌的統(tǒng)計(jì)文件，所以我們沒必要看這個請求迎膜。）
不知大家發(fā)現(xiàn)沒泥技，在打開main開頭的那個JS文件時，非常的卡磕仅，而且需要非常長的時間才能加載出來珊豹，在之前分析該加密字段時，該文件大概約3萬多行代碼榕订，當(dāng)時要加載它需要20分鐘左右店茶，但這次分析時，我發(fā)現(xiàn)它約有10萬+行的代碼量卸亮，所以在調(diào)試的時候非常非常的卡忽妒，導(dǎo)致我錄制視頻的時候都耽誤了許久，這也促使我放棄了通過這種尋找方式，So段直，其實(shí)我今天要分享的是另一種查詢方式吃溅，當(dāng)然其實(shí)也是要經(jīng)歷這個調(diào)試過程的，但相對來說鸯檬，我們要調(diào)試的次數(shù)則相對少了許多决侈。
下面，我們將使用chrome extension構(gòu)建一個函數(shù)鉤子喧务，進(jìn)行debugger赖歌，使用它，我們將可以快速的找到加密的入口功茴；以節(jié)省更多的調(diào)試時間庐冯；它的實(shí)現(xiàn)原理是：監(jiān)聽XMLHttpRequest接口，一旦發(fā)現(xiàn)匹配數(shù)據(jù)則觸發(fā)debugger強(qiáng)制斷下坎穿，事實(shí)上展父，在很多諸如Cookie加密、或是header加密里鉤子函數(shù)非常有效玲昧，命中率極高栖茉，由于本文的目標(biāo)是分析授權(quán)加密，它屬于header加密的一種孵延，所以我們只需監(jiān)聽它的setRequestHeader（可在此查看API屬性：?https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader?）接口即可吕漂，它有兩個參數(shù)，我們只需實(shí)現(xiàn)這個方法即可尘应。
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
? ? if(key=='Authorization'){
debugger;
? ? }
? ? return org.apply(this,arguments);
}
上述為最簡單的一個JS重寫接口案例惶凝，我們定義了org函數(shù)用以接收源setRequestHeader對象，然后將setRequestHeader賦值成我們自定義的新函數(shù)菩收，一旦網(wǎng)頁調(diào)用setRequestHeader接口梨睁，事實(shí)上它調(diào)用的是我們定義好的接口，那么勢必就會觸發(fā)上述的判斷條件娜饵，一旦條件成立坡贺，且控制臺為開啟模式時則會自動斷下來，我們便可看到它所提交的信息箱舞，但事實(shí)上遍坟，僅僅依靠上述的文件是不行的，我們還需要一個調(diào)用者晴股，這個調(diào)用者不是我們愿伴，而是瀏覽器，chrome提供了一個非常強(qiáng)大的擴(kuò)展機(jī)制电湘，使得我們可以自定義chrome隔节，而且鹅经，擴(kuò)展執(zhí)行的空間是與實(shí)際的Dom環(huán)境隔離的，也就是說網(wǎng)頁不知道是誰篡改了接口怎诫，并且瘾晃，我們可以在網(wǎng)頁加載之前就重寫了自帶的函數(shù)，因?yàn)閿U(kuò)展的執(zhí)行順序比網(wǎng)頁優(yōu)先幻妓，事實(shí)上蹦误，我們可以使用擴(kuò)展開發(fā)出各式各樣的擴(kuò)展，但我們這里僅簡單的介紹如何編寫這個插件肉津，其他的不在本文討論的范圍內(nèi)强胰。
chrome extension 事實(shí)上就是一個目錄+文件的結(jié)構(gòu)，其中根目錄必須包含manifest.json這個文件妹沙，我們?nèi)绻{(diào)用我們的JS偶洋，就必須定義好相關(guān)的權(quán)限，我們這里僅僅只是調(diào)用Content Script腳本初烘，所以僅僅只給了個”tab”的權(quán)限涡真，大家如果有其他操作請前往非官方中文API查詢， 而manifest.json 文件的內(nèi)容如下：
{
"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杏节，點(diǎn)擊設(shè)置 -> 點(diǎn)擊更多工具 -> 點(diǎn)擊擴(kuò)展插件 進(jìn)入插件頁面唬渗，如果我們的瀏覽器是非開發(fā)者模式，則需要點(diǎn)擊打開開發(fā)者模式奋渔，然后點(diǎn)擊加載以解壓的擴(kuò)展程序镊逝，選擇我們剛創(chuàng)建的那個文件夾，（是文件夾不需要點(diǎn)進(jìn)去）點(diǎn)擊確定后添加完成嫉鲸。
添加完成后會像上圖紅色框框里標(biāo)識的那樣撑蒜，開啟后我們就可以進(jìn)行后續(xù)的捕獲操作了。
回到網(wǎng)站這邊玄渗，請確定瀏覽器的任務(wù)欄中有插件的圖標(biāo)后座菠，點(diǎn)擊Search進(jìn)行航班搜索，如無意外的話呢藤树，它應(yīng)該就會命中斷點(diǎn)并停下來浴滴，如果沒有斷下來，請刷新一遍頁面岁钓，這里我們是不是就能看到我們要的參數(shù)了呢升略？嗯微王，就是這么簡單，你學(xué)會了嗎品嚣？
So炕倘，后面的操作就跟之前文章的一樣啦，慢慢的去分析就能找到入口囖腰根，有一點(diǎn)值得注意的是激才，由于亞航這次更新后加密文件行數(shù)高達(dá)10萬+行，這使得我們調(diào)試起來非常的麻煩额嘿，因?yàn)榇蟛糠謺r間都浪費(fèi)在等待加載過程中了瘸恼，這里我給大家提供一下最關(guān)鍵的入口關(guān)鍵詞：ssrDataTkn ，事實(shí)上册养，我們直接搜索這個“ssrDataTkn”就可以很快找到入口了东帅，這是為了減少大家調(diào)試的時間，其實(shí)在往下找我們很很快就能找到球拦，只是調(diào)試可能要很久靠闭，而實(shí)際上入口函數(shù)是在main開頭的那個請求里面，因?yàn)榧虞d非常的緩慢坎炼，我這里就直接將入口函數(shù)貼上來啦愧膀，它位于78341行的：processSSRData 函數(shù)，參數(shù)是從接口：https://k.airasia.com/ssr/getssrdata?返回的數(shù)據(jù)中提取谣光，詳細(xì)操作可以前往Youtube檩淋、Youku、B站?上觀看我們精心制作的視頻萄金！
擴(kuò)展延申
今天寫的文章有點(diǎn)長蟀悦，感謝各位看官耐心的看完，事實(shí)上上述的JS代碼嵌入到擴(kuò)展中氧敢，并不能起到攔截的效果日戈，因?yàn)樵趩訒r就已經(jīng)執(zhí)行完了，所以我們需要做一點(diǎn)小小的修改孙乖。
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代碼浙炼，最后再次感謝大家觀看本教學(xué)，如有任何疑問或建議歡迎留言的圆，本文僅作學(xué)術(shù)交流之用鼓拧，如若閣下認(rèn)為本文侵犯了您的權(quán)益，請與我留言越妈，我將配合刪除季俩！
