如何「攻破」大眾點評的文字加密防線？

作者 | 左伊雅

責編| 郭芮

相信在座的各位一定有爬過大眾點評的數據，但是卻因為它的各種加密力不從心。這裡必須告訴你，看完這篇文章，大眾點評加密你就能輕鬆搞定。

現以麥當勞（羅賓森購物中心店）為例進行說明：http://www.dianping.com/shop/77335766。

從上圖就可以看到，7，2，8，0，6，城，中，路等等都無法被選擇，再打開開發者工具定位，它的人均27元中的7對應.zl-tvPf；2對應.zl-gc5M。這就是大眾點評的加密，將部分文字用標籤代替。

文字加密的方法有兩種：一種是映射，一種是圖片。而大眾點評用的正是後者——這是怎麼看出來的呢？

大家仔細看一看下面的兩幅圖，筆者分別選擇了.zl-gc5M；.zl-tvPf。觀察一下兩幅圖的右側（也就是兩個標籤對應的style），它們的右上是d[class^="zl-"]；右下分別是.zl-gc5M 和.zl-tvPf。

點擊可放大圖片

現在來分析右上的d[class^="zl-"]部分。這裡的意思是說，以zl-開頭的映射對應的background-image為：url(//s3plus.meituan.net/v1/mss_0a06a47…/svgtextcss/ab22723….svg)——這個URL就是數字圖片的地址，將這個鏈接打開會看到這樣一組數字圖片：

再來看右下.zl-gc5M 和.zl-tvPf部分。background：-36.0px -7.0px；background：-106.0px -7.0px；懂一點CSS的都知道，這是圖片平移，分別往左平移36個像素點和106個像素點。回到上副圖，將數字2往左平移36個像素點，把數字7往左平移106個像素點，數字2和7就可以在網頁上顯示出來。這就是文字圖片加密的原理。

找到對應的CSS文件，建議不要格式化，全部複製存為字元串。這裡要說明一下，大眾點評把所有文字、數字的平移放在同一個CSS文件里，所以這個CSS格式化以後有19301行。

數字的分類字母為『zl-』：

數字的分類字母是 "zl-"，從上面的CSS文件里將 "zl-"調出：

可以看到不同的class只有左右偏移量不同，最小偏移量為80Px，最大的偏移量為1340Px。這是一個公差為140的等差數列，所以整體思路是：根據平移的多少來和數字串『9426831705』匹配，即偏移量為80對應數字9，偏移量為220對應數字4......這裡要說明一下的是偏移量為910的zl-Bthl，它對應的是數字1，但是大眾點評的1是沒有加密的，就把數字1對應的真正的偏移量920改為了910。這裡對整體是不影響的。

這是匹配的結果：

{"zl-FhcV": "9", "zl-Jvp2": "4", "zl-gc5M": "2", "zl-TohQ": "6", "zl-htaN": "8", "zl-giSW": "3", "zl-Bthl": "1", "zl-tvPf": "7", "zl-JTyc": "0", "zl-Cg3x": "5"}

找了美食、健身館、游泳館、按摩、景點五種網頁進行實驗，所有的數字都成功地識別出來了。

這裡把最核心的代碼貼出來，完整版會上傳到GitHub。

至此，大眾點評的數字解密就講完啦。

看到這裡的小夥伴都很優秀噢，接下來講的會比數字難很多。Are you ready？

現在開始看評論，以（http://www.dianping.com/shop/77335766）的第一條評論為例：

可以看到評論里的部分文字都被替換成了標籤，顯示出的文字完全是讀不通的，和數字一樣，它有一張文字圖（background-image），通過移動各個文字的位置（background）將文字顯示出來。

打開（background-image）的URL，可以看到有很多文字，大眾點評所有加密的文字都在這裡啦。和數字一樣，是通過將單個字往左，往上平移顯示出來；找到相應的CSS文件，再將文字與標籤匹配。

仔細看下圖，第一個數字對應的左移，第二個數字對應的上移，下面把左移稱為第一組數據，上移稱為第二組數據。

第一組是以0為首項，140為公差的等差數列，最大為5740，對應第42列；第二組是以70為首項，公差為300的等差數列，最大值為23770，對應第80行。整個思路就是做一個循環，一行一行的匹配，第一行對應70px，第二行370px，依此類推。在每一行中，根據它的第一組數據（左移量）從小到大排列，和每行的文字一一對應。

注意一下，它的換行表達為以及空格對應xa0。所以在匹配的時候，用。代替，用；代替xa0。即result["

"]="。" ；result["xa0"]="；"。匹配的結果：

代碼如下：

把標籤和字對應後就來試著爬一下評論吧。在大眾點評里，長的評論會只顯示部分，它的全部內容在class="desc J-desc"的

標籤，短的評論在class="desc"的

標籤內。

和前面一樣，選擇了美食、按摩、健身、旅遊、游泳五個網頁進行測試，每組只顯示前三條評論，得到的結果如下：

第一條評論就是前面舉例的那條，可以對比一下噢，內容是完全一樣的。

大眾點評的解密到這裡就全部講完了，小夥伴可以自己動手做一次。所有代碼已全部上傳到Github（https://github.com/zuobangbang/text-decoding/tree/master/dianping）。之前上傳的比較亂，以後上傳的代碼會進行精簡和說明，幫助大家更好理解，歡迎在Github上關注我。

作者：左伊雅，目前在南京某 211 大學讀研二，喜歡數據挖掘和爬蟲。

聲明：本文為作者投稿，文章僅用於學習交流，不得用於其他途徑。

熱 文推 薦

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