JS逆向中常见的window.webpackJsonp分析

参考文章：
https://blog.csdn.net/yyone123/article/details/107914309

在遇到webpack时，常见的一种形式是：

!function(e) {
    t = {};
    function n(r) {
        if (t[r]) return t[r].exports;
        var i = t[r] = {
            exports: {}
        };
        return e[r].call(i.exports, i, i.exports, n),
        i.exports
    };
    n('1')
}({
    1:function(){console.log(1)},
    5:function(){console.log(5)}
})

但有时候我们会遇到这样的形式：

(window.webpackJsonp = window.webpackJsonp || []).push([[36],{
    't1':function(x){
        console.log(x)
    },
    520:function(x){
        console.log('520' + x)
    },
    't2':function(x){
    }
}]) 

这种形式看着可能更加一头雾水了，需要一步步分析一下究竟是什么意思：
第一部分：

(window.webpackJsonp = window.webpackJsonp || [])

此处因为window.webpackJsonp=window.webpackJsonp的返回值就是window.webpackJsonp，所以可以化简为：

(window.webpackJsonp || [])
//也即：

if (window.webpackJsonp){
//什么都不干
}
else{
window.webpackJsonp = [];
}

说白了，第一部分的意思就是：如果window.webpackJsonp为空，就声明window.webpackJsonp为一个数组变量；如果window.webpackJsonp不为空，那么表达式为window.webpackJsonp，执行第二部分。

第二部分:

push([[36],{}]);

第一部分理解了，第二部分就容易了，就是push参数。绕了一个小弯的是[[36],{…}]，乍一看push，应该是push(a, b)这种形式，但这里是第一层就只push了一个值，是一个二维数组；第二层才push了两个值，第一个值是36，第二个值是一个对象。

第三部分：

{
    't1':function(x){
        console.log(x)
    },
    520:function(x){
        console.log('520' + x)
    },
    't2':function(x){
    }
}

这一部分其实和文章开头webpack的那种形式一样，此处的例子是传入的是对象，所以我们在调用的时候要以(‘函数名’)的方式去调用，如：

console.log(window.webpackJsonp[0][1]['t1'])

这种webpack加载的方式，最终呈现的效果长这样：

当进行JS逆向的时候遇到这种形式的webpack，可以扣出我们需要的目标函数，然后将它们放在标准的webpack里进行调用即可，其他大致流程一样，主要是理解两种webpack不同写法的异同。