JS 调试分析 + 字体解析（汽车之家）

当你看到这篇文章，讲一堆理论和基础，你一定会很烦。。直接开始，上图！！(需要使用一个工具：FontCreator。。如何下载，自己搜！)

惊不惊喜，意不意外，复制粘贴出来也看不懂。。不慌，不就字体反爬吗。右键看一下源码。。有意思，无法右键。这对一个爬虫来说是问题吗？？打开一个别的网站例如：百度？查看源码：替换目标网站完美解决！如图所示：

该找一下疑似目标出现的位置了，搜索大法来一波！！疑似处很快找到。。允许兴奋一下，因为马上开始重点！！下图所示：

至此，可以大概分析出来源码中span标签被替换过了。。怎么做到的呢？？调试Js分析过程吧，没的办法，我为了更好的给大家写这篇文章，也不得不去调试一下。。放松一下，因为接下来，，又要慢慢承受Js调试带来的痛苦了（哈哈哈哈哈），我不带大家一步步的调试了，直接看下图：

其实也不难，甚至我看别的大佬们都直接告诉大家在那里加的密（我更建议大家自己动手来一遍，虽然很无聊，但是在调试上面就又熟练了不好吗？？），虽然很古老，但是也够省去很大一部分时间。。

咳咳，扯远了，回归正题。。Js调试的结果也有了，就是把类名为：.hs_kw + 一个拼接的数字 + _sceneContent2pl（这个是有很多哦，记住了，不是固定的例如：hs_kw0_bestpl, hs_kw1_sceneContent2pl）替换为<span …> &#x + 调试的字符编码</ span> 有没有一丝丝成就感，如标题所说，Js调试分析做完了，已经接近成功不远了。但是这字体解析要怎么搞呢？？该使用开头让大家下载的工具FontCreator登场了，首先要把自定义字体文件下载下来，不知道是啥？？别闹哈，自行百度去了解一下。。如图：

下载完成后，打开FontCreator，把下载的文件扔进去，如图所示就是每个调试出来的字符编码所对应的样子（为什么说是样子，不说对应的字，因为是画出来的，后面有介绍）：

鼠标静止到想查看的文字中可以发现$后面的字符所对应的就是你Js调试出来参数，大小写转换一下就行。每篇文章的字体是动态变化，所以你调试出来的和我调试出来的不一样哈。不要怀疑是自己调试出的问题…

看过别人的文章，构建映射表可以开始尝试了是吧？别慌，，为了更全面的给你们讲解，后面还有坑，，累了吗？休息休息再继续。。

起初我也没有在意，但是很不幸，用我上面讲的流程，每次都要自己手动去构建一个映射表，并且Js调试得到对应的字符编码才行，这是得有多累。如果给1000个车型需求，那不得疯掉。。如上图和下图对比所示：

懵不懵，怕不怕。换一个车型，调试出来的就不一样了（同一个字：一个对应的EE05，一个对应的是EC19）。。所以，要追其根本解决，既然是画上去的，那就查看内部结构。。将下载的ttf 自定义文件，转换为xml文件：

# python示例
from fontTools.ttLib import TTFontfont = TTFont('01.ttf')    # 打开本地字体文件01.ttf，如果手动下载的ttf无法解析，那就使用程序访问链接进行下载，这个原因，不太清除
font.saveXML('01.xml')   # 将ttf文件转化成xml格式并保存到本地，主要是方便我们查看内部数据结构

得到对应的xml 文件后，双击打开，如图所示：

坚持到这步，可以说思路完全清晰了。。要是还不明白的话，，我整理了一下：

1：Js调试分析出生成后的字符编码。

2：使用FontCreator查看是否对应。

3：由于字符编码动态加载，且不固定，使用可以模拟Js运行的模块进行加密函数解析（python ：pyexecjs， pyv8）。

4：匹配字体内部结构画图坐标，构建映射表。

5：开(非)开(常)心(恶)心(心)的写代码。

到这里，部分字体加密网站可以轻松搞定了。但是！对讲解的网站，有所限制。。于是，百度大法用一下。得到一个结论：汽车之家的字体反爬，不仅是编码变化，而且是字体形状也有变化。就是说对象本身变化，不能再直接用比较对象的方法处理。。为了验证一下，找了2个ttf进行比较（双击想查看的字体）如图所示：

完美！这是要玩死人的节奏啊。。以下摘抄大佬的思路，大佬博客在下面：

