【学习心得】webpack技术在爬虫逆向中的应用

news/2024/5/30 2:54:56/文章来源:https://blog.csdn.net/qq_39780701/article/details/136515374

一、webpack技术是什么?

(1)定义 

        Webpack 是一个前端资源模块化管理和打包工具,Webpack技术的出现主要是为了解决现代前端开发中JS代码的模块化组织问题(当然还有别的原因,这里只重点讲和逆向有关的)。

        随着JavaScript生态的发展,特别是CommonJS和ES6模块等规范的引入,项目中代码需要以模块化的方式组织。然而,浏览器原生并不直接支持这些模块加载机制,WebPack通过解析、编译和打包模块,使得开发者可以利用模块化的优点编写可维护性更强的代码。

(2)webpack的格式

简单的webpack格式:

// 简单
!function (e) {加载器
}(接收的参数)

详细的webpack格式: 

// 详细
!function (e) {// 存放加载器var c = {}// 加载器function n(t) {// 创建a对象var a = {i: t,  // 表示模块的标识符l: !1, // 布尔值,初试为false,用来表示当前模块是否被加载exports: {}  // 空对象,用于讲模块导出,存储};c[t] = {i: t,  // 表示模块的标识符l: !1, // 布尔值,初试为false,用来表示当前模块是否被加载exports: {}  // 空对象,用于讲模块导出,存储};// 执行函数里面的代码return e[t].call(a.exports, a, a.exports, n),a.l = !0,a.exports}n.m = e  // n.m 用来存所有的模块n(2)     // 执行当前选中的模块,下标2就是第三个模块
}([function () {...},function () {...},function () {...},function () {...},
])

(3)模块化

        比如下面代码中有三个模块,他们其实就是三个函数,假设这三个模块都有着不同的功能,这里演示代码中显示的是打印不同字符。

function ModuleA() {console.log("a")}
function ModuleB() {console.log("b")}
function ModuleC() {console.log("c")}

        但如果你的写的功能模块有几百上千个,那么这样的书写方式必须放在同一个JS文件中就会非常臃肿,于是出现了这样的代码结构:

!function(i) {function n(t) {return i[t].call(a, b, c, d)}
}([function(t, e, n) {}, function(t, e, r) {}, function(t, e, o) {}, function(t, e) {},
]);

        由于在扣JS加密代码时会经常遇到,所以理解这种语法对于逆向来说是非常重要的。

这种代码组织相当于进行了模块化编程,因此被称为 webpack。上面的代码看起来很费劲,其中的一个重要原因就是函数的参数和函数名都是简单的字母没有含义,都不知道这是干什么。于是我们可以写成下面这种方式便于理解:

!function (allModule) {// 定义执行模块的函数function useModule(whichModule) {// 用call方法来执行函数allModule[whichModule].call(null, "hello world!");}useModule(0)  // 这里指定加载哪一个模块
}([function ModuleA(param) {console.log("A" + param)},  // 用数组装所有的模块,这是第一个function ModuleB(param) {console.log("B" + param)},function ModuleC(param) {console.log("C" + param)},
]);

二、技术拆解

(1)JS的自执行函数

        IIFE 全称 Immediately-invoked Function Expressions,译为立即调用函数表达式,也称为自执行函数、立即执行函数、自执行匿名函数等,IIFE 是一种语法,这种模式本质上就是函数表达式(命名的或者匿名的)在创建后立即执行。当函数变成立即执行的函数表达式时,表达式中的变量不能从外部访问。IIFE 主要用来隔离作用域,避免污染。它长这个样子(我只介绍最常见的形式):

// 第一种形式:用感叹号表示
!function () {console.log("I AM IIFE")
};!function () {console.log(A)
}(A);  // 后面紧跟的小括号里面可以传入参数// 第二种形式:用括号表示
(function () {console.log("I AM IIFE")
}());(() => {console.log("I AM IIFE")
})();

