這種反爬蟲手段有點意思，看我破了它！

夜幕鎮嶽丨韋世東發表於2019-11-14
爬蟲

這種反爬蟲手段有點意思，看我破了它！
這種反爬蟲手段被廣泛應用在一線網際網路企業的產品中，例如汽車資訊類網站、小說類網站等文字密度較大的站點。在開始學習之前，我們先來看看具體的現象。開啟網址：

https://implicit-style-css_0.crawler-lab.com
複製程式碼

呈現在我們眼前的是這樣一個介面：

這種反爬蟲手段有點意思，看我破了它！

這次的任務，就是拿到頁面上所呈現的內容的文字。在編寫爬蟲程式碼之前，我們要做幾件事：

  • 確定目標內容的來源，也就是找到響應目標內容的那次請求
  • 確定目標內容在網頁中的位置

其實就是最基本的觀察和分析。

網路請求方面，開啟瀏覽器除錯工具並切換到 Network 皮膚後，看到頁面只載入了 2 個資源：

這種反爬蟲手段有點意思，看我破了它！

一個 html 文件和一個 js 檔案，想必我們要的內容就在 html 文件中。點選該請求，瀏覽器開發者工具就會分成兩欄，左側依然是請求記錄列表，右側顯示的是指定請求的詳情。右側皮膚切換到 Response，就可以看到伺服器響應的內容：

這種反爬蟲手段有點意思，看我破了它！

看樣子，我們要的東西就在這次響應正文中。咋一看，我們直接取 class 為 rdtext 的 div 標籤下的 p 標籤中的文字內容即可。然而事情並沒有那麼簡單，細心的讀者可能發現了，響應正文中顯示的內容和頁面中呈現的文字並不完全相同——響應正文中少了一些標點符號和文字，多了一些 span 標籤。例如頁面中顯示的是：

夜幕團隊 NightTeam 於 2019 年 9 月 9 日正式成立，團隊由爬蟲領域中實力強勁的多名開發者組成：崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。
複製程式碼

而響應正文中看到的是：

<p>夜幕團隊 NightTeam 於 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>團隊由爬蟲領域中實力強勁<span class="context_kw1"></span>多<span class="context_kw21"></span>開發者組成：崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東<span class="context_kw2"></span>
</p>
複製程式碼

這句話中，被 span 標籤替代的有逗號、的字、名字。整體看一遍，發現這些 span 標籤都帶有 class 屬性。

明眼人一看就知道，又是利用了瀏覽器渲染原理做的反爬蟲措施。不明所以的讀者請去翻閱《Python3 反爬蟲原理與繞過實戰》。

既然跟 span 和 class 有關，那我們來看一下 class 屬性到底設定了什麼。class 名為 context_kw0 的 span 標籤樣式如下：

.context_kw0::before {
    content: "，";
}
複製程式碼

再看看其他的，class 屬性為 context_kw21 的 span 標籤樣式如下：

.context_kw21::before {
    content: "名";
}
複製程式碼

原來被替換掉的文字出現在這裡！看到這裡，想必聰明的你也知道是怎麼回事了！

解決這個問題的辦法很簡單，只需要提取出 span 標籤 class 屬性名稱對應的 content 值，然後將其恢復到文字中即可。

屬性名有個規律：context_kw + 數字。也就是說 context_kw 有可能是固定的，數字是迴圈出來的，或者是陣列中的下標？大膽猜想一下，假設有這麼一個字典：

{0: "，", 1: "的",  21: "名"}
複製程式碼

那麼將 context_kw 與字典的鍵組合，就得到了 class 的名稱，對應的值就作為 content，這好像很接近了。中高階爬蟲工程師心中都明白：在網頁中，能幹出如此之事唯有藉助 JavaScript。不明白的讀者請去翻閱《Python3 反爬蟲原理與繞過實戰》。

那就搜一下吧！

喚起瀏覽器除錯工具的全域性搜尋功能，輸入 context_kw 並會車。然後在搜尋結果中尋找看上去有用的資訊，例如：

這種反爬蟲手段有點意思，看我破了它！

發現 JavaScript 程式碼中出現了 context_kw，關鍵的資訊是 .context_kw + i + _0xea12('0x2c')。程式碼還混淆了一下！看不出的讀者可以找作者韋世東報名《JavaScript 逆向系列課》，學完就能夠很快找到看上去有用的程式碼，並且看懂程式碼的邏輯。

這裡手把手帶讀一下這些 JavaScript 程式碼。第一段，也就是 977 行程式碼原文如下：

