反擊爬蟲,前端工程師的腦洞可以有多大?

2022-09-02 09:51:09 字數 1750 閱讀 8048

—— 同時發表於imweb.io

對於一張網頁,我們往往希望它是結構良好,內容清晰的,這樣搜尋引擎才能準確地認知它。

而反過來,又有一些情景,我們不希望內容能被輕易獲取,比方說電商**的交易額,教育**的題目等。因為這些內容,往往是乙個產品的生命線,必須做到有效地保護。這就是爬蟲與反爬蟲這一話題的由來。

但是世界上沒有乙個**,能做到完美地反爬蟲。

如果頁面希望能在使用者面前正常展示,同時又不給爬蟲機會,就必須要做到識別真人與機械人。因此工程師們做了各種嘗試,這些策略大多採用於後端,也是目前比較常規單有效的手段,比如:

而爬蟲是可以無限逼近於真人的,比如:

所以我們說,100%的反爬蟲策略?不存在的。

更多的是體力活,是個難易程度的問題。

不過作為前端工程師,我們可以增加一下遊戲難度,設計出一些很(sang)有(xin)意(bing)思(kuang)的反爬蟲策略。

3.1 font-face拼湊式

例子:貓眼電影

貓眼電影裡,對於票房資料,展示的並不是純粹的數字。

頁面使用了font-face定義了字符集,並通過unicode去對映展示。也就是說,除去影象識別,必須同時爬取字符集,才能識別出數字。

並且,每次重新整理頁面,字符集的url都是有變化的,無疑更大難度地增加了爬取成本。

3.2 background拼湊式

例子:美團

與font的策略類似,美團裡用到的是background拼湊。數字其實是,根據不同的background偏移,顯示出不同的字元。

並且不同頁面,的字元排序也是有區別的。不過理論上只需生成0-9與小數點,為何有重複字元就不是很懂。

頁面a:

頁面b:

3.3 字元穿插式

對了,我的手機流量可以找誰報銷嗎?

3.4 偽元素隱藏式

例子:汽車之家

汽車之家裡,把關鍵的廠商資訊,做到了偽元素的content裡。

這也是一種思路:爬取網頁,必須得解析css,需要拿到偽元素的content,這就提公升了爬蟲的難度。

3.5 元素定位覆蓋式

例子:去哪兒

還有熱愛數學的去哪兒,對於乙個4位數字的機票**,先用四個i標籤渲染,再用兩個b標籤去絕對定位偏移量,覆蓋故意展示錯誤的i標籤,最後在視覺上形成正確的**…

這說明爬蟲會解析css還不行,還得會做數學題。

3.6 iframe非同步載入式

例子:網易雲**

網易雲**頁面一開啟,html原始碼裡幾乎只有乙個iframe,並且它的src是空白的:about:blank。接著js開始執行,把整個頁面的框架非同步塞到了iframe裡面…

不過這個方式帶來的難度並不大,只是在非同步與iframe處理上繞了個彎(或者有其他原因,不完全是基於反爬蟲考慮),無論你是用selenium還是phantom,都有api可以拿到iframe裡面的content資訊。

3.7 字元分割式

例子:全網**ip

在一些展示**ip資訊的頁面,對於ip的保護也是大費周折。

他們會先把ip的數字與符號分割成dom節點,再在中間插入迷惑人的數字,如果爬蟲不知道這個策略,還會以為自己成功拿到了數值;不過如果爬蟲注意到,就很好解決了。

3.8 字符集替換式

例子:去哪兒移動側

同樣會欺騙爬蟲的還有去哪兒的移動版。

html裡明明寫的3211,視覺上展示的卻是1233。原來他們重新定義了字符集,3與1的順序剛好調換得來的結果…

反擊爬蟲,前端工程師的腦洞可以有多大?

對於一張網頁,我們往往希望它是結構良好,內容清晰的,這樣搜尋引擎才能準確地認知它。而反過來,又有一些情景,我們不希望內容能被輕易獲取,比方說電商 的交易額,教育 的題目等。因為這些內容,往往是乙個產品的生命線,必須做到有效地保護。這就是爬蟲與反爬蟲這一話題的由來。但是世界上沒有乙個 能做到完美地反爬...

爬蟲工程師的日常

很多讀者可能都不太清楚爬蟲是幹什麼的,今天我就來跟大家科普下爬蟲工程師平時的工作都是怎樣的。爬蟲又分為增量式爬蟲和全量式爬蟲。全量式爬蟲又稱為一次性爬蟲,就是把該 的資料一次性全部抓取下來,後面就不需要再管該 了,這種爬蟲任務通常比較簡單。而增量式爬蟲不止這次要把 資料抓取下來,而且之後還要檢測該 ...

未來的前端工程師

作者簡介 aoto 螞蟻金服 資料體驗技術團隊 以下我說的都是個人觀點,比較巨集觀粗淺,主要針對的是前端工程師本身,沒有深入技術和業務細節,請謹慎參考。前端工程師首先是個程式設計師,其次也是個軟體工程師,他們工作在離使用者最近的地方,負責人機互動和使用者體驗,雖然叫 前端 但其實他們的工作邊界其實已...