如何破解自如的反爬机制

在知乎上看到了一个提问,大概意思是使用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)

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

随机顺序

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

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

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

tesseract-ocr/tesseract

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

sirfz/tesserocr

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

总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏歪脖贰点零

前端工程化的个人思考

在我的印象中,一提到软件工程,首先不会想到的是前端这一块,大概是因为以往工作偏向的缘故。这两年最大的感触就是前端发展的很快,时下的前端开发也远非从网络中抠一段j...

9430
来自专栏格姗知识圈

Chrome开发者工具的小技巧,你应该了解的

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

11550
来自专栏歪脖贰点零

我对"大前端"的偏见

写这篇也是忐忐忑忑,一个后端聊前端的话题,总显得那么不专业,见识所限,仅供参考。此文的来由也是由前篇文章引申出来的,详见前端工程化的个人思考+前端工程化的个人思...

10420
来自专栏ionic3+

【技巧】ionic3修改自定义图标

我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

13930
来自专栏WebJ2EE

CSS:10分钟搞定Flex布局

Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

8320
来自专栏WebJ2EE

React:几个入门小Demo

TodoApp中使用了ES6的“...”语法,由于webpack无法识别,只能借助 babel 的 transform-object-rest-spread 插...

29550
来自专栏WebJ2EE

React:Table 那些事(3-1)—— 基础表格、边框控制

《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某...

16650
来自专栏达达前端

【一起来烧脑】一步学会HTML体系

HTML是用来描述网页的一种语言 叫超文本标记语言 HTML不是一种编程语言,而是一种标记语言 一套标记标签

9210
来自专栏趣谈前端

基于react/vue生态的前端集成解决方案探索与总结

本文主要总结了笔者在多年前端工作中的技术方案选型,结合各种不同类型的项目,搭建了一套完整的前端集成解决方案,主要包含如下内容:

10700
来自专栏WebJ2EE

React:Table 那些事(2)—— 解读 W3C 规范

—— https://www.w3.org/TR/CSS22/sample.html

20530

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励