四 插翅難逃 縱然 css 加身也難逃命運(yùn)的安排

1、 夜團(tuán)幕隊(duì)第十四篇 CSS反爬Night TeamMarvin. Z 掃碼查看課程詳情 CONTENTCSS 基礎(chǔ) 為什么用 CSS 反爬 CSS 反爬類別 CSS 反爬應(yīng)對策略 實(shí)戰(zhàn)：抓取機(jī)票價(jià)格3 Part 01CSS 基礎(chǔ)4 CSS 基礎(chǔ) CSS 定義層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通 用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。 比喻：HTML 是人的身體，CSS 就是各種服裝，能夠改變?nèi)说臉邮綐用?，?/p>

2、人以某種靈活的方式呈現(xiàn)出來。 5 CSS 基礎(chǔ) CSS HelloWorld6 CSS 基礎(chǔ) 瀏覽器渲染過程7 CSS 基礎(chǔ)選擇器注釋屬性名稱屬性值標(biāo)簽 CSS 語法ID類名類名ID偽類標(biāo)簽子元素后代元素后代元素子元素child:first-child 偽類：第一個(gè)子元素 CSS 基礎(chǔ) CSS 布局布局就像整個(gè)架構(gòu)一樣，是 CSS 樣式中非常重要的元素，關(guān)乎頁面樣式的整體風(fēng)格與排版 常見的布局浮動(dòng)（Float）定位（Position）彈性（Flex）柵格（Grid）表格（Table） CSS 基礎(chǔ) CSS 布局: 浮動(dòng)浮動(dòng)布局是一種比較常見的布局方式 主要表現(xiàn)為脫離文檔流，意思是將不對父元素做

3、任何布局上的貢獻(xiàn)，例如撐開父元素的高度和寬度等等 如果某元素 float 值設(shè)置為 left，該元素會(huì)向左排列，并脫離文檔流反之，如果 float 值設(shè)置為 right，則會(huì)向右排列 優(yōu)點(diǎn)：簡單 缺點(diǎn)：脫離文檔流容易造成父元素坍塌，不容易控制 CSS 基礎(chǔ) CSS 布局: 定位定位常常適合于固定位置例如吸頂或?qū)Ш綑谠仄湎鄬蚪^對位置固定，且有明確的坐標(biāo) 能夠與其他元素重疊，并通過 z-index 來確定堆疊位置固定定位（position: fixed）是相對于窗口進(jìn)行定位 絕對定位（position: absolute）是相對于 static 以外的第一個(gè)父元素進(jìn)行定位 優(yōu)點(diǎn)：能夠固定元素，

4、能夠與其他元素重疊缺點(diǎn)：脫離文檔流，不能夠改變父元素大小 CSS 基礎(chǔ) CSS 布局: 彈性非常強(qiáng)大且靈活的布局， 將成為未來布局的首選方案 分為主軸和交叉軸，擁有多個(gè)屬性來控制其布局表現(xiàn) 可以輕松實(shí)現(xiàn)多種比較常見的布局，例如圣杯布局、輸入框布局優(yōu)點(diǎn)：非常靈活，容易實(shí)現(xiàn)垂直居中等排版缺點(diǎn)：有一定學(xué)習(xí)成本 CSS 基礎(chǔ) CSS 盒子模型盒子模型的本質(zhì)是一個(gè)盒子（Box），盒子內(nèi)容（Content）由一系列的外層所包裹 由里到外分別是內(nèi)容（Content）、內(nèi)邊距（Padding）、邊框 （Border）、外邊距（Margin） 盒子的寬度一般來說是內(nèi)容寬度（標(biāo)準(zhǔn)盒子模型），但也可能是內(nèi)容加內(nèi)邊距

5、加邊框?qū)挾戎停↖E 盒子模型） CSS 基礎(chǔ) CSS 字體字體在 CSS 反爬中比較重要，因?yàn)橛行┓磁朗腔谧煮w的 字體反爬通常會(huì)操作 font-family 這個(gè)字段，讓其指向自定義的字體，例如 my-font，從而達(dá)到混淆的目的 常用的字體相關(guān)屬性： font-size font-weight font-family line-height color CSS 基礎(chǔ) CSS 背景有相關(guān)的反爬技術(shù)用到了背景 CSS，其主要原理是CSS Sprite，一種用一張圖做多個(gè)效果的操作 常用的背景屬性 background-image background-size background-posi

