利用AST解混淆先导知识:简单介绍path和node

古城微笑少年丶 2022-12-20 02:44 243阅读 0赞

—

关于path的一些操作

path,翻译过来是路径，理解为路径就好了。比如有这么一段代码:

var a = 123;

在线网站解析的情况如下:

![format_png][]

小技巧**:鼠标点击 var 这三个字母中间，可以看到网站直接将相关代码标黄了。**

可以看到，上面就是一个个的节点，这也是我们再熟悉不过的JSON结构的数据。

上图中红色方框处就是它的path类型。我们在遍历的时候就这样写插件:

const visitor = {
       VariableDeclaration(path)
       {
         //to do something;
       },
    }

小疑问: VariableDeclaration 和 VariableDeclarator 有啥区别?

可以看到，VariableDeclaration 是 VariableDeclarator 的祖先节点，这两者肯定不一样的。我们将代码变成下面这样，再进行解析:

var a = 123,b = 456;

解析的结果如下:

![format_png 1][]

这样就明白了。原来 一个 VariableDeclarator 只对应一个 变量的定义，理解这些，在我们插入节点的时候非常的有帮忙，比如我们想要在

var a = 123;

代码后面插入

b = 456;

**你 就知道应该遍历 VariableDeclarator 路径，判断变量名是否为 "a"，然后构造节点插入即可。**

我们注意到它的参数是:**path**，那path究竟有那些常见的方法呢？

1.  **当前路径所对应的源代码**，使用的是**toString**这个方法，在我解混淆的时候会经常的用到，是比较重要的，示例代码如下:
    
        const visitor = {
           VariableDeclaration(path)
           {
             console.log(path.toString());
           },
        }
2.  **判断path是什么type**，使用**path.isXXX** 这个方法，比如我们需要判断路径是否为 StringLiteral 类型：
    
        if(path.isStringLiteral())
         {
         //do something;
        }
3.  **获取path的上一级路径**，你可以像这样来获取:
    
        let parent = path.parentPath;
4.  **获取path的子路径,**你可以是使用 **get**方法，比如定义了如下变量:
    
        var a = 123;
    
    当前访问的是 VariableDeclarator,其结构如下:
    
    ![format_png 2][]
    
    现在需要访问 id 这个路径，你可以这么操作:
    
        path.get('id');
5.  **删除path**，使用**remove方法，**当你觉得你访问的路径已经完成了改完成的事，对代码已经没什么作用了，可以将其删除，
    
        path.remove()
6.  **替换path**，单路径可以使用**replaceWith**方法，多路径则使用**replaceWithMultiple**方法，比如你想将 1 + 2 替换成 3，你可以像下面这样的代码进行替换:
    
        path.replaceWith({type:"NumericLiteral",value:3});
    
    当然，你也可以引入 **const type = require("@babel/types")**;然后再进行替换:
    
        path.replaceWith(type.NumericLiteral(3));
    
    注意，这里的3是我口算出来的，在实际操作过程中，是需要获取 "+" 两边的值并计算其结果的。

如果你想获取更多path相关的方法，请直接阅读源码，阅读源码是你学习最快，也是最好的办法。path相关的源码在这里:

@babel\traverse\lib\path

—

关于node的一些操作

这里的node，其实是path的一个属性:

const node = path.node;

可以将其理解为节点，我们可以打印node，看看是些什么内容。这里还是以代码var a = 123;为例，访问 VariableDeclarator 路径，打印出当前的node:

console.log(path.node);

结果如图:

![format_png 3][]

其实就是一个 json结构的数据。

**1.****如何获取当前节点所对应的源代码**:

const generator = require("@babel/generator").default;
    let {code} = generator(node);

**2.****如何删除节点**，使用系统的 **delete** 方法。比如你想删除

![format_png 4][]

init这个节点，可以使用下面的方式:

delete path.node.init;

操作过后，代码 **var a = 123;**将会变成 var a;,即将初始化的值进行删除。

当然也可以直接赋值，比如:

path.node.init = undefined;

3.访问子节点，比如你想得到初始化的值，你可以这么操作:

const node = path.node;
      const value = node.init.value;
      console.log(value);

嗯，你把它理解为 JSON就好了，比如，它是可以这么操作的:

const node = path.node;
      console.log(JSON.stringify(node));

好了，这就是本文的全部内容了，如果你觉得好，可以点个**在看**，谢谢！

[format_png]: /images/20221120/58a91bdbaa9c4d1b826cf06c619214fb.png
[format_png 1]: /images/20221120/adc83a3c96f246c780a7943220f1904c.png
[format_png 2]: /images/20221120/9e0d4166491a414f9db11928cb623d41.png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MbGw4dHgwTURSMzRuR0JDOXFYblNaaWMxOVZNOURUaWJXU1U1SnJtU0JtcEg1YXE0REc2OFk5YmFRWUNXbjN5TTJFWVJtR2hPdXNMeTh0UGQxUlFVUnRnLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MbGw4dHgwTURSMzRuR0JDOXFYblNaaWMxOVZNOURUaWJXOGcyb2Z3b2t4eHYwbWJxMWxyRXM4RXA3MzIxS2JaSnlHM2pEUFVVbUc3OFpzTzR4MkRhdldnLzY0MA?x-oss-process=image/format,png