爬蟲的技術(shù)最難的部分之一就是「JS 破解」，但網(wǎng)上關(guān)于 JS 破解的資料都非常的零散,，甚至沒有一個資料說 JS 破解要如何從零開始學習,。最近癡海也在學習這塊的內(nèi)容，有一些自己的收獲,。所以我把自身學習的過程,，遇到的坑點都寫篇文章，完全的由零基礎(chǔ)開始,，一步步的帶大家學習爬蟲高階的部分,。

今天是 JS 破解的第一篇「JS 破解入門」。

現(xiàn)在越來越多的網(wǎng)站把數(shù)據(jù)的交互過程寫在 JS 代碼里，也就是說如果你只單單看前端網(wǎng)頁的源碼,，你是無法得到具體的數(shù)據(jù),，你只能看到一大堆調(diào)用 JS 的前端代碼。

所以對于這類的網(wǎng)站,，我們需要進入到具體的 JS 源碼,，理清關(guān)鍵代碼，從而進行破解獲取到我們想要的數(shù)據(jù),。

1 JS 基礎(chǔ)語法學習

你想破解 JS 的網(wǎng)站,，首先你肯定需要懂得最基礎(chǔ)的 JS 語法。這是破解的基礎(chǔ),，如果你連 JS 代碼都無法看懂,，那你就不想破解的事了。

你只要有點編程基礎(chǔ),，學習過一門編程語言,，JS 的學習還是相對輕松，一個星期左右的時間就可以把 JS 所有的基礎(chǔ)內(nèi)容,，全部學習一遍,。如果你沒有編程基礎(chǔ)的話，JS 基礎(chǔ)的內(nèi)容學習起來也不是非常難,，最多一個月的時間也能全部學完,。

這里給大家推薦一個 JS 編程基礎(chǔ)學習網(wǎng)站：

https://www.runoob.com/js/js-tutorial.html

左邊是 JS 的目錄，大家跟著這個目錄學習下去就好,。我之前學習 JS 基礎(chǔ)的時候,，就是跟著這個目錄進行學習的。

2 前端 JS 破解原理

普通的網(wǎng)站數(shù)據(jù)的顯示都是在網(wǎng)站的源碼中就可看到,，比如拿我自己的個人網(wǎng)站來舉例,。

這類的網(wǎng)站你只要發(fā)個 requests 的請求，服務(wù)器就會把帶有數(shù)據(jù)的源碼返回給你,，你就可以通過一些解析庫進行解析了,。

但對于 JS 進行數(shù)據(jù)加密傳輸?shù)木W(wǎng)站，它就不同,，比如下面這個網(wǎng)站：

在控制面板可以看到獲取到的數(shù)據(jù)是字母串,，跟前端顯示的數(shù)據(jù)完全不同，這就說明網(wǎng)站的數(shù)據(jù)是被加密了,。

新手在爬這類網(wǎng)站的時候,，看到這里可能就會感到無奈。但大家不妨這樣想,，前端顯示的數(shù)據(jù)是正常,，所以后臺一定會有某個地方對加密過的數(shù)據(jù)進行解密，而我們需要做的就是找到這個段解密的代碼，按照它的邏輯進行傳參就可以了,。這也是我們破解 JS 代碼的原理所在,。

3 工具的使用

講完了原理之后，我先給大家介紹幾個常用的工具,。

3.1 谷歌瀏覽器的開發(fā)者工具

學爬蟲一定要會使用谷歌瀏覽器的開發(fā)者工具,，按谷歌瀏覽器按 F12 就可以彈出具體的頁面。

在開發(fā)者頁面中你可以看到網(wǎng)頁的源碼「Elementes」,、控制臺「Console」,、網(wǎng)頁源碼「Sources」、網(wǎng)絡(luò)請求面板「Network」等等,。

詳細的教程可以去看下官方的文檔：

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn

3.2 Nodejs 安裝

因為涉及 JS 的調(diào)試驗證,，所以除了 Python 環(huán)境外，你還需要Nodejs（ JS 的運行環(huán)境）和 WebStorm（IDE）,。

Nodejs 去官網(wǎng)下載安裝包后直接一鍵安裝即可,，安裝完畢后去控制臺運行 node -- version，如果出現(xiàn)版本號即代表安裝成功,。

