用Chrome除錯JavaScript,找到js加密演算法的程式碼

veelion發表於2019-05-12

谷歌的Chrome瀏覽器有個開發工具(DevTools),可以幫助前端開發者完成除錯JavaScript程式碼等工作。這個工具非常棒,也是爬蟲開發者的有力工具,對於研究複雜網站(通過大量的js混淆、加密資料及其訪問介面)的爬取很有幫助。

今天,我們就來講講,如何利用Chrome除錯JavaScript的功能來找到js加密相關的程式碼。

為了防止爬蟲,網站開發者們也是費盡了心思:

首先,他們使用JavaScript把一些資料介面通過多次請求、加密生成token等方式來生成資料介面的訪問URL;

然後,他們又把這些JavaScript壓縮、混淆使得它們晦澀難懂,或者分成很多不同的js檔案,讓你要找到某些關鍵的程式碼如同大海撈針。

最後,就把一部分爬蟲開發者拒之門外了。

不服輸的程式設計師,利用有力的工具,加上不服輸的精神就開始了鑽研之旅。

接下來,我們鑽研一下如何通過Chrome除錯js程式碼來找到Google中文翻譯的請求介面。

下面是https://translate.google.cn/ 的截圖,這個網站在國內可以無障礙訪問。

谷歌翻譯的截圖

在左邊輸入“Python”,右邊立馬出現“蟒蛇”,而整個網頁並沒有重新整理,這是通過一個ajax請求實現的翻譯。

那麼問題來了:這個ajax請求的URL是什麼?

通過Chrome的開發工具(按F12調出)的“Networks”可以看到,請求的是:

https://translate.google.cn/translate_a/single?client=webapp&sl=auto&tl=zh-CN&hl=zh-CN&dt=at&dt=bd&dt=ex&dt=ld&dt=md&dt=qca&dt=rw&dt=rm&dt=ss&dt=t&otf=1&ssel=0&tsel=0&kc=1&tk=606016.1025355&q=Python

這個URL裡面有個引數: tk=606016.1025355,觀察發現,這個引數的值每次請求既然還不一樣!

這個引數是如何生成的呢?為了能使用這ajax翻譯介面,我們得需要好好鑽研一番。

第一步:觀察網頁載入了哪些js檔案,猜猜哪個檔案可能包含tk生成的程式碼。

在Networks裡面看看都載入了哪些js檔案,可以通過點選 Filter 右邊的“js”按鈕只顯示js檔案。tips:按住Ctrl(非Mac)或Command(Mac)來選擇多個過濾器。

chrome檢視js的載入

觀察它們的名字,我猜是“translate_m_zh-CN.js”。哈哈,猜對了!別問問是怎麼猜的,就是看名字憑感覺。

開啟這個js一看,誒呀媽呀,密密麻麻一大片,完全沒法讀!!!(多虧不能讀,如果能清晰的讀起來,就沒有後面的故事了)

第二步:瞭解“Sources”工具

切換到開發工具的“Sources”,可以看到如下視窗:

chrome除錯工具原始碼欄

(1)上部左邊的“Page”是各種資原始檔的路徑,js就在這裡找。

(2)上部右邊是顯示程式碼的視窗,可以開啟多個程式碼檔案,每個檔案一個標籤頁,標籤頁標題顯示檔名稱。當開啟一個被壓縮過的js檔案時,它會提醒“Pretty-print this minified file?”(要格式化程式碼嗎?),點選後面的“more”可以看到如何操作,也就是點選內碼表下邊的花括號“{}”即可。可以點選程式碼左邊的行號設定斷點

(3)下部左邊是除錯視窗,比較重要的有:

XHR/fetch Breakpoints : 在請求某個URL時設為斷點;

Call Stack: 執行到斷點時,函式呼叫的棧,從上到下按離斷點近遠排序;

(4)下部右邊是執行到斷點時,“Scope”顯示區域性變數和全域性變數,“Watch”可以新增要觀察的變數。

