1. 雪碧圖
1.1. 雪碧圖
- 雪碧圖（sprite）也叫CSS精靈， 是一CSS圖像合成技術；
- 該方法是將小圖標和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分;簡單說就是在一整張圖片中分割出自己想要的部分，也可理解爲圖片截取顯示（座標的移動) ；
1.2. 雪碧圖的優點：
- 減少加載網頁圖片時對服務器的請求次數
可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。 - 提高頁面的加載速度
由所需圖片拼成的一張 GIF 圖片的尺寸，會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
2. 雪碧圖反爬策略破解
2.1. 反爬策略分析
- 目前，雪碧圖在前端在反爬策略中，仍然有着普遍的應用，這裏我們以某租房平臺爲例進行解說。
-
如下圖所示，當我們鼠標右鍵檢查價格的時候，發現數據已經被隱藏；
![]()
- 分析元素代碼發現，
element.style中background-position值爲-156.2px，background-image值爲url(//static8.ziroom.com/phoenix/pc/images/2019/price/7ce54f64c5c0a425872683e3d1df36f4.png)，點擊 .png 地址得到下面的網頁；
![]()
- 通過上面的分析我們推斷，數字 6 和上面的圖片之間存在着某種映射關係，而這個關係就是 background-position 的值。爲了證實這種假設，我們分析價格 1330 中，兩個 數字 3 的 background-position 值是一樣的；
- 據此我們基本可以斷定，此網站採用雪碧圖的方式，將價格數字隱藏在
background-image 上，並通過元素的 background-position 值提取對應的數字，展示在網頁上成爲用戶看到的價格； - 那具體的映射關係是什麼呢？我們分析數值的位置，和 background-image 圖，發現每個相鄰的數字之間相差
31，最後一位的 background-position 爲-281，也就是說1、2、3、4、5、6、7、8、9、0共計 10 個數字分別佔據 background-image 圖的 10 個位置，每個數字的位置相差 30 個像素； - 此時，我們還要注意一個問題，那就是這個 background-image 是不是固定的，映射關係是不是也是固定的，我們打開多個同類的 url，發現 background-image 是動態更新的，也就是說每次請求都要去獲取 background-image 圖片，然後根據元素位置得到對應的數字；
- 至此，破解分析工作就已完成；
2.2. 代碼實現
- 略。