实战webpack类另类技巧

简介: 实战webpack类另类技巧
项目地址:aHR0cHM6Ly93ZWIuZXd0MzYwLmNvbS9yZWdpc3Rlci8jL2xvZ2luP19rPXduaXB6Ng==

观前提示:

本文章仅供学习交流,切勿用于非法通途,如有侵犯贵司请及时联系删除





 前言

此方法受志远大佬启发 nb就完事了

编程喵交流群:747776374

一般遇到打包js我们都会很头疼 因为它的套娃模式 扣取代码也很头疼

我们常用的方法为 1.直接一步一步扣 2.无脑暴力扣

现在多出一种方法 3.半自动自吐webpack


直接开始演示



 定位加密点

以下为常规操作

  1. 登录
  2. 打开F12抓包
  3. 输入数据点击登录
  4. 找到关键包
  5. 根据关键字段找到加密点

我们就从这里开始讲

找到此处加密后 发现 加密是调用v方法下的Encrypt 那v方法在哪呢?

往上看

看到 v=r(409) 接下来就要用上本节神器


 原理

webpack的调用类似于链式调用一个接着一个 但是每次调用都要经过解析器

那我们能不能在解析器中hook他的代码 让他自行储存这一串代码呢?

答案是可以的

回到代码中可以看到每次调用代码都需要经过D函数

e[r].call 这里打上断点 接着查看

可以看到 e储存了所有的函数 而r自然就不用我多说了

我们 e[r] 输出一下

输出的是一个函数 那我们要怎样把他输出为文本呢?

俩种方法1. (e[r]).toString()     2. e[r]+"" 都是可以的


原理就是这样子 跟着志远的思路以及个人的习惯改动了一下hook代码

---zhiyuan俩个字时刻提醒我 跟着大佬走 吃香的喝辣的

window.zhiyuan = DD  D = function(r)D   e[r]的e和r

这三者皆要根据实际情况进行改动

window.zhiyuan = D;
window._wbpk =  r.toString()+":"+(e[r]+"")+ ",";
D = function(r){
  window._wbpk = window._wbpk + r.toString()+":"+(e[r]+"")+ ",";
  return window.zhiyuan(r);
}


 使用方法


回到 v=r(409) 的位置 下俩个断点 后刷新

断下来后按F11进入函数 跳到  e[r].call 后在控制台上输入hook代码回车

为什么要在这个位置呢?

因为我们通过我们的hook代码可知 我们要hook D代码 而且其中的e要为全部函数的数组 r要是当前调用的位置 找来找去 e[r].call 算是比较优的位置了 但是 不同网站的webapck可能会出现不兼容 但是明白原理后 改动代码灵活运用是很简答的啦

加入hook代码后呢 按下F8 跳到g=r(442) 这里

现在 我们就可以在控制台输入window._wbpk 看看

已经吐出了一堆且完整的函数了 完美!


 调用与改写

玩过webpack的朋友就知道调用就是把解析器加上去导出函数 再加上刚刚拿到的那段代码就行了

    改写

       1.导出D函数

       2.把尾部([])改为({})

