如何破解自如的反爬机制

在知乎上看到了一个提问，大概意思是使用xpath为什么无法获取到租房价格信息。问题的链接在这里：

问题地址

看到问题，我也以为很好解决，想着很快写完答案就结束了。结果发现自己是too young too simple。要爬取的网址来自 自如租房。

开始解答这个问题，如下：

看到你这问题 本来想介绍一下xpath，结果发现自己 too young too simple。看样子自如为了反爬竟然用上了雪碧图来显示价格，而且最关键的是 这个雪碧图中数字的显示顺序是随机的，每次刷新都会换一张图。

什么是雪碧图

什么是雪碧图？简单说来就是通过把所有图片合成一张大图，然后以移位方式展示图片其中的某一部分。雪碧图的好处就不说了。而且自如用雪碧图的目的也只是为了反爬。

来具体看看雪碧图的工作原理，我们就来看下自如用来显示价格的这张雪碧图，如下：

所有的数字都合在一张图上。

价格展示

那么为了展示价格要怎么做呢，前端代码怎么写呢？
HTML 部分，如下：

<p value="" class="price">
  <span style="background-position:1000px" class="num rmb">￥</span>
  <span style="background-position:-240px" class="num"></span>
  <span style="background-position:-210px" class="num"></span>
  <span style="background-position:-150px" class="num"></span>
  <span style="background-position:-210px" class="num"></span>
  <span class="gray-6"> (每月)</span>
</p>

主要是通过css设置background-position设置图片移位显示不同的数字。

说是雪碧图呢？这里没有设置图片的代码啊。接着看下CSS部分，如下：

body.ratio2 .price span.num {
    background-size: auto 30px;
    background-image: url(//static8.ziroom.com/phoenix/pc/images/price/e05092a2f84c9cca5e4d881535072ae1.png);
}

background-image设置显示的背景图片。我们可以把其中的url截取出来，然后加上 http 的前缀，如下:

http://static8.ziroom.com/pho...

访问该地址，便会得到与开头类似的图片，如下：

注：不知道这些图片是否会被经常清理，如果查看该回答时是不能打开该图，可以去自如的网站重新查看。

那么有该图，价格怎么显示？这就是html中内嵌的css起作用了。再看显示价格的html代码：

<p value="" class="price">
  <span style="background-position:1000px" class="num rmb">￥</span>
  <span style="background-position:-240px" class="num"></span>
  <span style="background-position:-210px" class="num"></span>
  <span style="background-position:-150px" class="num"></span>
  <span style="background-position:-210px" class="num"></span>
  <span class="gray-6"> (每月)</span>
</p>

可以先来看一下，上面这段代码展示的页面是什么样子的？如下：

展示的价格是2090，然后继续看下雪碧图中数字的顺序、html代码中background-position以及css图片展示大小（30px），就可以推出，显示数字与background-position的关系是：

0px       1
-30px     7
-60px     4
-90px     3
-120px    5
-150px    9
-180px    8
-210px    0
-240px    2
-270px    6

代码实现

如果雪碧图是固定不变的，我们就可以写出类似下面的代码 ：

position_text_map = {
    "background-position:0px": 1,
    "background-position:-30px": 7,
    "background-position:-60px": 4,
    "background-position:-90px": 3,
    "background-position:-120px": 5,
    "background-position:-150px": 9,
    "background-position:-180px": 8,
    "background-position:-210px": 0,
    "background-position:-240px": 2,
    "background-position:-270px": 6
}

price = 0
for span_selector in price_selector.xpath("/span[@class='num']"):
    position = span_selector.xpath('//div/@style')[0]
    price = price * 10 + position_text_map[position]
print(price)

到此便可计算出最终价格。

随机顺序

但是，我要非常可以可惜的是一句，没这么简单，雪碧图每次都是随机生成的，所以只有网站知道每个position对应的数字是多少，而我们却无法得知。

那么，没有办法解决了吗？当然不是，此时就需要用到ocr技术了，即图片转文字。这里需要庆幸的是，价格需人眼好识别，所以没有验证码那么千奇百怪。我们可以从github找一些解决方案。

比如使用tesseract，提供了一套图片文字识别的解决方案。github如下：

tesseract-ocr/tesseract

同样我们也可以找到它对应的python封装：

sirfz/tesserocr

只要我们成功识别出了雪碧图中数字的顺序，下面的事情就很好办了。

总结

简单来说，其实就是把价格上每个数字转化图片展示。而其中用的一个重要技术就是雪碧图。通过这种方式就可以把具体的文字转化为相应的css，类似于某种加密效果。最终就实现了反爬。