反击爬虫,前端工程师的脑洞可以有多大?

1. 前言

对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额,教育网站的题目等。因为这些内容,往往是一个产品的生命线,必须做到有效地保护。这就是爬虫与反爬虫这一话题的由来。

2. 常见反爬虫策略

但是世界上没有一个网站,能做到完美地反爬虫。

如果页面希望能在用户面前正常展示,同时又不给爬虫机会,就必须要做到识别真人与机器人。因此工程师们做了各种尝试,这些策略大多采用于后端,也是目前比较常规单有效的手段,比如:

  • User-Agent + Referer检测
  • 账号及Cookie验证
  • 验证码
  • IP限制频次

而爬虫是可以无限逼近于真人的,比如:

  • chrome headless或phantomjs来模拟浏览器环境
  • tesseract识别验证码
  • 代理IP淘宝就能买到

所以我们说,100%的反爬虫策略?不存在的。 更多的是体力活,是个难易程度的问题。

不过作为前端工程师,我们可以增加一下游戏难度,设计出一些很(sang)有(xin)意(bing)思(kuang)的反爬虫策略。

3. 前端与反爬虫

3.1 font-face拼凑式

例子:猫眼电影

猫眼电影里,对于票房数据,展示的并不是纯粹的数字。 页面使用了font-face定义了字符集,并通过unicode去映射展示。也就是说,除去图像识别,必须同时爬取字符集,才能识别出数字。

并且,每次刷新页面,字符集的url都是有变化的,无疑更大难度地增加了爬取成本。

3.2 background拼凑式

例子:美团

与font的策略类似,美团里用到的是background拼凑。数字其实是图片,根据不同的background偏移,显示出不同的字符。

并且不同页面,图片的字符排序也是有区别的。不过理论上只需生成0-9与小数点,为何有重复字符就不是很懂。

页面A:

页面B:

3.3 字符穿插式

例子:微信公众号文章

某些微信公众号的文章里,穿插了各种迷之字符,并且通过样式把这些字符隐藏掉。 这种方式虽然令人震惊…但其实没有太大的识别与过滤难度,甚至可以做得更好,不过也算是一种脑洞吧。

对了,我的手机流量可以找谁报销吗?

3.4 伪元素隐藏式

例子:汽车之家

汽车之家里,把关键的厂商信息,做到了伪元素的content里。 这也是一种思路:爬取网页,必须得解析css,需要拿到伪元素的content,这就提升了爬虫的难度。

3.5 元素定位覆盖式

例子:去哪儿

还有热爱数学的去哪儿,对于一个4位数字的机票价格,先用四个i标签渲染,再用两个b标签去绝对定位偏移量,覆盖故意展示错误的i标签,最后在视觉上形成正确的价格…

这说明爬虫会解析css还不行,还得会做数学题。

3.6 iframe异步加载式

例子:网易云音乐

网易云音乐页面一打开,html源码里几乎只有一个iframe,并且它的src是空白的:about:blank。接着js开始运行,把整个页面的框架异步塞到了iframe里面…

不过这个方式带来的难度并不大,只是在异步与iframe处理上绕了个弯(或者有其他原因,不完全是基于反爬虫考虑),无论你是用selenium还是phantom,都有API可以拿到iframe里面的content信息。

3.7 字符分割式

例子:全网代理IP

在一些展示代理IP信息的页面,对于IP的保护也是大费周折。

他们会先把IP的数字与符号分割成dom节点,再在中间插入迷惑人的数字,如果爬虫不知道这个策略,还会以为自己成功拿到了数值;不过如果爬虫注意到,就很好解决了。

3.8 字符集替换式

例子:去哪儿移动侧

同样会欺骗爬虫的还有去哪儿的移动版。

html里明明写的3211,视觉上展示的却是1233。原来他们重新定义了字符集,3与1的顺序刚好调换得来的结果…

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

数据地图系列12|PowerMap(下)图层叠加与复合数据地图!

今天要跟大家分享数据地图系列12——PowerMap(下)图层叠加与复合数据地图! 昨天跟大家介绍的powermap数据地图还有最后一种图形没有来得及介绍,就是...

2827
来自专栏ATYUN订阅号

谷歌详述Smart Linkify的核心动力——机器学习

本周推出的最新版谷歌移动操作系统Android Pie,其最轻松的功能之一就是Smart Linkify。它是一种API,可在文本中检测到地址,电话号码和其他此...

652
来自专栏MixLab科技+设计实验室

人工智能设计师之智能排版v0.0.3

本文继续谈《人工智能设计师》,往期可查阅: 人工智能设计师v0.0.2 DIY一个人工智能设计师_v0.0.1 「 国内首个 」设计+人工智能深度案例分析报告 ...

3117
来自专栏灯塔大数据

分析 | Python抓取婚恋网用户数据,原来这才是年轻人的择偶观

刚好在看决策树这一章,书里面的理论和例子让我觉得这个理论和选择对象简直不能再贴切。看完长相看学历,看完学历看收入。

1243
来自专栏FreeBuf

干货 | 黑客带你还原韩剧《幽灵》中出现的隐写术

0x00 前言 最近有一部剧人气非常高,据说是将军官和医生的浪漫故事。咦?!!这不是好几年前的老片子了么。 后来有人告诉我,是一部韩剧,里面的欧巴超帅妹子超靓。...

2467
来自专栏数据小魔方

像电影一样记录数据可视化

之前写过两篇关于使用animation包来制作时间维度动态可视化GIF图,效果还是很棒的,最近又发现了一个好玩的包——gganimate,它也是主打制作时间维度...

2665
来自专栏华章科技

使用python抓取婚恋网用户数据并用决策树生成自己择偶观

之前在世纪佳缘上爬取过类似的数据,总体的感觉是上面的用户数据要么基本不填要么一看就很假,周围的一些老司机建议可以在花田网上看下,数据质量确实高很多,唯一的缺点就...

592
来自专栏北京马哥教育

掌握这7种Python数据图表的区别,你就是大牛数据分析师!

Python 的科学栈相当成熟,各种应用场景都有相关的模块,包括机器学习和数据分析。数据可视化是发现数据和展示结果的重要一环,只不过过去以来,相对于 R 这样的...

47313
来自专栏DannyHoo的专栏

iOS开发中图片的模糊处理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

611
来自专栏算法+

WebRTC 音频采样算法 附完整C++示例代码

之前有大概介绍了音频采样相关的思路,详情见《简洁明了的插值音频重采样算法例子 (附完整C代码)》。 音频方面的开源项目很多很多。 最知名的莫过于谷歌开源的Web...

6666

扫码关注云+社区