!function(e) {
    var r = window.webpackJsonp;
    window.webpackJsonp = function(t, n) {
        for (var o, i, a = 0, c = []; a < t.length; a++)
            i = t[a],
            H[i] && c.push.apply(c, H[i]),
            H[i] = 0;
        for (o in n)
            Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
        for (r && r(t, n); c.length; )
            c.shift().call(null, D);
        if (n[0])
            return x[0] = 0,
            D(0)
    }
    ;
    var t = this.webpackHotUpdate;
    this.webpackHotUpdate = function(e, r) {
        !function(e, r) {
            if (!b[e] || !w[e])
                return;
            for (var t in w[e] = !1,
            r)
                Object.prototype.hasOwnProperty.call(r, t) && (d[t] = r[t]);
            0 == --h && 0 === v && m()
        }(e, r),
        t && t(e, r)
    }
    ;
    var n = !1;
    try {
        Object.defineProperty({}, "x", {
            get: function() {}
        }),
        n = !0
    } catch (E) {}
    var o = !0
      , i = "6240168fce245f43f633"
      , a = {}
      , c = [];
    var l = []
      , f = "idle";
    function s(e) {
        f = e;
        for (var r = 0; r < l.length; r++)
            l[r].call(null, e)
    }
    var p, d, u, h = 0, v = 0, y = {}, w = {}, b = {};
    function O(e) {
        return +e + "" === e ? +e : e
    }
    function g(e, r) {
        if ("idle" !== f)
            throw new Error("check() is only allowed in idle status");
        "function" == typeof e ? (o = !1,
        r = e) : (o = e,
        r = r || function(e) {
            if (e)
                throw e
        }
        ),
        s("check"),
        function(e) {
            if ("undefined" == typeof XMLHttpRequest)
                return e(new Error("No browser support"));
            try {
                var r = new XMLHttpRequest
                  , t = D.p + "" + i + ".hot-update.json";
                r.open("GET", t, !0),
                r.timeout = 1e4,
                r.send(null)
            } catch (n) {
                return e(n)
            }
            r.onreadystatechange = function() {
                if (4 === r.readyState)
                    if (0 === r.status)
                        e(new Error("Manifest request to " + t + " timed out."));
                    else if (404 === r.status)
                        e();
                    else if (200 !== r.status && 304 !== r.status)
                        e(new Error("Manifest request to " + t + " failed."));
                    else {
                        try {
                            var n = JSON.parse(r.responseText)
                        } catch (o) {
                            return void e(o)
                        }
                        e(null, n)
                    }
            }
        }(function(e, t) {
            if (e)
                return r(e);
            if (!t)
                return s("idle"),
                void r(null, null);
            w = {},
            b = {},
            y = {};
            for (var n = 0; n < t.c.length; n++)
                b[t.c[n]] = !0;
            for (var o in u = t.h,
            s("prepare"),
            p = r,
            d = {},
            H)
                _(o);
            "prepare" === f && 0 === v && 0 === h && m()
        })
    }
    function _(e) {
        b[e] ? (w[e] = !0,
        h++,
        function(e) {
            var r = document.getElementsByTagName("head")[0]
              , t = document.createElement("script");
            t.type = "text/javascript",
            t.charset = "utf-8",
            t.src = D.p + "" + e + "." + i + ".hot-update.js",
            r.appendChild(t)
        }(e)) : y[e] = !0
    }
    function m() {
        s("ready");
        var e = p;
        if (p = null,
        e)
            if (o)
                j(o, e);
            else {
                var r = [];
                for (var t in d)
                    Object.prototype.hasOwnProperty.call(d, t) && r.push(O(t));
                e(null, r)
            }
    }
    function j(r, t) {
        if ("ready" !== f)
            throw new Error("apply() is only allowed in ready status");
        function n(e) {
            for (var r = [e], t = {}, n = r.slice(); n.length > 0; ) {
                var i = n.pop();
                if ((e = x[i]) && !e.hot._selfAccepted) {
                    if (e.hot._selfDeclined)
                        return new Error("Aborted because of self decline: " + i);
                    if (0 === i)
                        return;
                    for (var a = 0; a < e.parents.length; a++) {
                        var c = e.parents[a]
                          , l = x[c];
                        if (l.hot._declinedDependencies[i])
                            return new Error("Aborted because of declined dependency: " + i + " in " + c);
                        r.indexOf(c) >= 0 || (l.hot._acceptedDependencies[i] ? (t[c] || (t[c] = []),
                        o(t[c], [i])) : (delete t[c],
                        r.push(c),
                        n.push(c)))
                    }
                }
            }
            return [r, t]
        }
        function o(e, r) {
            for (var t = 0; t < r.length; t++) {
                var n = r[t];
                e.indexOf(n) < 0 && e.push(n)
            }
        }
        "function" == typeof r ? (t = r,
        r = {}) : r && "object" == typeof r ? t = t || function(e) {
            if (e)
                throw e
        }
        : (r = {},
        t = t || function(e) {
            if (e)
                throw e
        }
        );
        var l = {}
          , p = []
          , h = {};
        for (var v in d)
            if (Object.prototype.hasOwnProperty.call(d, v)) {
                var y = n(w = O(v));
                if (!y) {
                    if (r.ignoreUnaccepted)
                        continue;
                    return s("abort"),
                    t(new Error("Aborted because " + w + " is not accepted"))
                }
                if (y instanceof Error)
                    return s("abort"),
                    t(y);
                for (var w in h[w] = d[w],
                o(p, y[0]),
                y[1])
                    Object.prototype.hasOwnProperty.call(y[1], w) && (l[w] || (l[w] = []),
                    o(l[w], y[1][w]))
            }
        for (var b = [], g = 0; g < p.length; g++) {
            w = p[g];
            x[w] && x[w].hot._selfAccepted && b.push({
                module: w,
                errorHandler: x[w].hot._selfAccepted
            })
        }
        s("dispose");
        for (var _ = p.slice(); _.length > 0; ) {
            w = _.pop();
            if (P = x[w]) {
                for (var m = {}, j = P.hot._disposeHandlers, H = 0; H < j.length; H++) {
                    (S = j[H])(m)
                }
                a[w] = m,
                P.hot.active = !1,
                delete x[w];
                for (H = 0; H < P.children.length; H++) {
                    var E = x[P.children[H]];
                    if (E)
                        (k = E.parents.indexOf(w)) >= 0 && E.parents.splice(k, 1)
                }
            }
        }
        for (var w in l)
            if (Object.prototype.hasOwnProperty.call(l, w)) {
                var P = x[w]
                  , A = l[w];
                for (H = 0; H < A.length; H++) {
                    var k, q = A[H];
                    (k = P.children.indexOf(q)) >= 0 && P.children.splice(k, 1)
                }
            }
        for (var w in s("apply"),
        i = u,
        h)
            Object.prototype.hasOwnProperty.call(h, w) && (e[w] = h[w]);
        var M = null;
        for (var w in l)
            if (Object.prototype.hasOwnProperty.call(l, w)) {
                P = x[w],
                A = l[w];
                var N = [];
                for (g = 0; g < A.length; g++) {
                    q = A[g];
                    var S = P.hot._acceptedDependencies[q];
                    N.indexOf(S) >= 0 || N.push(S)
                }
                for (g = 0; g < N.length; g++) {
                    S = N[g];
                    try {
                        S(l)
                    } catch (J) {
                        M || (M = J)
                    }
                }
            }
        for (g = 0; g < b.length; g++) {
            var T = b[g];
            w = T.module;
            c = [w];
            try {
                D(w)
            } catch (J) {
                if ("function" == typeof T.errorHandler)
                    try {
                        T.errorHandler(J)
                    } catch (J) {
                        M || (M = J)
                    }
                else
                    M || (M = J)
            }
        }
        if (M)
            return s("fail"),
            t(M);
        s("idle"),
        t(null, p)
    }
    var x = {}
      , H = {
        11: 0
    };
    function D(r) {
        if (x[r])
            return x[r].exports;
        var t = x[r] = {
            exports: {},
            id: r,
            loaded: !1,
            hot: function(e) {
                var r = {
                    _acceptedDependencies: {},
                    _declinedDependencies: {},
                    _selfAccepted: !1,
                    _selfDeclined: !1,
                    _disposeHandlers: [],
                    active: !0,
                    accept: function(e, t) {
                        if (void 0 === e)
                            r._selfAccepted = !0;
                        else if ("function" == typeof e)
                            r._selfAccepted = e;
                        else if ("object" == typeof e)
                            for (var n = 0; n < e.length; n++)
                                r._acceptedDependencies[e[n]] = t;
                        else
                            r._acceptedDependencies[e] = t
                    },
                    decline: function(e) {
                        if (void 0 === e)
                            r._selfDeclined = !0;
                        else if ("number" == typeof e)
                            r._declinedDependencies[e] = !0;
                        else
                            for (var t = 0; t < e.length; t++)
                                r._declinedDependencies[e[t]] = !0
                    },
                    dispose: function(e) {
                        r._disposeHandlers.push(e)
                    },
                    addDisposeHandler: function(e) {
                        r._disposeHandlers.push(e)
                    },
                    removeDisposeHandler: function(e) {
                        var t = r._disposeHandlers.indexOf(e);
                        t >= 0 && r._disposeHandlers.splice(t, 1)
                    },
                    check: g,
                    apply: j,
                    status: function(e) {
                        if (!e)
                            return f;
                        l.push(e)
                    },
                    addStatusHandler: function(e) {
                        l.push(e)
                    },
                    removeStatusHandler: function(e) {
                        var r = l.indexOf(e);
                        r >= 0 && l.splice(r, 1)
                    },
                    data: a[e]
                };
                return r
            }(r),
            parents: c,
            children: []
        };
        return e[r].call(t.exports, t, t.exports, function(e) {
            var r = x[e];
            if (!r)
                return D;
            var t = function(t) {
                return r.hot.active ? x[t] ? (x[t].parents.indexOf(e) < 0 && x[t].parents.push(e),
                r.children.indexOf(t) < 0 && r.children.push(t)) : c = [e] : (console.warn("[HMR] unexpected require(" + t + ") from disposed module " + e),
                c = []),
                D(t)
            };
            for (var o in D)
                Object.prototype.hasOwnProperty.call(D, o) && (n ? Object.defineProperty(t, o, function(e) {
                    return {
                        configurable: !0,
                        enumerable: !0,
                        get: function() {
                            return D[e]
                        },
                        set: function(r) {
                            D[e] = r
                        }
                    }
                }(o)) : t[o] = D[o]);
            function i(e, r) {
                "ready" === f && s("prepare"),
                v++,
                D.e(e, function() {
                    try {
                        r.call(null, t)
                    } finally {
                        v--,
                        "prepare" === f && (y[e] || _(e),
                        0 === v && 0 === h && m())
                    }
                })
            }
            return n ? Object.defineProperty(t, "e", {
                enumerable: !0,
                value: i
            }) : t.e = i,
            t
        }(r)),
        t.loaded = !0,
        t.exports
    }
    window.output=D;
    D.e = function(e, r) {
        if (0 === H[e])
            return r.call(null, D);
        if (H[e] !== undefined)
            H[e].push(r);
        else {
            H[e] = [r];
            var t = document.getElementsByTagName("head")[0]
              , n = document.createElement("script");
            n.type = "text/javascript",
            n.charset = "utf-8",
            n.async = !0,
            n.src = D.p + "js/" + e + "." + i + ".chunk.js",
            t.appendChild(n)
        }
    }
    ,
    D.m = e,
    D.c = x,
    D.p = "/register/",
    D.h = function() {
        return i
    }
}({
/*
这里粘贴刚刚吐出来的函数
*/
});

