js逆向-css字体反爬

经典css字体反爬案列解析流程

目标站点：http://match.yuanrenxue.com/match/7 - 猿人云字体反爬
[图片上传中...(image.png-45e848-1604054980083-0)]

所需结果：输出胜点最高的男人的名字
站点分析：

1. 胜点数据用css加密字体进行映射
2. css样式通过 Request URL: data:font/truetype;charset=utf-8;base64,AAEAAAAKAI··· 动态获取

3. 数据展示html标签动态生成
   难点：css样式动态标记映射关系

   
   
   

   image.png

解题流程：

1. 数据为ajax异步数据 断电定位到请求数据的位置

2. 梳理数据展示逻辑 如图

   
   
   

   image.png
3. 下载样式数据文件，或者 拿到base64字符串解码成可识别的woff文件 （具体可看下方完整代码）
4. 生成woff 文件和 xml css映射文件后 使用 fontCearter 工具 查看映射关系 使用 fontTools 生成css-xml文件

5. 映射关系一般在生成xml文件的三个位置 通过工具慢慢找逻辑

   
   
   

   image.png
   
   
   

   image.png
6. 由上图可知 映射关系就是psName标签的序号和name值映射

7. No BB show me the code！

   
   
   

   image.png

作者： Silva
Github： js逆向-经典css反爬

参考推荐：https://blog.csdn.net/qq_36078992/article/details/110409579