抓取设了CSS反爬机制的大众点评数据（上）

由于论文的需要，需要爬一点大众点评的美食数据，本想花上一两个小时左右就解决数据问题的。实际操作起来却遇上了很多阻碍，CSS反爬机制的设置让我这个前端知识并不是特别熟的到处蹩脚，花了一晚上才将破解反爬的思路给弄清楚。下面将缕清思路一步步解开大众点评的反爬机制。

下面将列出它所设下三个加密陷阱，即地址文本、店铺评分、具体评论的加密。如图1，图2。

图1   地址文本和评分的加密

图2   具体评论 的加密

 上图可能看不出什么，但是打开它的源代码我就蒙了，从没遇到过这种情况，如图3，图4，图5。

图3

图4

图5

这是相当的恶心，对一些爬虫新手简直毁灭打击，难怪大众点评的数据卖得如此的贵！ Ok，大众点评的CSS反爬措施介绍到这，下面开始逐一解决。

1、地址文本、店铺评分

进入美食的页面，就是有多个美食店铺页面的那个，接下来打开 开发者工具 【Ctrl+Shift+i】——【Network】——【勾选Font】

图6

上面圈住的是两个大众点评自定义的字体，.woff就是字体格式。

【右键】——【Copy link address】复制到新的网页就可以将字体文件下载到本地了，然后去网上下载一款叫 FontCreator 的工具。

从 FontCreator 中打开以上的两个文件如下图。

图7

也就是说大众点评利用了这两个字体文件对地址文本和店铺评分进行了加密，我们只需要找出规律替换即可。

对照着打开网页的源代码，可以发现数字‘8’与 ‘&#xe2d8’ 对应 ，此时我们再打开刚刚下载的 bae6307b.woff 文件，如下图，可以发现图8与图9的后面三位字符串是对应的，也就是说大众点评利用了 bae6307b.woff  这个文件对0至9的数字进行对应加密。

图8

图9

那么还有一个刚下载的 e7dbc6b4.woff 文件呢？我猜测与地址文本相对应，别急，我继续验证。

我就拿‘海鲜‘的‘海’这个字为例，为什么不直接用海鲜这个词？因为它把字一个一个的拆开进行加密了，所以我们要一个一个进行复原。

如下图，可以发现，源代码里加密的后三位字符串与 e7dbc6b4.woff 文件里的后三位字符串完全一致！所以我们只需要调用FontTools库进行操作就能取出对应的编号了，我将在（下）篇进行代码操作，这篇文章只进行思路讲解。

对解密了的地址文本、店铺评分两个部分做一个小结。我们之所以在网页源代码看不到具体内容的原因是因为大众点评自定义了两个字体包对其进行了替换，bae6307b.woff 和 e7dbc6b4.woff 文件分别对应着数字0~9和普通字符串。而与其映射的点都是编号后面的三位字符串，所以在代码中按照这个思路即可完成解密。

2、具体评论    

首先我们打开一个美食商店的具体评论，用开发者工具的选择工具选定评论区与对应的代码相对比，会发现一个问题，就是源码中的评论不全。源码中的评论并不是一句话连起来的，而是一个字一个字间隔出现的而且会出现字符缺失的现象。如图11，图12。

图11

图12

第一次接触的时候简直一头雾水，接着我尝试的点入了具体加密字所在的<svgmtsi>标签，发现源码的右边会出现关于这一元素的基本格式：位置、大小、字体大小等，里面还有个url，进入url后发现了一大串的隐藏文字。如图13，图14。

图13

图14

这就是我们所找的网页源代码里加密字的替换规则，接着继续打开这个网页的源码，如图15。

图15

这里要有两个点需要我们注意，一个是文字的大小font-size；第二个就是每一行都会有一个y标签会对应一个数值，我看了网上的一些教程，了解到与这两个点对应的就是图二中下标签内元素对应的background对应的两个位置元素（区别是位置元素里面的数值是负值），定位规则就是第二个元素对应的是y值决定该class标签替换的元素在哪一行，而第一个元素数值与文字大小之比对应的是这一行的第几个即为偏移量，从而形成映射关系。

举个例子，比如说‘有’这个字，如图16，他的background两个元素分别为-280.0px和-1182.0px，-1182.0px说明元素位于 1159 至1205 的那一行，后者为所定位的行数。这里可能难理解，如图17。也就是1182并不直接是行数，而是1182所在的那一行的行数！所以‘有’所在的行数为1205。

我们找到了行数的映射关系，那么剩下的一个数字必然是偏移量的关系了，然后通过第一个位置元素数值计算偏移量：280/14+1 =21（因为文字大小为14px所以需要除以14），如图18验证即为所得

图16

图17

图18

具体评论解密的小结：

    1.找到评论中<svgmtsi>标签对应替代文字url，点进去在点开源代码找到替换文字大全；

    2.根据y标签数值以及文字偏移量，化成对应元素位置格式，写出文字与元素位置所对应的映射关系：

    3.访问<svgmtsi>标签对应的位置元素数值（在评论源码中就能找到相关url的链接），形成<svgmtsi>标签元素与位置元素数值对应的映射；

    4.然后就是通过以上的一一映射，可以把class标签元素与文字进行替换。

总体思路就是这样，部分内容借鉴了网友的方法和总结，地址文本的字符串替换中还好在github上有人手动输出了刚好可以复制。总结下来我觉得确实很繁琐，想要抓取下来并不是一件易事。我将在（下）篇中实现代码部分。

 

更多原创文章请关注我的公众号：DataUser

一枚数据分析的爱好者~