怎么调用呢?

直接 window.output(409)  就完事了!

也许有人会奇怪 output 哪里来的

   output就是D函数 我把他给导出来了


 结果


是不是很nb 麻麻再也不担心我扣webpack费肝了

[完]

相关文章
|
10月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
560 0
|
JavaScript 前端开发
WebPack实战 WebPack打包Vue项目
WebPack实战 WebPack打包Vue项目
WebPack实战 WebPack打包Vue项目
|
JavaScript 前端开发
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
169 0
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
|
缓存 JavaScript 编译器
【Vue五分钟】五分钟了解webpack实战配置案例详情
接下来讲怎么打包类库文件 library(里面有几个 JS 文件, index.js 将这些文件里面的方法导出给其它引入这个库的文 件使用),当然了这个肯定不能直接被使用,还是需要安装 配置 webpack 什么的。
【Vue五分钟】五分钟了解webpack实战配置案例详情
|
存储 缓存 JavaScript
网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)
nginx 有一个模块是 gzip 模块,然后你只要开启了,nginx就会帮你来把数据(静态资源 和 接口数据)进行压缩,然后传入到客户端,客户端来解压,然后在进行代码的读取,其实这一步就是节约带宽,减少传输的代码包的数量。从而节约传输时间。然后网站就能很快打开了。
网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)
|
存储 JavaScript 前端开发
全栈开发实战|Vue进阶——使用静态模块打包工具webpack
全栈开发实战|Vue进阶——使用静态模块打包工具webpack
350 0
全栈开发实战|Vue进阶——使用静态模块打包工具webpack
|
JavaScript 前端开发 CDN
webpack性能优化配置与实战(二)
webpack性能优化配置与实战(二)
199 0
webpack性能优化配置与实战(二)
|
JSON 监控 JavaScript
webpack性能优化配置与实战(一)
webpack性能优化配置与实战(一)
265 0
webpack性能优化配置与实战(一)
|
JavaScript 前端开发 程序员
Webpack + Vue.js 实战
在Vue.js中创建页面需要以下两步 (1) 创建路由 (2) 新建 vue 页面
117 0
Webpack + Vue.js 实战
|
3月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
83 1