这个是虚坏叔叔的主站。牢记域名: [xuhss.com](拼音首字母)。首页可以搜索或: 虚幻账号

Js逆向教程23-AST Babel插件最简单修改值示例

js 虚幻 109℃ 0评论

作者:虚坏叔叔
博客:https://xuhss.com

早餐店不会开到晚上,想吃的人早就来了!?

AST Babel插件最简单修改值示例

20d502b648754109a5c220bac5632d60 - Js逆向教程23-AST Babel插件最简单修改值示例

一、文档地址和安装的方式

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

https://www.babeljs.cn/

1.1 安装

npm install @babel/core

二、Babel简单示例

2.1简单例子

创建一个babeltest.js,调试修改为babeltest

1e5910e54b754c2ba751107953ee0781 - Js逆向教程23-AST Babel插件最简单修改值示例

运行如下代码

var babel = require("@babel/core");

var code = "var a =1"

const result = babel.transform(code);
console.log(result.code)

可以看到转换后返回回来了

7d203cef8738430a8f90923409dbc4fc - Js逆向教程23-AST Babel插件最简单修改值示例

看看转换过程种的ast

var babel = require("@babel/core");

var code = "var a =1"

const result = babel.transform(code, {ast:true});
console.log(result)

通过下断点和调试,添加result监视

d72705d35af24f70a9768d9004b22dfc - Js逆向教程23-AST Babel插件最简单修改值示例

2.2Ast转换的过程可视化的工具

现在没有办法替换 只能查看,有没有一个工具能帮我们简单处理

有的就是这个

https://astexplorer.net/

这个工具可以高亮显示整个语法树

adb86089444c44558f550a9b25da92b8 - Js逆向教程23-AST Babel插件最简单修改值示例

它是一个比较简单的分析js的工具。

三、遍历AST

添加一个js文件,用于存放转换前的代码

var a = 1;

03a9b771f3f44ea49431aca8d1278461 - Js逆向教程23-AST Babel插件最简单修改值示例

Babeltest.js中 添加遍历器:

 // 将js源码转换成语法树
 var parser = require("@babel/parser");
 // 为parser提供模板引擎
 var template= require("@babel/template").default;
 // 遍历AST
 var traverse = require("@babel/traverse").default;
 // 操作节点,比如判断节点类型,生成另一个节点
 var t = require("@babel/types");
 // 可以直接用type 声明一段代码

 //将语法树转换为源代码
 var generator = require("@babel/generator").default;

 var fs = require("fs");
 var jscode = fs.readFileSync("read.js",{
     encoding:"utf-8"
 });
 console.log(jscode)

var ast = parser.parse(jscode);
var traverses = {
    Identifier(path){
        console.log("OK!");
    }
}
traverse(ast, traverses)

可以看到成功遍历出了OK

509e28b5a5854181ac96ce8c7642b20c - Js逆向教程23-AST Babel插件最简单修改值示例

3.1取值操作

看到path的变量

7a4191aa9de841b4a05cd2a8f9d8561e - Js逆向教程23-AST Babel插件最简单修改值示例

输出变量名

var traverses = {
    Identifier(path){
        console.log(path.node.name);
    }
}

f933760c66594283b4d0e3a7e6a17bb2 - Js逆向教程23-AST Babel插件最简单修改值示例

3.2类型表

通过这个文档就可以获取对应的数据。

399fed0720c74fd1805e902a64484c00 - Js逆向教程23-AST Babel插件最简单修改值示例

3.3修改值操作

 // 将js源码转换成语法树
 var parser = require("@babel/parser");
 // 为parser提供模板引擎
 var template= require("@babel/template").default;
 // 遍历AST
 var traverse = require("@babel/traverse").default;
 // 操作节点,比如判断节点类型,生成另一个节点
 var t = require("@babel/types");
 // 可以直接用type 声明一段代码

 //将语法树转换为源代码
 var generator = require("@babel/generator").default;

 var fs = require("fs");
 var jscode = fs.readFileSync("read.js",{
     encoding:"utf-8"
 });
 console.log(jscode)

 var ast = parser.parse(jscode);
var traverses = {
    Identifier(path){
        path.node.init = t.stringLiteral("xuhss");
    }
}
 traverse(ast, traverses)
var gCode = generator(ast);

56b588f5385f403a8d34c6a500d2f1fd - Js逆向教程23-AST Babel插件最简单修改值示例

总结

最后的最后
由本人水平所限,难免有错误以及不足之处, 屏幕前的靓仔靓女们 如有发现,恳请指出!

最后,谢谢你看到这里,谢谢你认真对待我的努力,希望这篇博客对你有所帮助!

你轻轻地点了个赞,那将在我的心里世界增添一颗明亮而耀眼的星!

? 往期优质文章分享

? 优质教程分享 ?

  • ?如果感觉文章看完了不过瘾,可以来我的其他 专栏 看一下哦~
  • ?比如以下几个专栏:Python实战微信订餐小程序、Python量化交易实战、C++ QT实战类项目 和 算法学习专栏
  • ?可以学习更多的关于C++/Python的相关内容哦!直接点击下面颜色字体就可以跳转啦!
学习路线指引(点击解锁) 知识定位 人群定位
? Python实战微信订餐小程序 ? 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
?Python量化交易实战 ? 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
❤️ C++ QT结合FFmpeg实战开发视频播放器❤️ 难度偏高 分享学习QT成品的视频播放器源码,需要有扎实的C++知识!
? 游戏爱好者九万人社区? 互助/吹水 九万人游戏爱好者社区,聊天互助,白嫖奖品
? Python零基础到入门 ? Python初学者 针对没有经过系统学习的小伙伴,核心目的就是让我们能够快速学习Python的知识以达到入门

? 资料白嫖,温馨提示 ?

关注下面卡片即刻获取更多编程知识,包括各种语言学习资料,上千套PPT模板和各种游戏源码素材等等资料。更多内容可自行查看哦!

2e3d1f57d8cc4b689c0ec284120b1acc - Js逆向教程23-AST Babel插件最简单修改值示例

转载请注明:虚坏叔叔 » Js逆向教程23-AST Babel插件最简单修改值示例

喜欢 (11)

您必须 登录 才能发表评论!