1. 前言#
對於一張網頁，我們往往希望它是結構良好，內容清晰的，這樣搜索引擎才能準確地認知它。
而反過來，又有一些情景，我們不希望內容能被輕易獲取，比方說電商網站的交易額，教育網站的題目等。因為這些內容，往往是一個產品的生命線，必須做到有效地保護。這就是爬蟲與反爬蟲這一話題的由來。
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 都是有變化的，無疑更大難度地增加了爬取成本。
3.2 background 拼湊式#
例子：美團
與 font 的策略類似，美團裡用到的是 background 拼湊。數字其實是圖片，根據不同的 background 偏移，顯示出不同的字符。
並且不同頁面，圖片的字符排序也是有區別的。不過理論上只需生成 0-9 與小數點，為何有重複字符就不是很懂。
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 的順序剛好調換得來的結果…