WebStorm 安裝完后需要激活,，激活教程網(wǎng)上很多,，大家自行搜索,。它是 Jet Brains 的產(chǎn)品（和 PyCharm 是同一家公司），所以使用方式與 PyCharm 很類似,。

4 實戰(zhàn)練習

接下來就帶大家進行實戰(zhàn)練習,，這次我們爬取的對象是「企名片」網(wǎng)站。

https://www./finosda/project/pinvestment

4.1 網(wǎng)站分析

首先打開鏈接,，點擊 F12 查看網(wǎng)絡(luò)請求面板,。在 pinvestment 響應(yīng)里可以看到是一個 JS 調(diào)用的代碼，并沒有我們想要的 HTML 代碼,，顯示網(wǎng)頁是由 JS 動態(tài)生成,。

在點擊 XHR，我們就可以看到一個 productListVip,，這里面有個 encrypt_data 數(shù)據(jù),。參數(shù)內(nèi)容像是一串 Base64 字符。既然網(wǎng)站對這個參數(shù)做了加密,，說明它不想被爬取,，所以可以做個假設(shè)：我們的目標數(shù)據(jù)就是 encrypt_data 參數(shù)里的內(nèi)容。

接下來我們就要破解 encrypt_data,。

4.2 斷點調(diào)試 JS 源碼

還記得之前說過的 JS 破解原理嗎,？有加密的地方一定會有破解的地方。所以我們需要進入源碼里，找出給 encrypt_data 進行解密的代碼,。

打開開發(fā)者工具,，點擊 Sources 我們在 js 文件夾中就可以找到網(wǎng)頁的 JS 代碼，在右側(cè)我們就可以進行斷點調(diào)試,。

那我們我們怎么找到斷點的地方呢,？

在斷點調(diào)試攔里有個 XHR/fetch Breakpoints 選擇，而我們含有 encrypt_data 加密的參數(shù)正是一個 XHR 請求,，所以我們點擊?號,，把 productlistVip 請求 url 添加進去。

隨后我們重新刷新網(wǎng)頁,，就可以一步步的調(diào)試找到可疑的地方,。

小技巧：

1 花括號進行美化

點擊左下角的花括號，可以把亂序的 JS 代碼,，變成有序的代碼,，看起來就非常的方便。

2 控制臺輸出執(zhí)行結(jié)果

如果你找到比較可疑的點,，你可以選中可疑的代碼段,，點擊右鍵有個 Evaluate selected 選項，它就會在控制臺輸出執(zhí)行的結(jié)果,。

其實上圖中執(zhí)行 Object(d.a)(e.encrypt_data) 返回的內(nèi)容就是我們需要的數(shù)據(jù)了,。進到這個函數(shù)體里邊，就能找到解密函數(shù)：其實上圖中執(zhí)行 Object(d.a)(e.encrypt_data) 返回的內(nèi)容就是我們需要的數(shù)據(jù)了,。進到這個函數(shù)體里邊,，就能找到解密函數(shù)：

function o(t) 就是我們需要的解密函數(shù)，可以看到它先調(diào)用 s 函數(shù),，傳入了四個參數(shù),，除了a.a.decode(t) 外其他三個都是寫死的，最后用 JSON.parse 轉(zhuǎn)為 json 對象,。

然而,，找到解密函數(shù)后，我們要做的不是去分析它函數(shù)內(nèi)部做了什么,，雖然可以研究它的解密算法然后用 Python 重寫,，但這樣太復雜且沒必要。因為我們可以用 PyExecJS 這個庫,，直接用 Python 調(diào)用并執(zhí)行 js 代碼,。

這時候，WebStorm 就派上用場了,。新建一個 js 文件,，把 function o里 涉及的代碼全部摳下來,。然后執(zhí)行 console.log 把執(zhí)行結(jié)果打印出來。篇幅問題就只貼部分代碼：

成功輸出正確的數(shù)據(jù),。

最后用 Python 去調(diào)用解密函數(shù)就行了,。

完整的代碼我已上傳到后臺，大家回復「js破解」即可獲取,。

參考資料：

http://www./2019/05/10/%E5%88%9D%E6%8E%A2js%E9%80%86%E5%90%91/

最后癡海創(chuàng)建了一個日報群,，每天我會從全球近百個信息源中為你精心挑選 3-5 篇有價值閱讀的文章。不只局限在編程相關(guān)話題,，還包括增長黑客,、技術(shù)變現(xiàn)、個人能力提升等等,。