隱式 Style–CSS 在反爬蟲中的應用

什麼是隱式 Style–CSS

先來嘮嘮什麼是 隱式 Style–CSS:

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

源自：https://developer.mozilla.org

上面的這段引用，看著有點難懂，沒關係我們用下面這個例子簡單演示一下。

我們新建一個 HTML 檔案輸入下面這樣的內容：

<q>大家好，我是鹹魚</q>，<q>我是 NightTeam 的一員</q>

源自：https://developer.mozilla.org
 

並在這個 HTML 中引用下面這個樣式檔案：

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

源自：https://developer.mozilla.org

最後在瀏覽器中展示的內容是這樣的：

<<大家好，我是鹹魚>>,<<我是 NightTeam 的一員>>

源自：https://developer.mozilla.org

可以看到在上面的例子裡，我在原始碼裡隱藏了文字前後的符號，但是在瀏覽器顯示的時候卻是正常的。

目前很多小說網站都使用了類似這樣的反爬技術保護自己的內容不被爬蟲爬取。

那麼類似這樣的反爬技術應該怎麼處理？

例項講解

鹹魚準備了一個例子簡單實戰一下，用例項講講我遇到這類反爬是如何處理的。

這個例子執行在本地，所以就沒有分析請求的步驟，直接分析下瀏覽器顯示與原始碼分別什麼樣，找找有沒有什麼突破口。

瀏覽器展示：

原始碼顯示：

可以在原始碼中看到部分內容被<span class="context_kwx"></span>替換。

頁面分析

開啟 開發者模式，看看隱藏的文字是什麼樣子的。【圖2-1】

可以看到在【圖2-1】裡方框 2 中 content 的內容正是 方框 1 在原始碼頁面裡隱藏的內容。

這符合我們在第一部分關於 隱式 style-css 的舉例。

那麼為了能夠拿到全部的內容，我們只需要把替換掉的span標籤替換回【圖2-1】中方框 2 裡的 content 的值就可以了。

按照正常的頁面結構，可以通過點選【圖2-2】中框選的地方直接跳轉到 CSS 檔案的位置。

但是在我們這個頁面結構裡沒有這樣可以點選的位置，所以我們只能通過分析 span 標籤的規律找找突破口。

所有的 span 標籤的類名都是 context_kw 加上一個數字拼接的，我們試著搜尋 context_kw 找找。

可以看到在檔案裡找到了與 context_kw 相關的 JS 程式碼。【圖2-3】

大致瀏覽了整段 JS 程式碼，這段 JS 通過功能分為兩個部分。【圖2-4】

第一部分：CryptoJS的加解密的邏輯內容，可以忽略

第二部分：經過變數名混淆的內容，第二部分的 JS 對陣列中的密文進行解密，並操作了 DOM ，完成了將 JS 與 CSS 結合完成了反爬最主要的邏輯。

部分加密分析

根據第二部分中操作 DOM 的程式碼，我們找到關鍵 變數word。

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')]);
            }
        }

再繼續找到 word 的變數宣告的地方。

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

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

有了這樣的一個邏輯框架之後我們就可以直接開始扣取我們需要的 JS 程式碼了。

加密程式碼修改

這個程式碼比較簡單，具體的扣取步驟就不演示了，這裡演示兩個在扣取程式碼之後兩個需要改寫的點。

第一個是【圖2-5】中的異常捕獲，這裡判斷了當前的 URL 是否相等，但是我們在 Node 環境下執行是沒有 window 屬性的，如果不做修改會出現異常，所以需要把這裡的 if 判斷語句註釋。

第二個是【圖2-6】中在返回中的判斷語句，同樣是對 Node 中不存在的屬性進行判斷，所以同樣需要在這裡進行相應的修改。

例如：

_0x1532b6[_0xea12('0x26')](_0x490c80, 0x3 * +!('object' === _0xea12('0x27')))

以上兩點修改完後就可以獲取到所有被替換過的字元了。

總結

本文簡單描述了隱式 Style–CSS 在反爬蟲中的應用，並通過一個簡單的例項學習如果在反反爬蟲中應對。

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

文章作者：「夜幕團隊 NightTeam」 - 戴煌金

潤色、校對：「夜幕團隊 NightTeam」 - Loco

夜幕團隊成立於 2019 年，團隊包括崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。

涉獵的程式語言包括但不限於 Python、Rust、C++、Go，領域涵蓋爬蟲、深度學習、服務研發、物件儲存等。團隊非正亦非邪，只做認為對的事情，請大家小心。