var _0xa12e = ['appendChild', 'fromCharCode', 'ifLSL', 'undefined', 'mPDrG', 'DWwdv', 'styleSheets', 'addRule', '::before', '.context_kw', '::before{content:\x20\x22', 'cssRules', 'pad', 'clamp', 'sigBytes', 'YEawH', 'yUSXm', 'PwMPi', 'pLCFG', 'ErKUI', 'OtZki', 'prototype', 'endWith', 'test', '8RHz0u9wbbrXYJjUcstWoRU1SmEIvQZQJtdHeU9/KpK/nBtFWIzLveG63e81APFLLiBBbevCCbRPdingQfzOAFPNPBw4UJCsqrDmVXFe6+LK2CSp26aUL4S+AgWjtrByjZqnYm9H3XEWW+gLx763OGfifuNUB8AgXB7/pnNTwoLjeKDrLKzomC+pXHMGYgQJegLVezvshTGgyVrDXfw4eGSVDa3c/FpDtban34QpS3I=', 'enc', 'Latin1', 'parse', 'window', 'location', 'href', '146385F634C9CB00', 'decrypt', 'ZeroPadding', 'toString', 'split', 'length', 'style', 'type', 'setAttribute', 'async', 'getElementsByTagName', 'NOyra', 'fgQCW', 'nCjZv', 'parentNode', 'insertBefore', 'head'];
        (function (_0x4db306, _0x3b5c31) {
            var _0x24d797 = function (_0x1ebd20) {
                while (--_0x1ebd20) {
                    _0x4db306['push'](_0x4db306['shift']());
                }
            };
複製程式碼

往下延伸閱讀，還能看到 CryptoJS 這個詞，看到它就應該曉得程式碼中使用了一些加密解密的操作。

第二段，1133 行程式碼原文如下：

for (var i = 0x0; i < words[_0xea12('0x18')]; i++) {
            try {
                document[_0xea12('0x2a')][0x0][_0xea12('0x2b')]('.context_kw' + i + _0xea12('0x2c'), 'content:\x20\x22' + words[i] + '\x22');
            } catch (_0x527f83) {
                document['styleSheets'][0x0]['insertRule'](_0xea12('0x2d') + i + _0xea12('0x2e') + words[i] + '\x22}', document[_0xea12('0x2a')][0x0][_0xea12('0x2f')][_0xea12('0x18')]);
            }
        }
複製程式碼

這裡迴圈的是 words，然後將 words 元素的下標和對應元素組合，這和我們猜想的是非常接近的，現在要找到 words。

怎麼找？

又不會嗎？

搜尋就可以了，順著搜尋結果看，找到了定義 words 的程式碼：

var secWords = decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words = new Array(secWords[_0xea12('0x18')]);
複製程式碼

按照這個方法，我們最後發現 CSS 的 content 的內容都是陣列 _0xa12e 中一個經過加密的元素先經過 AES 解密再經過一定處理後得到的值。

捋清楚邏輯之後，就可以開始摳出我們需要的 JS 程式碼了。

這個程式碼雖然經過混淆，但還是比較簡單的，所以具體的摳程式碼步驟就不演示了，這裡提示一下在摳出程式碼之後兩個需要改寫的點。

第一個是下圖中的異常捕獲，這裡判斷了當前的 URL 是否為原網站的，但除錯時，在 Node 環境下執行是沒有 window 物件、document 物件的，如果不做修改會出現異常，所以需要把帶有這些物件的程式碼註釋掉，例如下面 if 判斷語句：

try {
	if (top[_0xea12('0x10')][_0xea12('0x11')][_0xea12('0x12')] != window[_0xea12('0x11')]['href']) {
	top['window'][_0xea12('0x11')]['href'] = window[_0xea12('0x11')][_0xea12('0x12')];
}
複製程式碼

其他的地方還需要自己踩坑。

修改完後就可以獲取到所有被替換過的字元了，接下來只需要把它們替換進 HTML 裡就可以還原出正常的頁面，replace 就不演示了噢。

反爬蟲原理

例子中用到的是 ::before，下方文字描述了它的作用：

在 CSS 中，::before 用於建立一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素新增修飾性的內容。

引用自：developer.mozilla.org/zh-CN/docs/…

舉個例子，新建一個 HTML 文件，並在裡面寫上如下內容：

<q>大家好，我是鹹魚</q>，<q>我是 NightTeam 的一員</q>
複製程式碼

然後為 q 標籤設定樣式：

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}
複製程式碼

完整程式碼如下（寫給沒有 HTML 基礎的朋友）：

<style>

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

</style>
<q>大家好，我是鹹魚</q>，<q>我是 NightTeam 的一員</q>
複製程式碼

當我們用瀏覽器開啟 HTML 文件時，看到的內容如下所示：

這種反爬蟲手段有點意思，看我破了它！

我們在樣式中，為 q 標籤加上了 ::before 和 ::after 屬性，並設定了 content 和對應的顏色。於是乎，在被q 標籤包裹著的內容前會出現藍色的 《 符號，而後面會出現紅色的 》 符號。

簡單易懂吧！

小結

本文簡單介紹了隱式 Style–CSS 在反爬蟲中的應用，並通過一個簡單的例項學習瞭如何應對這種情況，相信嘗試過的你已經清楚地知道下次碰到這種反爬的時候該如何破解了。

當然呢，這個例子還不夠完善，沒有完全覆蓋到隱式 Style–CSS 在反爬蟲中的所有應用方式，如果讀者朋友對這類反爬蟲有興趣的話，不妨多找幾個例子自己動手試試，也歡迎通過留言區與我交流討論。

本文參考

公眾號 NightTeam 的文章《聽說你碰到這種反爬就歇菜了？手把手教你秒殺它！》

韋世東的新書《Python3 反爬蟲原理與繞過實戰》

版權宣告

作者：sfhfpc – 韋世東

連結：www.sfhfpc.com

備案完成前只能通過 ip 訪問： http://121.36.22.204

來源：演算法和反爬蟲

著作權歸作者所有，非商業轉載請註明出處，禁止商業轉載。

相關文章