webpack hook自动扣代码自动下载

1、背景

js逆向经常会遇到webpack,需要进行扣除模块,根据key手动搜索太慢,网上有个自动扣代码的脚本,玩逆向的小伙伴应该都很熟悉了。

//在加载器后面下断点  执行下面代码
// 这里的f 替换成需要导出的函数名
window.zhiyuan = f;
window.wbpk_ = "";
window.wbpk_json = {};
window.isz = false;
f = function(r){
	if(window.isz)
	{
        // e[r]里的e 是加载器里的call那里
		window.wbpk_ = window.wbpk_ + r.toString()+":"+(e[r]+"")+ ",";
	}
	return window.zhiyuan(r);
}
//在你要的方法加载前下断点 执行 window.isz=true
//在你要的方法运行后代码处下断点  执行 window.wbpk_  拿到所有代码  注意后面有个逗号

但是这里有个问题,在控制台输出的是一个字符串,如果直接复制粘贴到Python里面运行会报错,原因是控制台里面有很多转义符号“\”,如果我们一个个去替换,就很麻烦,而且会容易出错。如果"\\“是这种符号可以直接替换,我遇见的还有”\'"就没法统一替换了。
在这里插入图片描述在这里插入图片描述

2、webpack扣模块下载

针对这种情况,我找到一种笨方法,就是通过js直接把内容保存在文本里面下载到本地,下面代码是在网上找到,window.wbpk_是要保存的内容字符串。注意:在控制台定义的变量需要使用let,如果使用var会报错。

let blob = new Blob([window.wbpk_], {type: 'text/plain'});
 
// 使用URL.createObjectURL()方法生成一个指向该blob对象的URL
let url = URL.createObjectURL(blob);
 
// 创建一个<a>元素并设置其href属性为上面生成的URL
let link = document.createElement('a');
link.href = url;
 
// 设置<a>元素的download属性为所希望的文件名(包括后缀)
link.setAttribute('download', 'example.txt');
 
// 模拟点击事件,自动下载文件
link.click();

打开保存的文件,可以发现这里的转义已经正常了。
在这里插入图片描述直接复制文件里的内容,放到加载模块的位置,就可以正常运行了。
在这里插入图片描述
ps: 大家如果有什么好的解决方案欢迎交流!

### 配置和使用自定义函数 在 Webpack 中配置和使用自定义函数主要通过两种方式实现:一种是在 `webpack.config.js` 文件中直接编写逻辑;另一种是利用插件机制,在特定时机触发自定义行为。 #### 方法一:直接在配置文件中定义并调用函数 可以在 `webpack.config.js` 的任意位置声明 JavaScript 函数,并将其作为选项传递给相应的加载器或插件。这种方式适合简单的场景,比如修改输出路径、设置环境变量等[^1]。 ```javascript // webpack.config.js const path = require('path'); function customFunction() { console.log('Custom function is called'); } module.exports = { entry: './src/index.js', output: { filename: 'bundle.[hash].js', // 使用哈希值命名打包后的文件名 path: path.resolve(__dirname, 'dist') }, plugins: [ new (class { apply(compiler) { compiler.hooks.emit.tapAsync( 'MyPlugin', (compilation, callback) => { customFunction(); // 调用自定义函数 callback(); } ); } })() ] }; ``` 此代码片段展示了如何在一个类内部创建插件,并通过钩子(hook)`emit` 来注册异步处理程序,在每次构建即将完成时自动执行指定的操作[^4]。 #### 方法二:封装成独立模块供其他地方导入 如果希望复用某些功能性的代码,则可以考虑将这些公共部分提取出来形成单独的 JS 模块。之后便能在多个不同的 Webpack 构建环境中轻松引入该工具集而无需重复造轮子[^3]。 假设有一个名为 `utils.js` 的辅助库: ```javascript // utils.js exports.getEnvVars = () => ({ API_URL: process.env.API_URL || 'http://localhost:8080' }); exports.optimizeImages = imagesArray => Promise.all(imagesArray.map(imgUrl => /* 图片优化逻辑 */)); ``` 那么就可以像下面这样引用它了: ```javascript // webpack.config.js const { getEnvVars } = require('./utils'); console.log(getEnvVars().API_URL); // 输出当前使用的 API 地址 ``` 对于 Vue CLI 创建的应用,默认情况下会隐藏底层复杂的 Webpack 设置细节,因此建议遵循官方推荐的方式——即编辑位于项目根目录下的 `vue.config.js` 文件来进行必要的调整[^2]。不过需要注意的是,这并不影响开发者自行扩展更高级别的定制化需求。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值