这里猜想就是x,y坐标的变化是基于一个标准值做一定幅度的随机加减，而且这个范围相对于坐标系来说不会太大。因为变化太大的话字体显示就会有较大的差异，一个网站上的字符显示应该是保持一致的。实际通过几个字体文件计算得出的差值变化在40以内。

总结一下，这里我们要比较两个对象表示的字符是否相同，不能通过直接对比对象是否相等判断，而是要具体比较对象的坐标来判断。首先判断坐标的数量是否相同，如果相同的话，再比较每一个坐标是否相同，只要x,y相差40以内（老版本），我们就认为这2个坐标是相同的。如果两个对象的所有坐标都相同，则认为这两个对象表示同一个字符。这里有个前提就是同一个字符在不同字体文件中包含的x,y坐标数量是不变的，且x,y波动是在一定范围内的。实际测试几个样本来看这两个前提是满足的。还有就是两个不同字符误判成同一字符的概率，首先这38个（老版本）字符坐标有29种数量（老版本），相同坐标数量的就没几个，还有每个坐标都差40以内（老版本）是比较难碰撞的。还有为什么不用0,1来判断，这个值不同字符也有相同的。

具体实现：首先还是要在本地下载一个字体文件01.ttf，并手动确认好编码和字符的对应关系。然后重新访问网站时新加载的字体文件也下载到本地02.ttf，然后还是和上面的一样找到01中相同的对象并确认表示的字符。代码如下：

from fontTools.ttLib import TTFontdef comp(l1,l2):  #定义一个比较函数，比较两个列表的坐标信息是否相同if len(l1)!=len(l2):return Falseelse:mark=1for i in range(len(l1)):if abs(l1[i][0]-l2[i][0])<40 and abs(l1[i][1]-l2[i][1])<40:passelse:mark=0breakreturn mark# 这里不能用以前的那种套路，要改为动态的
u_list=[]
word_list=[] # 分别是对应文本字体font1=TTFont('01.ttf')
be_p1=[]  #保存38个字符的（x,y）信息
for uni in u_list:p1 = []  #保存一个字符的(x,y)信息p=font1['glyf'][uni].coordinates #获取对象的x,y信息，返回的是一个GlyphCoordinates对象，可以当作列表操作，每个元素是（x,y）元组# p=font1['glyf'][i].flags #获取0、1值，实际用不到for f in p:       #把GlyphCoordinates对象改成一个列表p1.append(f)be_p1.append(p1)font2=TTFont('02.ttf')
uni_list2=font2.getGlyphOrder()[1:]
on_p1=[]
for i in uni_list2:pp1 = []p=font2['glyf'][i].coordinatesfor f in p:pp1.append(f)on_p1.append(pp1)n2=0
x_list=[]
for d in on_p1:n2+=1n1=0for a in be_p1:n1+=1if comp(a,d):print(uni_list2[n2-1],word_list[n1-1])x_list.append(word_list[n1-1])
#分行打印出来，方便和FontCreator中进行比较确认
print(x_list[:16])
print(x_list[16:32])
print(x_list[-6:])

这么一看，第四步的思路要改变一下了是吧：匹配字体内部结构画图坐标并计算偏差值，构建映射表。

恭喜你，到此本篇就结束了。你是不是对Js调试又熟练了许多而且又学到了破解字体反爬。。下次再见到字体反爬是不是就会感觉轻松很多。。别急着退出，往下看，还有新大陆！

参考文献

由于网上很多教程都已经很久了，所以只有第四点和ttf内部结构介绍：我更建议大家看一下这位大佬的文章。

https://blog.csdn.net/xing851483876/article/details/82928607

大致流程

方法一：本文讲解的流程。

1：Js调试分析出生成后的字符编码。

2：使用FontCreator查看是否对应。

3：由于字符编码动态加载，且不固定，使用可以模拟Js运行的模块进行加密函数解析（python ：pyexecjs， pyv8）。

4：匹配字体内部结构画图坐标并计算偏差值，构建映射表。
5：开(非)开(常)心(恶)心(心)的写代码。

方法二：OCR光学识别

方法三：曾经看过某大神的博客，大致意思是：可以从Js调试中获得类名和字体的映射关系表，我试过很多遍，我是调试不出来。。文章链接找不到了，如果你知道如何获得。。希望教教我。

案例链接

JS调试g_tk参数

字体加密分析

JS 调试分析 + 字体解析（汽车之家）

抖音xgorgon算法

文书网全局Hook参数

最终-总结篇

重点

在此声明，如需转载，请标注来源。
本教程也是记录自己的技术实践，绝无破坏网站运行的想法，
如若被他人用于商业用途，与本人无关。