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

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

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

2. 常見反爬蟲策略

但是世界上沒有一個網站，能做到完美地反爬蟲。

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

User-Agent + Referer檢測

賬號及Cookie驗證

驗證碼

IP限制頻次

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

chrome headless或phantomjs來模擬瀏覽器環境

tesseract 識別驗證碼

代理IP淘寶就能買到

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

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

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

3. 前端與反爬蟲3.1 font-face拼湊式例子： 貓眼電影

貓眼電影里，對於票房數據，展示的並不是純粹的數字。

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

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

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

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

iframe非同步載入式例子： 網易雲音樂

網易雲音樂頁面一打開，html源碼里幾乎只有一個 iframe ，並且它的src是空白的： about:blank 。接著js開始運行，把整個頁面的框架非同步塞到了iframe裡面…

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

花無涯

Anonymous

━━━ 求知若飢，虛心若愚━━━

中國黑客協會創始人

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！