6、tion Part 02為什么用 CSS做反爬16 為什么用 CSS 做反爬用 CSS 做反爬有很多好處，總結(jié)下來主要有兩個(gè)1.成本低 2.效果好 為什么用 CSS 做反爬成本低只需要前端混淆樣式 不需要復(fù)雜的加密技術(shù) 不需要驗(yàn)證碼、流量監(jiān)測等額外配置因此，對于企業(yè)來說，僅僅用一些 CSS 技巧就可以防住爬蟲，可以不需要很多資源投入，這樣會(huì)節(jié)省很多資金以及時(shí)間資源 為什么用 CSS 做反爬效果好1.難以識別抓取內(nèi)容與預(yù)期內(nèi)容相近反爬措施不容易發(fā)覺 可以混淆競爭對手 沒有成熟的破解套路 2.破解 CSS 混淆的反爬措施需要想象力沒有統(tǒng)一的破解套路，需要人工干預(yù) 用 CSS 的反爬效果比較好，所以

7、企業(yè)可以花很少的成本來獲取較大的反爬效益，這種措施顯得尤為具有吸引力 Part 03CSS 反爬類別20 為什么用 CSS 做反爬CSS 反爬可以多種多樣，但總結(jié)下來有幾種常見的反爬類別利用字體利用背景利用偽類 利用元素定位利用字符切割 CSS 反爬類別 利用字體反爬原理主要利用了 font-family 這個(gè)屬性，例如設(shè)置為 my-font在 HTML 里用不常見（不可讀）的 unicode 在 CSS 的字體（my-font）中將其映射到常見（可讀）的字體，例如數(shù)字爬蟲在抓取數(shù)據(jù)的時(shí)候只能抓到 unicode，而不是真實(shí)的數(shù)據(jù) CSS 反爬類別 利用字體應(yīng)對措施下載 woff 字體文件，轉(zhuǎn)

8、化為 tff 文件 用百度字體編輯器打開 tff 文件，并確定其 unicode 與實(shí)際值的映射關(guān)系將下載的 HTML 內(nèi)容按照映射關(guān)系替換 解析 HTML 并獲取正確的數(shù)據(jù) 難點(diǎn)有些網(wǎng)站會(huì)動(dòng)態(tài)生成 woff，這種反爬措施比較難以自動(dòng)化繞開 CSS 反爬類別 利用背景反爬原理數(shù)據(jù)（通常是數(shù)字）利用圖片背景展示給用戶，而不是直接用文本的形式展示 圖片包含一張雪碧圖（Sprite），數(shù)據(jù)利用背景偏移量來獲取 爬蟲在抓取的時(shí)候看不到實(shí)際值，而只是圖片背景 CSS 反爬類別 利用背景應(yīng)對措施下載雪碧圖（Sprite），手動(dòng)檢查其對應(yīng)的值 在調(diào)試工具中調(diào)整 background-position 的偏移

9、量，找到各偏移量與實(shí)際值的映射關(guān)系 在爬蟲中獲取元素偏移量的值，將其轉(zhuǎn)化為實(shí)際值 CSS 反爬類別 利用偽類反爬原理不直接將內(nèi)容展現(xiàn)在HTML的元素里 通過偽類的 content 屬性將要展示的值展現(xiàn)出來 難點(diǎn)獲取指定元素的偽類屬性 CSS 反爬類別 利用偽類應(yīng)對措施利用 Puppeteer 或者 Selenium 這樣的自動(dòng)化測試工具 在頁面上執(zhí)行右側(cè)的 JS 代碼，即可獲取 content 注意：before 是偽類，也可能是 after CSS 反爬類別 利用元素定位反爬原理利用絕對定位（position: absolute）將某一個(gè)數(shù)字或字符將原數(shù)字或字符通過一定的偏移量替換 替換的數(shù)字或字符通常來說是隨機(jī)的如果直接抓取，將抓取到錯(cuò)誤的信息 CSS 反爬類別 利用元素定位應(yīng)對措施計(jì)算出替換的元素的偏移量，與被替換元素相比對，還原實(shí)際值 CSS 反爬類別 利用字符分割反爬原理將字符串用標(biāo)簽分割開來 由于其是內(nèi)聯(lián)塊級（inline-block），可以一行展示通常還混淆有不顯示的標(biāo)簽（display: none） CSS 反爬類別 利用字符分割應(yīng)對措施將內(nèi)聯(lián)塊級標(biāo)簽的 innerText 拼接起來注意過濾掉所有 display: none 的屬性 Part 04CSS 反爬應(yīng)對策略32 CSS 反爬應(yīng)對策略推薦的 CSS 反爬應(yīng)對策略步驟1.通過調(diào)