雷速体育Canvas文字加密逆向总结

前言

网址：https://live.leisu.com/wanchang

可以看到这个比分是使用canvas绘制上去的。

了解Canvas

首先了解下canvas

是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

主要了解下 canvas绘制文本

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text

看了上面的简单的教程，姑且粗略地认为绘制文本前需要提供文本。

例如绘制hello world 则需要提供hello world这个字符串。

在下方链接体验canvas文本绘制

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text#textbaseline%E4%BE%8B%E5%AD%90

寻找绘制方法

通过上面的了解，我们只需要找到数据在哪里就可以了。

F12查看network，浏览一遍下来没有发现明显的数据交互请求。全是js、css、png等静态文件。

查看html源代码，也没有明显的数据。

html中的canvas的标签，js需要定位到canvas标签才继续操作，所以我们可以试着全局搜索canvas关键字。

F12打开审查工具，Ctrl+Shift+F全局搜索

一一查看搜索结果，查看到最后一个js文件（match_layout_wc_xxx.js），明显这个js代码被混淆了。一般可以理解为，开发者只会对关键代码进行混淆。

说明这个文件的代码不想给其他人看。

继续往下看，可以看到这明显是Vue框架的写的。这个文件是一个Vue写的子组件。

当这个组件被挂载时，将执行this[_x116622[80]]()，即调用this[_x11622[80]]方法。

对这个位置打上断点，刷新网页，在此断点后查看_x11622[80]

所以，这个组件被挂载时，即执行this.drwaBase()

这个this.drwaBase方法在哪里呢，Vue的方法统一定义在methods内，或者在这个js文件里搜搜看。

我们把断点打在drwaBase方法里的开头和结尾，让其跑完整个drwaBase方法。

可以看到每跑一次drwaBase方法，界面上就有一行数据显示出来。

在结合drwaBase方法没有参数，所以在挂载这个组件前，数据就已经加载出来了。

所以，我需要找到数据何时被初始化。

跟着调用栈往上找。

在wanchang-xxxx.js的文件中找到函数名为initData方法，这个引起了我们的注意。可以看到有一个明显的JSON， 在这一行上打断点。刷新开始调试。

所以，这句代码原本的样子可以还原为：

let _ = JSON.parse($.rot(base64_, STATIC_CONFIG.KST))

其中STATIC_CONFIG.KST根据多次调试，这个值一直是整数6

let _ = JSON.parse($.rot(base64_, 6))

此时，我们接着看下_是什么，展开其中一个数组，可以看到这就是我们所需的数据。

明确需要寻找什么

那么现在，我们的首要目的就是找到base64_变量是什么时候赋值的以及$.rot方法是什么。

找寻方法，理清执行流程

在Console里输入$.rot

在Console返回的代码是实际执行的。也就是：

$.rot = function (t, e) {
   
    const i = roott(t, e);
    return pushmsg(i)
}

点击返回内容可以直接跳转到此方法。

function(t) {
   
    try {
   
        let e = ["t", "ro"];
        if (!t || !window.LeisuJS)
            return;
        t[e[1] + e[0]] = function(t, e) {
   
            const i = roott(t, e);
            return pushmsg(i)
        }
    } catch (t) {
   
        "prod" != STATIC_CONFIG.NODE_ENV && console.error(t)
    }
}(jQuery),

简单的分析，传了一个Jquery进去

然后对其设置了一个方法

t[e[1] + e[0]] = function(t, e) {
   
    const i = roott(t, e);
    return pushmsg(i)
}

替换一下就是：

t.rot = function(t, e) {
   
    const i = roott(t, e);
    return pushmsg(i)
}

可以看到这就是实际执行的代码。

那么到分析到现在整体流程有个大概的雏形了。

1. 超长字符串传入rot方法;
2. 经过roott和pushmsg方法的处理，最终得到有效数据

接着我们使用同样的方法找roott与pushmsg

roott

e.roott = function(t, e) {
   
    for (var i = "", n = 0; n < t.length; n++</