LF11期_day19~20 补环境（三）案例

阿尔法营

这个只是训练用的，并非真实需求！

url：https://gitblock.cn/

抓包的目标的定位值：login包，里面有s变量

本章痛点难点：学会看懂webpack异常信息，熟悉哪些代码可以被注释！

一、搜索抓包定位

搜索\bs\b: （然后记得打开(x*)正则匹配)

提取特征

拿不定主意的话，可以看特征（一般搜索到的s都会和t一起，将所有可能的结果都打断点！）

二、找加载器

练习目标：不管之前的登录了。我们直接找一下上面的l（红色框中的）

url无法触发都没关系，我们只要这个l对应的加载器，发现是l=i=n(1)

断点后，刷新才能进入断点！（以后抓webpack断点都这样！）

鼠标悬浮n，点进去后，发现就是个加载器，直接整个文件拷贝进去pycharm即可！

三、加载器的初步工作！

准备工作一：webpack运行代码和loader输出日志和加载器导出

javascript 复制代码

t = l.default.parseURLSearchParams(this.props.location.search)
其中l就是加载器：
require("./aerfaloader")

// t = l.default.parseURLSearchParams(this.props.location.search)
// 只要正常输出结果，就算成功！
console.log(window.loader(1).default.parseURLSearchParams(this.props.location.search))

打印函数编号和导出加载器

剩下就是缺啥补啥

异常一：

发现 DOMAIN: Blockey.DOMAIN

DOMAIN: Blockey.DOMAIN。这个看起来是常量。复制拷贝到loader文件即可。

准备二：window和document

因为这两个对象经常补充

javascript 复制代码

window = global
document = {}

准备三：挂proxy吐日志

javascript 复制代码

// 用于吐日志 挂proxy代理
function setProxyArr(proxyObjArr) {
    for (let i = 0; i < proxyObjArr.length; i++) {
        const objName = proxyObjArr[i];
        const handler = {
            get(target, property, receiver) {
                console.log("方法:", "get", "对象:", objName, "属性:", property, "属性类型：", typeof property, "属性值：", target[property], "属性值类型：", typeof target[property]);

                return target[property];
            },
            set(target, property, value, receiver) {
                console.log("方法:", "set", "对象:", objName, "属性:", property, "属性类型：", typeof property, "属性值：", value, "属性值类型：", typeof target[property]);
                return Reflect.set(target, property, value, receiver);
            }
        };
        // 检查并初始化对象
        let targetObject = global[objName] || {};  // 在 Node.js 环境中使用 global
        global[objName] = new Proxy(targetObject, handler);  // 在 Node.js 中使用 global
    }
}

// 实在都不知道优先补document和window
setProxyArr(["document", "window","style","div","head"])

异常二: document.createElement()

分析：里面有style对象。我们先打印出来并且同时挂给代理

var t = document.createElement("style");

loader补document对象

javascript 复制代码

document = {
    createElement:function(ele){
        console.log("document createElement:",ele)
        if(ele === "style"){
            return ele;
        }
    };
}

异常三： e.setAttribute(n, t $n$ )

分析：进浏览器或者loader里面全局搜

输出如下：

异常四：document.querySelector

继续补充：

判断这个方法是否补完了，你就直接运行webpack代码。

如果这个方法通过了，那就会直接显示下一个错误！

异常五：抛异常可注释！

throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' param

meter is invalid.");

只要是异常跟前端有关系，然后不会影响我们加密的逻辑。我们就可以注释掉！后面如果影响到了再说! 一般都不会影响到的！

这里在loader定位注释掉即可！

异常六 n.appendChild(t);

定位：

top和bottom都是跟前端有关的标签，并不影响我们js业务逻辑，直接红框部分注释即可！

如果不知道n是什么可以打断点，看看n，然后mdn网址查就可以知道什么节点了

https://developer.mozilla.org

异常七：createTextNode

这个可以不补。直接注释即可！

异常八：

C && (He = document.createElement("div").style

异常九：

hasownproperty就属于前端操作！直接注释即可

异常十：

div setAttribute

异常十一：

getElementByTagName

这里很注意，就是返回的是数组，所以返回的也一定是数组！

javascript 复制代码

head ={}

document = {
    all: [],
    createElement: function (ele) {
        console.log("document createElement:",ele);
        if(ele === "style"){
            return style;
        }
        if(ele ==="div"){
            return div;
        }
    },
    querySelector:function (){

    },
    createTextNode(){

    },

    getElementsByTagName(tagName){
        console.log("document getElementsByTagName ",tagName)
        if (tagName ==="head"){
            return [head]
        }
    }
}

最后就完成了，但是程序并不会这样结束，这个是正常的！最后我们在webpack返回这个异常即可！

最后运行对应前端和pycharm如下：

别问为什么值是固定的，因为前端已经打不了断点，网页早就失效了！第二是课上yuan老师说的 $表情包：泪目$ 。输出如下就算成功！本案例历时2天（因为工作）