JS逆向实战17——猿人学第七题 动态字体 随风漂移

声明

本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！

网站

https://match.yuanrenxue.cn/match/7

网站分析

要求:

我们话不多B 直接抓包看看

我们可以看到 这个value的值是加密的，大概率就是我们所要解密的数据了。
与此同时 还看见了有个值是woff。
说到woff，我之前也发过一篇博客https://www.cnblogs.com/zichliang/p/17408064.html
也是讲woff 动态字体的爬的是某点中文网。有兴趣的朋友可以看看。
说道这个value
一般的这种解密都有对应关系的。
比如：

'''
&#xb134 &#xb742 &#xb618 &#xb134
2  3 4 2
'''

也就代表着 &#xb134代表着2 &#xb742代表着3。这样就能搞出个映射关系，然后给他解密出来了。
那我们刷新一下看看这个 &#xb134是否还代表着2

很好 完全不一样。说明每次发起了一个请求就有一个编码的格式。

上文说到请求还返回给我们了一个woff。
woff的值好像有点像base64编码的。
一般来说网站都会附带一个woff的请求，我们找一下看看能不能找得到。

类似于这种的就是woff的请求，只不过这个请求经过了base64编码。而这个base64链接就是上文传给我们的woff的值。
而这个网页的value的编码也是一直在变的。也就代表每次都要去解析这个编码。才能完成解密。
我们首先下载下来这个woff 其次用FontCreator 去解析下这个woff。看看在 FontCreator中的映射关系。
【fontCreator官网： https://fontcreator.com.cn/ 点击免费下载 下载即可 有免费试用权限】

解析出来是这样的，再看看浏览器接口返回给我们的数据

发现这个
3236 ==== &#xb673 &#xc427 &#xb673 &#xb982

可以发现 虽然前面不一样，但是后面这个abcdefg... + 数字编号是一样的。

而本题的要求是

所以我们还需要查找下召唤师名和胜点是如何对应的。我们打上断点。

可以看到 如下代码就是获取召唤师姓名的逻辑。 我们可以通过js 或者是python改写去获得。

let name = ['极镀ギ紬荕', '爷灬霸气傀儡', '梦战苍穹', '傲世哥', 'мaη肆風聲', '一刀メ隔世', '横刀メ绝杀', 'Q不死你R死你', '魔帝殤邪', '封刀不再战', '倾城孤狼', '戎马江湖', '狂得像风', '影之哀伤', '謸氕づ独尊', '傲视狂杀', '追风之梦', '枭雄在世', '傲视之巅', '黑夜刺客', '占你心为王', '爷来取你狗命', '御风踏血', '凫矢暮城', '孤影メ残刀', '野区霸王', '噬血啸月', '风逝无迹', '帅的睡不着', '血色杀戮者', '冷视天下', '帅出新高度', '風狆瑬蒗', '灵魂禁锢', 'ヤ地狱篮枫ゞ', '溅血メ破天', '剑尊メ杀戮', '塞外う飛龍', '哥‘K纯帅', '逆風祈雨', '恣意踏江山', '望断、天涯路', '地獄惡灵', '疯狂メ孽杀', '寂月灭影', '骚年霸称帝王', '狂杀メ无赦', '死灵的哀伤', '撩妹界扛把子', '霸刀☆藐视天下', '潇洒又能打', '狂卩龙灬巅丷峰', '羁旅天涯.', '南宫沐风', '风恋绝尘', '剑下孤魂', '一蓑烟雨', '领域★倾战', '威龙丶断魂神狙', '辉煌战绩', '屎来运赚', '伱、Bu够档次', '九音引魂箫', '骨子里的傲气', '霸海断长空', '没枪也很狂', '死魂★之灵'];
                        $.each(data, function(index, val) {
                            let ppo = mad;
                            for (let imgnum = 1; imgnum <= 5; imgnum++) {
                                ppo = ppo.replace('img_number', yyq * window.page + imgnum_arr[imgnum])
                            }
                            html += ppo.replace('九不想乖', name[yyq + (window.page - 1) * 10]).replace('win_number', imgnum_arr[yyq] * level_arr[window.page] * 88 + '场').replace(/win_rank/g, imgnum_arr[yyq] + 60 + level_arr[window.page] + '%').replace('random_level', imgnum_arr[yyq] * level_arr[window.page] + 100 * level_arr[window.page]).replace('img_number', yyq * window.page).replace('random_rank_number', val.value.replace(/ /g, '') + 'LP');
                            yyq += 1;
                            img_num += 1
                        });

结论：

一个woff对应一个页面，对应一个解析规则。

步骤分析

既然我们知道了 如何去做，其实就很简单了
首先分一下步骤

1. 请求接口 提取出woff的值
2. 转换woff 转换成可视化的样式 并且使用fontTools转换成XML
3. 提取刚刚请求的接口的value的值。
4. 清洗刚刚提取出来的value 只保留后面的数字。(删除&#x)
5. 使用库来解析woff文件转换为XML 再找到对应关系，映射起一张对应表。
6. 按照对应表 与接口值映射从而获取真实数据。

以下提供两种找出映射关系的方法：

根据解析TTGlyph下的on标签 找出映射关系，然后手动写出映射关系。

通过解析两次不同的woff文件。可以发现 在TTGlyph下的on标签不变。如下图：

同事分析1这个数字所对应的字体码 分别是 b953 和 b295
然后我们去xml文件中找相对应的 TTGlyph 下面的标签

可以看出 on标签是一直不会变的，也就意外这 on标签所对应的数字也是不会变的，所以我们可以得到下面这段映射关系。

map_number = {
            '10100100100101010010010010': '0',
            '1001101111': '1',
            '100110101001010101011110101000': '2',
            '10101100101000111100010101011010100101010100': '3',
            '111111111111111': '4',
            '1110101001001010110101010100101011111': '5',
            '10101010100001010111010101101010010101000': '6',
            '1111111': '7',
            '101010101101010001010101101010101010010010010101001000010': '8',
            '10010101001110101011010101010101000100100': '9',
        }

然后再通过解析 name 和这个 on值再做一组映射表就可以拿到真正的映射关系表

最后再通过计算胜点最多那一组 找出召唤师 即可完成题目。

通过转换woff 为图片 然后使用ocr去识别

这种方法 是不被允许的，而且感觉有些太简单了，一般题目有要求不准如此。
这里就简单说一下。