新手必看|babel库插件编写方式答疑

关注它，不迷路。

• 本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！

问:拿到一个混淆的js，通过怎样的方式对它进行还原?

答:

1. 通过编写还原脚本，读取这个混淆的js文件内容，解析成语法树，再对这棵树进行修剪，修剪过后的语法树，再将其保存为js源代码，生成新的js文件输出即可。因此这种方式你需要 一个js混淆源文件和一个对这个文件进行处理的ast解析文件。具体的可以参考这篇文章: 利用AST解混淆先导知识:调用babel库反混淆代码模板

2. 可以将v神打包的babel库倒入html文件中，然后读取混淆的js文件内容，这样的好处是在还原是可以避免补浏览器相关的环境。这种方式我用的少，推荐第一种方式。

问:怎么调用还原插件?

答:核心主要是 traverse 函数，它的函数定义:

   

    

     

      

     
     

      

       function traverse(parent, opts, scope, state, parentPath) {
      
     
    

     

      

     
     

      
  if (!parent) return;
      
     
    

     

      

     
     

      

         if (!opts) opts = {};
      
     
    

     

      

     
     

      
  if (!opts.noScope && !scope) {
      
     
    

     

      

     
     

      
    if (parent.type !== "Program" && parent.type !== "File") {
      
     
    

     

      

     
     

      
      throw new Error("You must pass a scope and parentPath unless traversing a Program/File. " + `Instead of that you tried to traverse a ${parent.type} node without ` + "passing scope and parentPath.");
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

         visitors.explode(opts);
      
     
    

     

      

     
     

      

         traverse.node(parent, opts, scope, state, parentPath);
      
     
    

     

      

     
     

      

       }
      
     
   
  

这里第一个参数是parent，我们这里传入node即可:

   

    

     

      

     
     

      

       let sourceCode = fs.readFileSync(encodeFile, {encoding: "utf-8"});
      
     
    

     

      

     
     

      

       let ast    = parser.parse(sourceCode);
      
     
   
  

这里的 ast 就是传入的parent，它是个变量名，可以随意，一般我们用它来表示整棵树，用以区分。

第二个参数 opts，它是一个object，看源代码确实看不出怎么传参(也许是我看的不深入)，不过有大佬告诉我们怎么传:

traverse(ast, {ExpressionStatement: RemoveComma,});
  

第一个参数是ast，对应的是上面的parent，而opt是一个object，

{ExpressionStatement: RemoveComma,}
  

ExpressionStatement 表示当前遍历的是  Expression表达式，这个需要对照解析网站观看，而 RemoveComma ，我认为它是一个回调函数，它有个一个形参path，path包含了各个方法和属性:

   

    

     

      

     
     

      

       function RemoveComma(path) {
      
     
    

     

      

     
     

      
    // a = 1, b = ddd(), c = null;
      
     
    

     

      

     
     

      
    // |
      
     
    

     

      

     
     

      
    // |
      
     
    

     

      

     
     

      
    // |
      
     
    

     

      

     
     

      
    // v
      
     
    

     

      

     
     

      
    // a = 1;
      
     
    

     

      

     
     

      
    // b = ddd();
      
     
    

     

      

     
     

      
    // c = null;
      
     
    

     

      

     
     

      
    let {expression} = path.node
      
     
    

     

      

     
     

      
    if (!t.isSequenceExpression(expression))
      
     
    

     

      

     
     

      
        return;
      
     
    

     

      

     
     

      
    let body = []
      
     
    

     

      

     
     

      

           expression.expressions.forEach(
      
     
    

     

      

     
     

      
        express => {
      
     
    

     

      

     
     

      

                   body.push(t.expressionStatement(express))
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           )
      
     
    

     

      

     
     

      

           path.replaceInline(body)
      
     
    

     

      

     
     

      

       }
      
     
   
  

而这种写法不利于大家去直接用，因此我在星球里直接改写成了另外一种写法，效果是一样的，没有差别:

   

    

     

      

     
     

      

       const RemoveComma = 
      
     
    

     

      

     
     

      

       {
      
     
    

     

      

     
     

      
  ExpressionStatement (path)
      
     
    

     

      

     
     

      

         {
      
     
    

     

      

     
     

      
    let {expression} = path.node
      
     
    

     

      

     
     

      
    if (!t.isSequenceExpression(expression))
      
     
    

     

      

     
     

      
        return;
      
     
    

     

      

     
     

      
    let body = []
      
     
    

     

      

     
     

      

           expression.expressions.forEach(
      
     
    

     

      

     
     

      
        express => {
      
     
    

     

      

     
     

      

                   body.push(t.expressionStatement(express))
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           )
      
     
    

     

      

     
     

      

           path.replaceInline(body);
      
     
    

     

      

     
     

      

         },
      
     
    

     

      

     
     

      

       }
      
     
   
  

然后再调用这个插件:

traverse(ast, RemoveComma);
  

问:怎么编写还原插件?

答:我会专门写一篇文章来告诉大家怎么编写还原插件。

交流学习

加我好友，拉进群，欢迎讨论AST相关的话题