如何破解自如的反爬机制

波罗学

发布于 2019-07-31 11:45:59

1K0

发布于 2019-07-31 11:45:59

文章被收录于专栏：码神路漫漫

在知乎上看到了一个提问，大概意思是使用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 的前缀，如下:

static8.ziroom.com/phoenix/pc/…

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

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

那么有该图，价格怎么显示？这就是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)

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