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

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

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

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

1 JS 基礎語法學習

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

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

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

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

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

2 前端 JS 破解原理

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

這類的網(wǎng)站你只要發(fā)個 requests 的請求，服務器就會把帶有數(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)絡請求面板「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)絡請求面板。在 pinvestment 響應里可以看到是一個 JS 調(diào)用的代碼，并沒有我們想要的 HTML 代碼，顯示網(wǎng)頁是由 JS 動態(tài)生成。

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

接下來我們就要破解 encrypt_data。

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

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

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

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

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

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

小技巧：

1 花括號進行美化

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

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

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

其實上圖中執(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í)行結果打印出來。篇幅問題就只貼部分代碼：

成功輸出正確的數(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 篇有價值閱讀的文章。不只局限在編程相關話題，還包括增長黑客、技術變現(xiàn)、個人能力提升等等。