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

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

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

什麼是隱式 Style–CSS

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

CSS中，::before 建立一個僞元素，其將成爲匹配選中的元素的第一個子元素。常經過 content 屬性來爲一個元素添加修飾性的內容。

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

上面的這段話對於沒作過前端開發的朋友而言，看着可能會有點難懂，不要緊，咱們用個例子簡單地演示一下。

咱們新建一個 HTML 文件輸入下面這樣的內容：

<q>你們好，我是鹹魚</q>，<q>我是 NightTeam 的一員</q>
複製代碼

並在這個 HTML 中引用下面這個樣式文件：

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

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

能夠看到在上面的例子裏，我在 HTML 源碼裏隱藏了文字先後的符號，可是通過瀏覽器渲染後，文字先後的符號就出現了，是否是很神奇？

目前不少小說網站都使用了相似這樣的反爬蟲技術，用來保護本身的內容不被爬蟲爬取。

實例講解

那麼相似這樣的反爬技術應該怎麼處理呢？鹹魚準備了一個例子簡單實戰一下，用實例講講我遇到這類反爬是如何處理的。

發送消息【隱式Style-CSS】到咱們的微信公衆號【NightTeam】便可獲取樣例地址~

因爲這個例子比較簡單，因此這裏我就省略掉分析請求的步驟了，直接來分析一下瀏覽器看到的效果與源碼分別長什麼樣，找找有沒有什麼突破口吧。

這是瀏覽器看到的效果：

這是源碼：

能夠在源碼中看到部份內容被 <span class="context_kwx"></span> 替換。

頁面分析

打開瀏覽器的開發者模式，看看隱藏的文字是什麼樣子的：

能夠看到在上圖中，Styles 欄（圖中標註 2 的位置，意爲元素對應的 CSS 信息） 中 content 的內容正是 HTML 中被隱藏的內容（圖中標註 1 的位置）。

這正符合咱們在第一部分關於「隱式 Style-CSS」的舉例。

那麼咱們只須要把被替換掉的 span 標籤替換回 CSS 裏設置的 content 的值就能夠了。

---

若是是正常的頁面結構，CSS 是被直接放在 HTML 源碼裏或某個 .css 文件中的，咱們只須要在 Styles 欄中點擊右側的文件名就能夠直接跳轉到 CSS 文檔所在的位置了，以下圖：

可是在咱們的這個頁面中，Styles 欄裏並無這樣能夠點擊的位置，這表明了這個部分的 CSS 不是直接放在某個文件裏的，而是經過特殊手段動態添加上去的，因此咱們只能經過分析 span 標籤的規律找找突破口。

---

從 HTML 源碼中能夠看到，全部的 span 標籤的類名都是 context_kw 加上一個數字拼接的，咱們能夠試着搜索 context_kw 看看。

因而咱們就搜到了一些 context_kw 相關的 JS 代碼：

咱們大體瀏覽一下整段 JS 代碼。這段 JS 經過功能分爲兩個部分：

第一部分：CryptoJS 的加解密的邏輯內容，能夠忽略。

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

JS 代碼分析

根據第二部分中操做 DOM 的代碼，咱們找到關鍵變量 words。

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 變量聲明的地方。

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

按照這個方法，咱們最後發現 CSS 的 content 的內容都是數組 _0xa12e 中一個通過加密的元素先通過 AES 解密再通過必定處理後獲得的值。

有了這樣的一個邏輯框架以後，咱們就能夠開始摳出咱們須要的 JS 代碼了。

JS 代碼調整

這個代碼雖然通過混淆，但仍是比較簡單的，因此具體的摳代碼步驟就不演示了，這裏提示一下在摳出代碼以後兩個須要改寫的點。

第一個是下圖中的異常捕獲，這裏判斷了當前的 URL 是否爲原網站的，可是咱們在 Node 環境下執行是沒有 window 屬性的，若是不作修改會出現異常，因此須要把這裏的 if 判斷語句註釋掉。

第二個是下圖中在返回時的判斷語句，一樣是對 Node 中不存在的屬性進行判斷，因此也須要在這裏進行相應的修改。

第二個修改點能夠像這樣改：

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

以上兩點修改完後就能夠獲取到全部被替換過的字符了，接下來只須要把它們替換進 HTML 裏就能夠還原出正常的頁面。替換的步驟這裏就再也不演示了，由於很是簡單，一看就會。

總結

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

固然呢，這個例子還不夠完善，沒有徹底覆蓋到隱式 Style–CSS 在反爬蟲中的全部應用方式，若是讀者朋友對這類反爬蟲有興趣的話，不妨多找幾個例子本身動手試試，也歡迎經過留言區與我交流討論。

發送消息【隱式Style-CSS】到咱們的微信公衆號【NightTeam】便可獲取樣例地址~

---

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

涉獵的編程語言包括但不限於 Python、Rust、C++、Go，領域涵蓋爬蟲、深度學習、服務研發、對象存儲等。團隊非正亦非邪，只作認爲對的事情，請你們當心。