参考文章:
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不同写法的异同。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