字体反爬，一种来自字体设计师的跨行反爬案例

本篇博客涉及的内容非常有价值，尤其是在反爬领域。
核心内容为自定义字体文件反爬。

准备工作

在正式编写代码前，需要先安装 FontCreator ，它是一个字体编辑器，支持多种字体格式，可以用于创建、编辑和转换字体文件。

关于工具的使用，可以查看 《爬虫 120》 专栏中字体反爬的相关文章。

除此之外，还需要准备一个字体文件，用于设置反爬内容。

字体文件包含 0-9 这几个数字，点击进行下载。

由于我们不是专业的字体设计师，所以这里直接采用已有的字体文件即可。

在 Web 页面中使用字体文件

拿到字体文件后，就可以在网页中使用自定义字体了。

还有一点需要注意，字体与编码要一一对应，稍后代码中会有体现。

将字体文件存放在项目的静态文件目录中，例如 static/font。

在项目的 CSS 文件中使用 @font-face 来引用字体文件。

@font-face {
  font-family: "ca-font";
  src: url('{{url_for("static",filename="font/ca_font.woff")}}');
}
.stonefont {
  font-family: ca-font;
  font-size: 16px;
}

在项目的 HTML 文件中使用 font-family 来使用自定义字体。

<div class="container">
  <span class="stonefont">&#xf161;&#xf63a;.&#xef29;&#xf1e0;</span>
</div>

这里出现了文字编码，&#xf161 对应数字 9， 对应数字 1，依次类推。

文字编码可以通过刚刚的 FontCreator 工具查看，下图红框区域的 uniF161 时文字的 unicode 编码，转换到网页中对应如下。

整理文字编码

在编写 Flask 反爬代码前，先整理出该字体文件编码与字形的对应关系。

• uniF161： 对应数字 9；
• uniF63A： 对应数字 1；
• uniEF29： 对应数字 2；
• uniE7D6： 对应数字 4；
• uniF1E0： 对应数字 7；
• uniE092： 对应数字 3；
• uniF280： 对应数字 6；
• uniEEF0： 对应数字 0；
• uniE60F： 对应数字 8；
• uniEF9D： 对应数字 5；

Flask 中随机一串数字，渲染到前台

在 Flask 中随机定义一个数字，例如 984367，然后再前台实现渲染。

先看一下完整代码：

# 字体反爬
@antispider.route('/font')
def font():

    fonts = ['','','','','','','','','','']
    mynum = 9843670
    ret = list(map(int, str(mynum)))

    new_num_str = "".join([fonts[_] for _ in ret])

    html_string = '<span class="stonefont">'+new_num_str+'</span>'
    # Markup()
    safe_html = Markup(html_string)
    return render_template("antispider/font.html",new_num_str=safe_html)

这里将 span 标签作为一个整体进行了输出，并且用到了 Markup 类，该类可以将一个字符串标记为安全的 HTML 代码。可以使用 Markup.escape() 方法将普通字符串转换为安全的 HTML 代码，也可以使用 Markup() 构造函数将一个字符串标记为安全的 HTML 代码。

如果不这样使用，仅传递编码之后的数字到前台，会得到下述异常效果，即数字编码被当成了普通字符串进行输出。

当然，这里仅对数字编码字符串进行操作，效果也是一样的。

html_string = new_num_str
# Markup()
safe_html = Markup(html_string)
return render_template("antispider/font.html", new_num_str=safe_html)

总结

本篇博客实现的是最简单的字体反爬，实战中我们还可以动态生成字体文件编码，动态生成字体文件内容增强反爬。

本案例完善后，将会上传到爬虫训练场中供大家学习：pachong

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 851 篇原创博客