建站
咨詢
售后
建站咨詢
新聞中心
CSS 偏移反爬是利用「 CSS 樣式 」對(duì)網(wǎng)頁(yè)元素進(jìn)行一次自定義的排序，最后讓網(wǎng)頁(yè)以正確的數(shù)據(jù)展示出來(lái)。
創(chuàng)新互聯(lián)公司專注于鐵力企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。鐵力網(wǎng)站建設(shè)公司,為鐵力等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
下面我們通過(guò)一個(gè)簡(jiǎn)單的實(shí)例，講解應(yīng)對(duì) CSS 偏移網(wǎng)站常規(guī)解決方案。
目標(biāo)對(duì)象：aHR0cDovL3d3dy5wb3J0ZXJzLnZpcC9jb25mdXNpb24vZmxpZ2h0Lmh0bWw=
1.分析一下
打開目標(biāo)網(wǎng)站，在開發(fā)者工具面板中查看「 機(jī)票價(jià)格 」的網(wǎng)頁(yè)元素組成方式。
我們發(fā)現(xiàn)，機(jī)票價(jià)格由上、下兩個(gè)區(qū)域的數(shù)據(jù)元素，通過(guò)一定的偏移量偏移，最后在頁(yè)面上展示的。
以第 1 條數(shù)據(jù)為例，機(jī)票實(shí)際價(jià)格為 467。
區(qū)域一寬度設(shè)置為 48px，left 的值為 -48px 代表左邊距向左偏移 48px。
其內(nèi)部的 i 標(biāo)簽寬度都為 16px，完全占滿了父容器的寬度。
即：如果區(qū)域二隱藏的話，機(jī)票價(jià)格應(yīng)該為 777。
我們繼續(xù)看區(qū)域二的內(nèi)容
第一個(gè) b 標(biāo)簽，內(nèi)容為 6，left 屬性值為 -32px，寬度為 16px，會(huì)覆蓋上面的第二個(gè)數(shù)字。
第二個(gè) b 標(biāo)簽，內(nèi)容為 4，left 屬性值為 -48px，寬度同樣為 16px，會(huì)覆蓋掉上面的第一個(gè)數(shù)字。
因此，最后網(wǎng)頁(yè)展示的機(jī)票價(jià)格就是 467。
2.特殊處理
如果仔細(xì)觀察網(wǎng)頁(yè)元素，會(huì)發(fā)現(xiàn) b 元素下的第三個(gè) i 標(biāo)簽既然展示在第二個(gè)行，而不是和前面兩個(gè) i 標(biāo)簽在同一行展示。
其實(shí)，這是因?yàn)?i 元素標(biāo)簽設(shè)置樣式 display 為 inline-block。
PS：inline-block 默認(rèn)元素之間會(huì)存在一定的間隙。
因此，為了正確解析出數(shù)據(jù)，我們需要針對(duì)網(wǎng)頁(yè)源代碼對(duì)部分網(wǎng)頁(yè)元素進(jìn)行二次更新。
3.實(shí)戰(zhàn)一下
首先，我們需要安裝依賴包。
# 依賴包
# bs4 用于對(duì)網(wǎng)頁(yè)源碼的元素樣式進(jìn)行二次更新
pip3 install beautifulsoup4
# lxml 用于爬取網(wǎng)頁(yè)數(shù)據(jù)
pip3 install lxml
接下來(lái)，我們使用 bs4 解析網(wǎng)頁(yè)源碼，獲取所有的 em 元素，修改它下面「 b 標(biāo)簽 」的 display 屬性值為浮動(dòng)「 flex 」，然后重新導(dǎo)出數(shù)據(jù)。
import requests
from bs4 import BeautifulSoup
...
url = 'http://.../flight.html'
resp = requests.get(url).text
# 首次解析源碼
soup = BeautifulSoup(resp, "lxml")
# 查詢頁(yè)面中的em元素
em_elements = soup.find_all("em", class_="rel")
# 對(duì)第一個(gè)b標(biāo)簽添加flex的屬性
for em_element in em_elements:
first_b_element = em_element.find_all('b')[0]
# 添加flex屬性
first_b_element['style'] = first_b_element['style'] + ';display:flex;'
# 重新導(dǎo)出進(jìn)行數(shù)據(jù)解析
resp = soup.prettify()
...
# 寫入到本地文件查看
# with open('temp.html', 'w', encoding='utf-8') as file:
# file.write(resp)
...
緊接著，我們利用 xpath 語(yǔ)法獲取所有航班 Item 元素控件。
結(jié)合正則表達(dá)式拿到機(jī)票價(jià)格對(duì)應(yīng)元素的 left 偏移量，通過(guò)這個(gè)偏移量可以計(jì)算出數(shù)據(jù)應(yīng)該展示的位置索引。
最后，根據(jù)索引將數(shù)據(jù)放置在列表的既定位置，組成真實(shí)的機(jī)票價(jià)格。
import re
from lxml import etree
...
# 數(shù)據(jù)解析
html = etree.HTML(resp)
# 查詢有幾個(gè)航班數(shù)據(jù)
div_list = html.xpath('//div[@class="left col-md-9"]/div')
print('航班數(shù)據(jù)數(shù)目：', len(div_list))
for index in range(len(div_list)):
# 獲取所有b標(biāo)簽
b_elements = div_list[index].xpath('.//em/b')
# 從第1個(gè)b標(biāo)簽下面的子標(biāo)簽數(shù)據(jù) ，這樣就可以獲取價(jià)格的位數(shù)（3位、4位）
price_num_list = b_elements[0].xpath('./i/text()')
print("打底機(jī)票價(jià)格為:", ''.join([item.strip() for item in price_num_list]))
# 從第2個(gè)b標(biāo)簽開始，獲取真實(shí)價(jià)格對(duì)應(yīng)的數(shù)字
for index, b_element in enumerate(b_elements[1:]):
# 數(shù)據(jù)
price_num = int(b_element.xpath('./text()')[0])
# 獲取b標(biāo)簽的style屬性值
style = b_element.xpath('./@style')[0]
# 利用正則表達(dá)式，獲取left屬性值
left_value = re.findall('left:(.*?)px', style)[0]
# 根據(jù)left值，計(jì)算數(shù)據(jù)在真實(shí)價(jià)格中的索引位置(-1/-2/-3)
price_index = int(int(left_value) / 16)
# 替換源數(shù)組中的數(shù)據(jù)，按索引將數(shù)值設(shè)置進(jìn)去
price_num_list[price_index] = price_num
# item都轉(zhuǎn)成字符串，合成一個(gè)新的數(shù)組
price_num_list = [str(item).strip() for item in price_num_list]
# 組成價(jià)格
price = int(''.join(price_num_list))
print("機(jī)票價(jià)格:", price)
...
網(wǎng)頁(yè)標(biāo)題：反爬篇|手把手教你處理JS逆向之CSS偏移
本文鏈接：http://m.5511xx.com/article/dhisppg.html
