384 字
1 分钟
webpack反爬处理技巧
webpack*大胖狗
Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具(Module Bundler)。 简单来说,它的核心工作是:把你项目中散落的多个文件(JS、CSS、图片、字体等),分析它们之间的依赖关系,然后打包成一个或多个浏览器能直接运行的“ bundles”(包)。 它不仅能帮助前端打包整理文件,也在反爬虫上面起了很重要的作用,可谓是一举两得😊
1.wenbpack经典调用形式
!function(形参){加载器}([模块1,模块2······]) 以数组调用,其中最后的小括号会将里面内容传给形参!function(形参){加载器}("k1":"模块1","k2":"模块2"·······)以对象形式调用加载器本质:构建一个对象,能够轻松调用所有的功能函数2.实例(数组形式)
//建立一个数组shuzu = [function(){console.log("a功能")},function(){console.log("b功能")}]
!function(e){//加载器逻辑 var t ={};//缓存对象 function n(r){ //判断是否已经在缓存池里了 if(t[r]) return t[r].exports; //第一次调用,写入缓存池对象 var o = t[r] = { i:r, l:!1, exports:{} }; //真正的函数调用 e[r].call(o.exports,o,o.exports,n); return o.exports.exports } window.loader = n;}(shuzu);3.实例(对象形式)
!function(e){ var t = {}; //加载器函数 function n(r){ //判断是否已经在缓存池里了 if(t[r]) return t[r].exports; //第一次调用,写入缓存池对象 var o = t[r] = { i:r, l:!1, exports:{} }; //真正的函数调用 e[r].call(o.exports,o,o.exports,n); return o.exports.exports}({ 1001:function(){ console.log("a调用"); this.exports = 100; }, 1002:function(){ console.log("b调用"); this.exports = 200; }});4.在自执行函数外面调用某个功能模块
//写一个全局变量,类似于读取c++类里的私有成员let a = {}!function(e){ var t = {}; //加载器函数 function n(r){ //判断是否已经在缓存池里了 if(t[r]) return t[r].exports; //第一次调用,写入缓存池对象 var o = t[r] = { i:r, l:!1, exports:{} }; a.n = n; //将加载器函数提取 //真正的函数调用 e[r].call(o.exports,o,o.exports,n); return o.exports.exports}({ 1001:function(){ console.log("a调用"); this.exports = 100; }, 1002:function(){ console.log("b调用"); this.exports = 200; }});5.模块吐日志
//在执行下面调用之前,加上 console.log("模块调用————",r)e[r].call(o.exports,o,o.exports,n);这里容易踩的坑:如果模块不在一个文件里,会出现cannot read of undefined (reading “call”)的错误,意思是模块缺失。所以吐日志能检测缺谁,debugger也是一样的道理。
6.注释初始化的坑
他可能在加载器里调用环境检测的模块,这里要补环境或者直接注释掉他的检测代码_0x3ff111是加载器,那么以下是对他的属性赋值可以不管_0x3ff111['m'] = _0x2c4462, _0x3ff111['c'] = _0x4c8708, _0x3ff111['d'] = function(_0x3c0136, _0x2bf2fe, _0x5914f9) { _0x3ff111['o'](_0x3c0136, _0x2bf2fe) || Object['defineProperty'](_0x3c0136, _0x2bf2fe, { 'enumerable': !0x0, 'get': _0x5914f9 }); } , _0x3ff111['r'] = function(_0x2341e6) { 'undefined' !== typeof Symbol && Symbol['toStringTag'] && Object['defineProperty'](_0x2341e6, Symbol['toStringTag'], { 'value': 'Module' }), Object['defineProperty'](_0x2341e6, '__esModule', { 'value': !0x0 }); } , _0x3ff111(_0x3ff111('a')=0)//这里进行赋值初始化,大概率就是环境检测的位置,要注释掉!7.如何找到加载器呢?
加载器在页面生成时就开始完成,所以你单纯点下一页这种事件是不会触发的!所以找到类似执行加载器的地方,打断点再刷新
一般找加载器我都是拿到pycharm里面然后宏观看缩进的代码,找到加载器位置,而不是在网页端找,比较难找
8.vue和webpack组合起来的坑
_0x263439 = Object(_0x2fa7bd['a'])(this['$store']['state']['url']['index']);像这样的具有$store属性的就是vue,其中this指向vue组件,你在node里直接调用不了(重点是nm的this['$store']['state']['url']['index']这是个定值!研究这么久,不知道放控制台打印一下阿!) webpack反爬处理技巧
https://mizuki.mysqil.com/posts/webpackpojie/ 部分信息可能已经过时