上面這4部分的佈局會隨著整個devtools視窗的寬窄而變化,把devtools視窗拉寬,它們可能會排成一排。

 

第三步:除錯JavaScript,探尋關鍵程式碼

我們的目的是要找到“tk”這個變數的生成方法,從而可以使用ajax翻譯介面。前面我們已經探討出,tk是ajax介面(即前面列的那個包含“/translate_a/single”的URL),那我們就設定斷點,在訪問這個URL前停止。具體做法如下:

(1)設定XHR/fetch Breakpoints斷點,點選它後面的加號“+”,把這個URL新增上,問號後面的引數就不用填了。

(2)在Google翻譯的輸入框隨便輸入個單詞,比如“Python”,然後網頁就變灰(鎖死),上方出現“Paused in debugger”,如下圖:

chrome除錯到斷點

這時候,我們觀察程式目前的狀態:

(a)原始碼那裡,停止在”this.xa.send(a)”;

(b)“Call Stack”顯示了呼叫關係,最上面的就是原始碼那裡的send函式。

小技巧:把devtools拉寬,讓Call Stack和程式碼兩個視窗並列,更容易檢視。

從上往下依次點選Call Stack的每一行,每次點選都會顯示對應的程式碼片段。當點選到第三個時發現似乎找到了答案:

chrome除錯程式碼

(注意:上面截圖的行數和變數名稱有可能和你看到的不一樣)

棕色背景列出了變數的當前值,可以看到8332行的b包含了tk引數,而這個引數明顯是來自c,再往上到8329行找到了c來自函式Uo(),滑鼠放到Uo上面停一會兒,就可以跳到它的定義處,也就是8323行,同樣滑鼠懸停在$n()函式並跳到它的定義:

chrome除錯程式碼跳轉

觀察這個函式,這是一段演算法,請求返回的字串就是tk值那樣的形如“a.b”的一串數字,那麼它就是我們要找的tk值的生成演算法。至此,我們就通過Chrome除錯JavaScript找到了js中我們想要的程式碼。

要弄明白這段演算法,你就要懂得JavaScript語言,及時不會js如果你會Python,在搜尋引擎的幫助下也可以很快弄明白它並用Python來實現。

再來看看這段程式碼,它是如何讓人“看不懂”它的,也就是下面的“不好好寫程式大法”,掌握此法有助於你破解它,撥開迷霧見真相。

擴充套件:如何不好好寫程式

(1)String.fromCharCode()

這個函式就是Python的chr(),把數字變成字母。看7504行,函式Xn的引數是個字母,不直接寫偏偏要通過函式轉化一下。真有一種脫褲子放屁的趕腳。

(2)閒著沒事兒就寫個函式

在看那個函式Xn的實現:

無聊又無用的函式

真是閒的蛋疼!

(3)eval函式

除了上面兩個方法,eval也常用。這個JavaScript的eval和Python的eval一樣。

 

寫爬蟲避免不了和複雜的網頁(網站)打交道,它們以各種方法“防”,爬蟲以各種方法“攻”。攻防之間可以說是道高一尺魔高一丈,來回較量。本文通過Chrome除錯JavaScript是一種“攻”的方法,還可以使用抓包工具(比如 Charles)進行更復雜的分析,Charles提供了更豐富的搜尋功能等。這兩種方法基本上算是一種策略,另外比較省事的就是使用Selenium的Chrome driver,開發起來簡單很多,但執行效率會低一些,適合抓取頻次低(有些封得你沒辦法頻次高)的網站。

延伸閱讀:《為爬蟲獲取登入cookies: 使用Charles和requests模擬微博登入》

猿人學banner宣傳圖

我的公眾號:猿人學 Python 上會分享更多心得體會,敬請關注。

***版權申明:若沒有特殊說明,文章皆是猿人學 yuanrenxue.com 原創,沒有猿人學授權,請勿以任何形式轉載。***

相關文章