[[407877]]

本文轉(zhuǎn)載自微信公眾號「志斌的python筆記」，作者志斌。轉(zhuǎn)載本文請聯(lián)系志斌的python筆記公眾號。

大家好，我是志斌~

前幾天在爬取某網(wǎng)站的時候遇到了CSS偏移反爬蟲，它是一種利用CSS樣式將亂序的文字排版成人類正常閱讀順序的反爬蟲。今天志斌就來跟大家分享一下這類反爬蟲應該如何繞過。

01原理

在搭建網(wǎng)頁的時候，我們需要用CSS來控制各類字符的位置，也正是如此，我們可以利用CSS來將瀏覽器中顯示的文字，在HTML中以亂序的方式存儲，從而來限制爬蟲。如下圖，我們發(fā)現(xiàn)瀏覽器中實際顯示的是1226，但是HTML中顯示的是1262。

接下來，我們通過一個例子來了解繞過CSS偏移反爬蟲的方法。

02繞過

從下圖中我們看出機票價格的數(shù)據(jù)被包裹在一個標簽中，標簽大小是64px。如下圖所示：

進一步對網(wǎng)頁進行觀察發(fā)現(xiàn)，標簽中有五個標簽，它們每一對標簽都有特定的樣式。如下圖所示：

我們用這些CSS樣式來進行分析的話，我們發(fā)現(xiàn)，第一對標簽中的四對標簽剛好占滿了標簽的位置。如下圖所示：

瀏覽器中，本應顯示的是5377，因為第二、三、四、五對標簽中有值，所以我們還需要看一下他們的位置。

第二對的<b>標簽的位置樣式是left:-64px,所以第二對<b>標簽中的1就會覆蓋第一對<b>標簽中第一對<i>標簽中的5；第三對的<b>標簽的位置樣式是left:-32px,第三對<b>標簽中的2會覆蓋第一對<b>標簽中第三對<i>標簽中的7。依次類推，第四對<b>標簽中的6會覆蓋第一對<b>標簽中第四對<i>標簽中的7，第五對<b>標簽中的2會覆蓋第一對<b>標簽中第二對<i>標簽中的3。

通過上面的分析，我們發(fā)現(xiàn)，CSS偏移反爬蟲其實就是讓幾個數(shù)據(jù)由CSS控制位置，來對原數(shù)據(jù)進行覆蓋，從而實現(xiàn)反爬效果。

那么當我們遇到這類反爬蟲的時候，首先就需要對頁面的CSS進行觀察分析，找到偏移量的計算規(guī)律，然后提取出每個標簽中l(wèi)eft的值，根據(jù)規(guī)律來排列出真實的數(shù)據(jù)。

當然，會有讀者說，我們找到了規(guī)律，但是不會提取標簽中的數(shù)據(jù)怎么辦?不用擔心，在之前的文章中，志斌介紹過如和用BS4提取數(shù)據(jù)的方式，其中就有提取標簽數(shù)據(jù)的方法，有不懂的小伙伴，可以看看這篇文章學會BS4，輕松解決數(shù)據(jù)提取!。

03小結(jié)

1. CSS偏移反爬蟲實質(zhì)上是通過CSS樣式來控制數(shù)據(jù)在頁面中顯示的位置，從而將亂序的數(shù)據(jù)以正常的形式展示給用戶。

2. 破解這種反爬蟲的難度并不大，主要是找到位置偏移的計算方法，而且代碼書寫可能較為繁瑣，讀者們可以提前寫好流程圖，然后在進行書寫。

3. 目前這種反爬蟲方法主要是針對于數(shù)字數(shù)據(jù)的反爬。

4. 本文旨在學習與研究CSS偏移反爬蟲，請大家不要用于非法用途。