逆向顶象滑块图片还原

一、查找还原断点

此逆向只针对以下网站：https://www.vivo.com.cn/service/authenticityCheck/index

1.选着事件中创建canvas打上断点

 2.拖动滑块再请求一次后，会断在此处

 3.走到4420行就会出现混淆的图片，还有一个h值，这个就是我们需要重组图片的数组值

 4.从堆栈中去找到我们需要生成h的代码,发现h传入的是一个下划线_，再往前找

 5.需要在此处再打上断点寻找，重新滑动请求一个

 6.这次找到了，就是这个i，生成的代码也在上面，然后就是扣代码了

 二、如何使用nodejs，将扣出的代码还原图片

使用npm安装canvas

const {createCanvas, Image} = require('canvas')
var path = require('path');
var fs = require("fs");
// 创建canvas
var canvas = createCanvas(400, 200)
var ctx = canvas.getContext('2d')
var img = new Image()
img.onload = () => ctx.drawImage(img, 0, 0)
img.onerror = err => {
    throw err
}
img.src = 'p1.jpg'  //加载混淆的图片

// 替换数组生成代码
function ii(r, t) {
    let i;
    // console.log(r)
    if (r.length)
        return r.includes(t);
    for (var a = 0, o = r[(i = 'ht' + "gnel",
        i.split("").reverse().join(""))]; a < o; a++)
        if (r[a] === t)
            return !0;
    return !1
}

function Ir(r) {
    for (var t = [], n = 0; n < r.length; n++) {
        var e = r.charCodeAt(n);
        if (32 === n)
            break;
        for (; ii(t, e % 32);)
            e++;
        t.push(e % 32)
    }
    return t
}

tt = function (e) {
    return Ir(e['o']);
}
// 这个参数在请求获取图片地址时获取
e={"o":"dingxiang651e04883e4b75fa6e2c692cee057d59"} //# 请求图片地址时获取

console.log(tt(e))
var t = tt(e) //替换数组
var v = 12
var f = 200

n = function (r, n) {
    var e = r * v
        , i = v;
    32,
        ctx.drawImage(img, e, 0, i, f, n * v, 0, i, f)
}

function u(t, n) {
    for (var o = 0, r = 32, i = []; o < r; o++)
        i[o] = n(t[o], o);
    return i
}

function restore() {
    u(t, n)
    canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'newp1.png'))) // 生成本地图片(指定文件名)
}
restore()