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

01

关于path的一些操作

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

var a = 123;

  

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

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

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

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


   
  1. const visitor = {
  2. VariableDeclaration(path)
  3. {
  4. //to do something;
  5. },
  6. }

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

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

var a = 123,b = 456;

  

解析的结果如下:

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

var a = 123;

  

代码后面插入

b = 456;

  

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

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

  1. 当前路径所对应的源代码,使用的是toString这个方法,在我解混淆的时候会经常的用到,是比较重要的,示例代码如下:

    
         
    1. const visitor = {
    2. VariableDeclaration(path)
    3. {
    4. console.log(path.toString());
    5. },
    6. }
  2. 判断path是什么type,使用path.isXXX 这个方法,比如我们需要判断路径是否为 StringLiteral 类型:

    
         
    1. if(path.isStringLiteral())
    2.  {
    3.  //do something;
    4. }
  3. 获取path的上一级路径,你可以像这样来获取:

    let parent = path.parentPath;
    
        
  4. 获取path的子路径,你可以是使用 get方法,比如定义了如下变量:

    var a = 123;
    
        

    当前访问的是  VariableDeclarator ,其结构如下:

    现在需要访问 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

  

02


关于node的一些操作

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

const node = path.node;

  

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

console.log(path.node);

  

结果如图:

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

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


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

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

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

delete path.node.init;

  

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

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

path.node.init = undefined;

  

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


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

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


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

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

文章来源: blog.csdn.net,作者:悦来客栈的老板,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/qq523176585/article/details/109590370

(完)