(2)call方法apply方法

        JavaScript 中的 call() 和 apply() 方法都是函数对象(Function.prototype)上的方法,它们的主要功能是改变函数调用时的上下文环境(即函数内部 this 的指向),同时允许你传递参数给该函数。

下面是call方法的使用例子:

function sayHello(name) {console.log('Hello, ' + this.name + ', ' + name);
}let user = { name: 'John' };
sayHello.call(user, 'Doe'); // 输出 "Hello, John, Doe"

下面是apply方法的使用例子:

function sum(a, b) {return a + b;
}let numbers = [3, 5];
let result = sum.apply(null, numbers); // 输出 8,等同于 sum(3, 5)

        总结起来就是,call和apply第一个参数都是函数运行时的上下文对象thisArg。后面的参数不同,对于call来说,参数是一个个传入;对于apply来说,参数是通过一个数组传入。

  • 当需要以逗号分隔的形式传递参数时,可以使用 call() 方法。
  • 当需要以数组形式传递可变数量的参数时,应该使用 apply() 方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1005720.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习vue3第五节(reactive 及其相关)

1、定义 reactive() 创建一个响应式代理对象,不同于ref()可以创建任意类型的数据,而reactive()只能是对象,会响应式的深层次解包任何属性,将其标注为响应式 响应式是基于ES6的proxy实现的代理对象,该proxy对象与原对象…

rtthread stm32h743的使用(七)dac设备使用

我们要在rtthread studio 开发环境中建立stm32h743xih6芯片的工程。我们使用一块stm32h743及fpga的核心板完成相关实验,核心板如图: 1.我们还是先建立工程 2.生成工程后打开mx进行配置,时钟配置如前所讲,不在赘述 3.更改mx文件…

Vue3全家桶 - Vue3 - 【8】模板引用【ref】(访问模板引用 + v-for中的模板引用 + 组件上的ref)

模板引用【ref】 Vue3官网-模板引用;如果我们需要直接访问组件中的底层DOM元素,可使用vue提供特殊的ref属性来访问; 一、 访问模板引用 在视图元素上采用ref属性来设置需要访问的DOM元素: 该 ref 属性可采用 字符串 值的执行设…

浏览器的工作原理

从输入一个url到页面加载完成,中间都发生了什么? 参考原文地址 首先在浏览器地址栏输入一个地址并回车之后, 1. DNS查找 浏览器会进行DNS查找,把域名https://example.com转化为真实的IP地址10.29.33.xx,根据IP地址找…

Linux——权限的理解

Linux——权限的理解 文章目录 Linux——权限的理解一、shell命令以及运行原理二、Linux权限的概念切换用户对指令提权 三、Linux权限管理1. 文件访问者的分类(人)2. 文件类型和访问权限(事物属性)文件类型基本权限文件权限值的表…

Flutter第四弹:Flutter图形渲染性能

目标: 1)Flutter图形渲染性能能够媲美原生? 2)Flutter性能优于React Native? 一、Flutter图形渲染原理 1.1 Flutter图形渲染原理 Flutter直接调用Skia。 Flutter不使用WebView,也不使用操作系统的原生控件,而是…

【Web】浅聊XStream反序列化本源之恶意动态代理注入

目录 简介 原理 复现 具体分析之前 我们反序列化了个什么? XStream反序列化的朴素通识 具体分析 第一步:unmarshal解组 第二步:readClassType获取动态代理类的Class对象 第三步:调用convertAnother对动态代理类进行实例…

十六、接口隔离原则、反射、依赖注入

接口隔离原则、反射、特性、依赖注入 接口隔离原则 客户端不应该依赖它不需要的接口;一个类对另一个类的依赖应该建立在最小的接口上。 五种原则当中的i 上一章中的接口,即契约。 契约就是在说两件事,甲方说自己不会多要,乙方会在…

AWS 入门实践-远程访问AWS EC2 Linux虚拟机

