html字体_斗鱼关注人数爬取 字体反爬的攻与防

转载自:https://cjting.me/2020/07/01/douyu-crawler-and-font-anti-crawling/

这个字体反爬虫的攻防挺有趣的,虽然跟安全没有太大关系,前端的分析调试也可以在口令爆破等情况下参考,全文如下:

之前因为业务原因需要爬取一批斗鱼主播的相关数据,在这过程中我发现斗鱼使用了一种很有意思的反爬技术,字体反爬。

打开任何一个斗鱼主播的直播间,例如 这个主播,他的关注人数数据显示在右上角:

斗鱼在关注数据这里使用了字体反爬。什么是字体反爬?也就是通过自定义字体来自定义字符与渲染图形的映射。比如,字符 1 实际渲染的是 9,那么如果 HTML 中的数字是 111,实际显示就是 999。

在这种技术下,传统的通过解析 HTML 文档获取数据的方式就失效了,因为获取到的数据并不是真实数据。

Tip: 下文中所谈的具体细节高度依赖斗鱼网页的实现,很有可能当你阅读这篇文章的时候已经不再是那样。虽然代码会过时地很快,但是,技巧和方法是永远不会过时的。

进攻

感兴趣的读者可以打开控制台,看看显示关注人数的那个 span 元素里面的内容,会发现根本不是显示的数字。

从上图可以看出,显示的是 59605,这个是真实值,但是字符却是 96809,这个是虚假值。右边的 font-family 告诉我们这个元素使用了一个自定义字体。

从 Network 面板中的我们可以找到这个字体,具体链接是 mpepc5unpb.woff。

如果大家将字体下载下来,使用如下的 HTML 代码来渲染它,我们就可以看得很清楚: