【含代码】逆向获取 webpack chunk 下的__webpack_require__ 函数,获悉所有的模块以及模块下的函数

背景

Webpack 打包后的代码是不会直接暴露 __webpack_require__ 函数,目的是为了避免污染全局变量同时也为了保护 webpack 的打包后的模块都隐藏在闭包函数里,达到数据的安全性。

而有时我们为了测试某个函数,想直接获取这个内置函数,同时保证这个内置函数能使用其所带的上下文,若单独构建这个函数,创建上下文,难度非常之大,因为这个函数的上下文都在闭包函数里。

而__webpack_require__.m 则可以提取所有的模块,所以拿到 __webpack_require__ 是关键。

源码

海南酷森科技有限公司/webpack-simple-demo - Gitee.com

以下内容均在webpack 4/5 有效,csdn有webpack 1/2的方式,因很少有企业用,这里不做任何探讨

怎么获取一个 webpack 对外暴露的一个全局对象?

对外暴露的全局变量是关键,在普通的 webpack 打包过程中,如果不采用分片技术,就不需要模块化构建,但一般的 web 网页开发,必然要使用模块化构建,如下图关闭后,就是全封闭的概念,几乎不对外暴露任何东西

分片配置关闭状态下,打包后的代码不暴露任何变量,全部都在闭包函数里

这类函数想要单独测试基本无法实现,因为完全是闭包状态,如果想测试,你必须侵入式追加代码,这里不做探讨,留待后续集中处理。

开启分片开关后,我们会发现在打包代码的开头会有 webpackChunk[ProjectName] 这样的全局变量追加在 window 变量下

在 devtools 控制台打印会发现其中 jquery 这个模块被 chunk 了

因为 webpack 把 require 写在闭包里面了,怎么将这个 require 引出来?从 webpack 对于 push 函数的 hook 方式获取

这里先写了 webpackJsonpCallback 回调函数,然后将原函数 chunkLoadingGlobal.push 作为第一参数传进去,重新构建一个新函数,这样调用原函数 push 时,就被 webpackJsonpCallback hook 了,也即能拿到 push 时的 data 数据,还能将原 push 函数作为 parentChunkLoadingFunction(data) 进行执行,这种不侵入原函数的 hook 技术非常有意思。

附带 bind 函数的讲解

// 改变this上下文
const obj = { name: 'Alice' };
function greet() {console.log(this.name);
}const greetBound = greet.bind(obj);
greetBound();  // 输出 'Alice'//预设参数 构建新函数
function add(a, b) {return a + b;
}const add5 = add.bind(null, 5);
console.log(add5(10));  // 输出 15

webpackJsonpCallback.bind 则构建了一个新的函数,并把原 push 作为参数parentChunkLoadingFunction 预设参数传递进webpackJsonpCallback 第一个参数,同时构建了一个新函数给了 chunkLoadingGlobal.push,这样 push 重新赋值的函数没有任何影响,仍然传实参 data 进来。

获取 __webpack_require__

通过上面的技术,我们只需要触发一次 push,传入一个对象,同时对象第三个属性为函数,那么这个函数接受到的实参就是__webpack_require__

具体代码,通过这么简单的一段代码,我们就把__webpack_require__ 这类私有变量变成了挂载到 window,成为公共变量

const id = Date.now();
window.webpackChunkwebpack_demo.push([[id], {}, (__webpack_require__)=>{webpackRequire = __webpack_require__;
}
]);

__webpack_require__.m

这个变量挂着所有的 modules

webpackRequire(692) 可以获取模块

还可以调用模块下的内置函数,这是不是方便很多,不过要想分清楚模块下是哪个模块,目前还在探索

目前只找到一种保留名称的,但是名称仍然不太让人满意,有路径,有些企业可以做到没有路径的,看起来应该是用插件来实现的

对于数字作为 key 的,可以通过遍历所有模块用正则表达式快速查找

const mediaFunctionRegex = /\s+(\w+)\s*\(.*(jquery).*?\)/g;// 遍历模块源代码,查找符合条件的函数
const mediaFunctions = [];
for (const moduleId in webpackRequire.m) {const module = webpackRequire.m[moduleId];const moduleSource = module.toString();console.log(moduleSource);let match;if ((match = mediaFunctionRegex.exec(moduleSource)) !== null) {mediaFunctions.push({moduleId,functionName: match[1],fullMatch: match[0],});}
}console.info(mediaFunctions);

有些模块需要二次获取,或者在结尾加 __webpack_require__(692).default

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

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

相关文章

最新常见的图数据库对比,选型,架构,性能对比

图数据库排名 地址:https://db-engines.com/en/ranking/graphdbms 知识图谱查询语言 SPARQL、Cypher、Gremlin、PGQL 和 G-CORE 语法 / 语义 / 特性 SPARQL Cypher Gremlin PGQL G-CORE 图模式匹配查询 语法 CGP CGP CGP(无可选)1 CGP CGP 语义 子…

CentOS7使用源码安装PHP8教程整理

CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…

php-phar打包避坑指南2025

有很多php脚本工具都是打包成phar形式,使用起来就很方便,那么如何自己做一个呢?也找了很多文档,也遇到很多坑,这里就来总结一下 phar安装 现在直接装yum php-cli包就有phar文件,很方便 可通过phar help查看…

博睿数据获中国信通院泰尔终端实验室致谢!

近日,博睿数据收到中国信息通信研究院(以下简称“中国信通院”)的感谢信,信中对博睿数据积极参与信通院牵头的“铸基计划——高质量数字化转型推进行动”,并在新技术研究、标准建设、课题共创、专家智库等多项工作中提…

分布式理解

分布式 如何理解分布式 狭义的分布是指,指多台PC在地理位置上分布在不同的地方。 分布式系统 分布式系**统:**多个能独立运行的计算机(称为结点)组成。各个结点利用计算机网络进行信息传递,从而实现共同的“目标或者任…

centos哪个版本建站好?centos最稳定好用的版本

在信息化飞速发展的今天,服务器操作系统作为构建网络架构的基石,其稳定性和易用性成为企业和个人用户关注的重点。CentOS作为一款广受欢迎的开源服务器操作系统,凭借其强大的性能、出色的稳定性和丰富的软件包资源,成为众多用户建…

计算机网络 (58)无线局域网WLAN

前言 无线局域网WLAN(Wireless Local Area Network)是一种利用无线通信技术将计算机设备互联起来,构成可以互相通信和实现资源共享的网络体系。 一、定义与特点 定义: WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…

vim 中粘贴内容时提示: -- (insert) VISUAL --

目录 问题现象:解决方法:问题原因: 问题现象: 使用 vim 打开一个文本文件,切换到编辑模式后,复制内容进行粘贴时有以下提示: 解决方法: 在命令行模式下禁用鼠标支持 :set mouse …

总结与展望,龙蜥社区第 30 次运营委员会会议线上召开

2025 年 1 月 20 日,龙蜥社区召开了第 30 次运营委员会线上会议,来自 24 家理事单位的 22 位委员及委员代表出席,本次会议由运营委员凝思软件李晨斌主持。会上总结和回顾了龙蜥社区 1 月运营发展情况,同步了龙蜥社区 3 大运营目标…

新型人工智能“黑帽”工具:GhostGPT带来的威胁与挑战

生成式人工智能的发展既带来了有益的生产力转型机会,也提供了被恶意利用的机会。 最近,Abnormal Security的研究人员发现了一个专门为网络犯罪创建的无审查AI聊天机器人——GhostGPT,是人工智能用于非法活动的新前沿,可以被用于网…

智能体0门槛开发

分享一个智能体开发流程。 2025 年啊,好多专家还有行业报告都觉得这是智能体(AI Agent)应用的头一年。相关的应用在商业、工业、消费等好些领域都到了关键的时候,这意味着从实验室走向大规模实际应用的重要转变。而且呢&#xff0…

计算机网络 (53)互联网使用的安全协议

一、SSL/TLS协议 概述: SSL(Secure Sockets Layer)安全套接层和TLS(Transport Layer Security)传输层安全协议是工作在OSI模型应用层的安全协议。SSL由Netscape于1994年开发,广泛应用于基于万维网的各种网络…

grafana新增email告警

选择一个面板 比如cpu 新增一个临界点表达式 input选A 就是A的值达到某个临界点 触发告警 我这边IS ABOVE0.15就是cpu大于0.15%就触发报警,这个值怎么填看指标的值显示 这里要设置一下报警条件 这边随便配置下 配置标签和通知,选择你的邮件 看下告警…

npm常见报错整理

npm install时报UNMET PEER DEPENDENCY 现象 npm install时报UNMET PEER DEPENDENCY,且执行npm install好几遍仍报这个。 原因 不是真的缺少某个包,而是安装的依赖版本不对,警告你应该安装某一个版本。 真的缺少某个包。 解决 看了下package.json文件,我的react是有的…

24_游戏启动逻辑梳理总结

首先这个项目从游戏根入口GameRoot.cs的初始化开始 分为 服务层初始化Svc.cs 与 业务系统层初始化Sys.cs 而服务层 分为 资源加载服务层ResSvc.cs 与 音乐播放服务层AudioSvc.cs 而在 资源加载服务层ResSvc.cs中 初始化了 名字的 配置文件 而音乐播放服务层AudioSvc.cs 暂时没…

UE求职Demo开发日志#8 强化前置条件完善,给物品加图标

1 强化前置条件完善 StrengthManager里实现一个Check前置的函数 bool CheckPreAllIsActive(int index),所有的前置都已经激活就返回true,否则返回false 之后在强化的时候加入条件检查: 1.所有前置技能全部激活 2.本身没有强化过 最后测…

QT:tftp client 和 Server

1.TFTP简介 TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂、开销不大的文件传输服务。端口号为69。 FTP是一个传输文件的简单协议,…

dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

dm8在Linux环境安装详细步骤 - - 2025年1月之后dm8 环境介绍1 修改操作系统资源限制2 操作系统创建用户3 操作系统配置4 数据库安装5 初始化数据库6 实例参数优化7 登录数据库配置归档与备份8 配置审计9 创建用户10 屏蔽关键字与数据库兼容模式11 jdbc连接串配置12 更多达梦数据…

24年总结 -- 共赴心中所向往的未来

一、前言 我又回来了,前阵子忙着期末考试的东西,也是快半个月没更新了,刚好前几天报名了博客之星的评选,也很幸运的入围了,也借此机会来回顾一下关于2024年的个人成长、创作经历等。 二、个人 本人是一个双非学校的软…

动态规划一> 让字符串成为回文串的最少插入次数

题目: 解析: 状态表示状态转移方程: 初始化填表顺序返回值: 代码: public int minInsertions(String ss) {char[] s ss.toCharArray();int n s.length; int[][] dp new int[n][n]; for(int i n-1; i > 0;…