远程访问AWS EC2 Linux虚拟机是AWS云计算服务中的一个基本且重要的技能。本指南旨在为初学者提供一系列步骤,以便成功地设置并远程访问他们的EC2 Linux实例。包括如何上传下载文件、如何ssh远程登录EC2虚拟机。 一、创建一个AWS EC2 Linux 虚拟机 创建一个Amazon…

HBuilder发行微信小程序

首先需要完善mainifest.json中的基本配置 这个需要组测dcloud才可以获取,注册后点击重新获取就可以。 然后发行前还需要完成dcloud的信息,这个他会给你网址 点击连接完成信息填写就可以了 然后就可以发行了。 发行成功后会自动跳转微信小程序&#xff…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的木材表面缺陷检测系统(深度学习+Python代码+UI界面+训练数据集)

摘要:开发高效的木材表面缺陷检测系统对于提升木材加工行业的质量控制和生产效率至关重要。本篇博客详细介绍了如何运用深度学习技术构建一个木材表面缺陷检测系统,并提供了完整的实现代码。该系统采用了强大的YOLOv8算法,并对YOLOv7、YOLOv6…

LeetCode101题:对称二叉树(python3)

对称二叉树定义: 对于树中 任意两个对称节点 L 和 R ,一定有: L.val R.val :即此两对称节点值相等。 L.left.val R.right.val :即 L的 左子节点 和 R 的 右子节点 对称。 L.right.val R.left.val :即 L…

微服务之商城系统

文章目录 一、商城系统建立之前的一些配置1、nacos2、Mysql3、consul【暂时不使用consul注册服务】这个可以跳过4、redis 二、grpc环境搭建三、微服务架构使用的protobuf1、查看proto的版本号2、安装protoc-gen-go和protoc-gen-go-grpc3、生成protobuff以及grpc的文件 一、商城…

EMQX+InfluxDB+Grafana 构建物联网可视化平台

EMQXInfluxDBGrafana 构建物联网可视化平台 本文以常见物联网使用场景为例,介绍了如何利用 EMQ X MQTT 服务器 InfluxDB Grafana 构建物联网数据可视化平台,将物联网设备上传的时序数据便捷地展现出来。 在物联网项目中接入平台的设备数据和数据存储…

Hadoop生态选择(一)

一、项目框架 1.1技术选型 技术选型主要考虑因素:维护成本、总成本预算、数据量大小、业务需求、行业内经验、技术成熟度。 数据采集传输:Flume,Kafka,DataX,Maxwell,Sqoop,Logstash数据存储:MySQL,HDFS…

设计模式-行为型模式-迭代器模式

迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示。[DP] 首先,定义一个接口Iterator,它包含了遍历聚合对象所需的方法: public interface Iterato…

Linux Docker安装redis缓存数据库

文章目录 一、查找Redis镜像二、拉取redis镜像三、创建数据目录和配置文件四、创建redis容器 一、查找Redis镜像 首先到docker镜像仓库下载redis镜像。地址:https://hub.docker.com/搜索redis,如下:找到对应想要下载的版本: 二、…

openAI key 与ChatGPTPlus的关系,如何升级ChatGPTPLus

一、前言 先详细介绍一下Plus会员和Open API之间的区别: 实际上,这两者是相互独立的。举例来说,虽然您开通了Plus会员,并不意味着您就可以使用4.0版本的API。尽管这两个账户可以是同一个,但它们是完全独立的平台。 …

Day15 面向对象进阶——接Day14

Day15 面向对象进阶——接Day14 文章目录 Day15 面向对象进阶——接Day14一、访问修饰符二、Object三、深入String的equals()方法四、final 一、访问修饰符 1、含义:修饰类、方法、属性,定义使用的范围 2、经验: 2.1.属性一般使用private修…

关于安卓ZXing条码识别(二)适配竖屏

背景 不知道如何引入源码的,请看我第一篇文章,安卓源码引入 第一篇文章,粗略讲解了如何引入zxing到安卓的源码中,但是默认是横屏识别。 本文内容,就是如何进行竖屏识别。 环境 win10 as4 jdk8 感谢 博客 实现 …