微信小程序前端页面逆向反解脚本

写个微信小程序前端页面逆向反解，下载到的小程序包 wxapkg 解压后得到一个重要的文件 page-freme.html，它是在小程序在发布时将WXML文件和WXSS文件打包而来的，通过他就可逆向得到小程序的WXML或WXSS文件。

关于小程序的打包原理可以参考其他资料：

*微信小程序“反编译”实战

直接上干货，把以下代码贴到 page-freme.html 中，在浏览器打开并在控制台中输入 render("path/to/your/wxml/page") 就可以得到 wxml 文件内容了。

<textarea name="" id="output" cols="120" rows="80"></textarea>
<script>
    function get(id){ return document.getElementById(id); }
    function recursive(node, indent){
        var attrs = [];
        console.log(node);
        console.log(typeof(node));
        if( typeof(node)=="string" ) return indent+node+"\n";
        if( typeof(node.attr)!="undefined" ){
            for( var i in node.attr ) attrs.push( i+'="'+node.attr[i]+'"');
        }
        var children = "";
        for( var i in node.children ){
            children += recursive(node.children[i], "\t"+indent);
        }
        var tag = indent+"<tag ".replace("tag",node.tag) + attrs.join(" ") + ">"+(children? "\n":"")
            +children
            +(children? indent:"")+"</tag>".replace('tag', node.tag)+"\n";
        return tag;
    }
    function render(path){
        // __wxAppCode__['pages/rank/rank.wxml']();
        // render('pages/rank/rank.wxml');
        var pcode = __wxAppCode__[path]? __wxAppCode__[path]():false;
        if( !pcode ) return "no this page to this path "+path;
        get("output").value=recursive(pcode, "");
    }
</script>

wxapkg.png

UPDATE SCRIPT 2018/06/15 端午前

<textarea name="" id="output" cols="80" rows="50" ></textarea>
<script>
    function get(id){ return document.getElementById(id); }
    function recursive(node, indent){
        var attrs = [];
        // console.log(node);
        // console.log(typeof(node));
        if( typeof(node)=="string" ) return indent+node+"\n";
        if( typeof(node.attr)!="undefined" ){
            for( var i in node.attr ) attrs.push( i+'="'+node.attr[i]+'"');
        }
        var children = "";
        for( var i in node.children ){
            children += recursive(node.children[i], "\t"+indent);
        }
        var tag = indent+"<tag ".replace("tag",node.tag) + attrs.join(" ") + ">"+(children? "\n":"")
            +children
            +(children? indent:"")+"</tag>".replace('tag', node.tag)+"\n";
        return tag;
    }
    function render(path){
        // __wxAppCode__['pages/rank/rank.wxml']();
        // render('pages/rank/rank.wxml');
        // render('pages/rank/rank.wxss');
        if( /\.wxss$/.test(path) ){
            // <style type="text/css" wxss:path="./rank/rank/index.wxss">…</style>
            var pcode = __wxAppCode__[path]? __wxAppCode__[path]():false;
            var styles = document.getElementsByTagName('style');
            for(var i=0; i<styles.length; i++){
                var p = styles[i].getAttribute("wxss:path");
                if( p.indexOf(path)>=0 ){
                    get("output").value = path + ":\n";
                    get("output").value += styles[i].innerHTML + ":\n";
                    break;
                }else{              
                    get("output").value = "Unmatched:" + p +"\n";
                }
            }
        }else{
            var pcode = __wxAppCode__[path]? __wxAppCode__[path]():false;
            if( !pcode ) return "no this page to this path "+path;
            get("output").value=recursive(pcode, "");
        }
    }
    get("output").value += "RUN WHAT YOU NEED IN CONSOLE OR PAGE\n";
    for(var i in __wxAppCode__){
        get("output").value += "__wxAppCode__['"+i+"']();\n";
        get("output").value += "render('"+i+"');\n";
        console.log('render("'+i+'");');
    }
</script>