[[407877]]

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

大家好，我是志斌~

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

01原理

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

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

02繞過

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

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

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

瀏覽器中，本應(yīng)顯示的是5377，因?yàn)榈诙⑷?、四、五?duì)標(biāo)簽中有值，所以我們還需要看一下他們的位置。

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

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

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

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

03小結(jié)

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

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

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

4. 本文旨在學(xué)習(xí)與研究CSS偏移反爬蟲，請(qǐng)大家不要用于非法用途。