如何反编译c语言写的小程序,教你如何反编译微信小程序

教你如何反编译微信小程序

前言

众所周知, 跳一跳在前几个月很火, 并且出现了包括通过规则匹配 / 机器学习得到关键点坐标后模拟点击和通过源码获知加密方式伪造请求等方法后者提到了如何获取含有源码的程序包 wxapkg , 以及使其能够在微信开发者工具中具体步骤(见参考链接 1)

当时我在对其他微信小程序应用进行尝试的时候发现, 他们不同于小游戏, 解包后的文件并不能通过简单增改就直接在微信开发者工具中运行, 于是对小程序源代码 =>wxapkg 包内文件的具体转换关系进行了一定研究

正文

由前文知, 我们可以通过查看 Android 手机中的 /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg({User} 为当前用户的用户名, 类似于 2bc**************b65)文件夹, 获取最近使用过的微信小程序所对应的 wxapkg 包文件

通过简单分析知, 这个包由文件名 + 文件内容起始地址及长度信息开头, 且各个文件明文存放在包内, 通过类似于 https://gist.github.com/feix/32ab8f0dfe99aa8efa84f81ed68a0f3e 的脚本(这一个脚本处理包内二进制文件时有个小 bug , 将第 78 行的 w 改成 wb 即可), 我们可以轻易获取包内文件(具体解包细节可见于参考链接 3)

但是这个包中的文件内容主要如下:app-config.json

app-service.js

page-frame.

其他一堆放在各文件夹中的. html 文件

和源码包内位置和内容相同的图片等资源文件

微信开发者工具并不能识别这些文件, 它要求我们提供由 wxml/wxss/js/wxs/json 组成的源码才能进行模拟 / 调试

js

注意到 app-service.js 中的内容由

define('xxx.js',function(...){ //The content of xxx.js });require('xxx.js'); define('yyy.js',function(...){ //The content of xxx.js });require('yyy.js'); ....

组成, 很显然, 我们只要定义自己的 define 函数就可以将这些 js 文件恢复到源码中所对应的位置当然, 这些 js 文件中的内容经过压缩, 即使使用 UglifyJS 这样的工具进行美化, 也无法还原一些原始变量名

wxss

所有在 wxapkg 包中的 html 文件都调用了 setCSSToHead 函数, 其代码如下

var setCssToHead = function(file, _xcInvalid) {     var Ca = {};     var _C = [...arrays...];     function makeup(file, suffix) {         var _n = typeof file === "number";         if (_n && Ca.hasOwnProperty(file)) return "";         if (_n) Ca[file] = 1;         var ex = _n ? _C[file] : file;         var res ="";         for (var i = ex.length - 1; i>= 0; i--) {             var content = ex[i];             if (typeof content === "object") {                 var op = content[0];                 if (op == 0) res = transformRPX(content[1]) + "px" + res; else if (op == 1) res = suffix + res; else if (op == 2) res =makeup(content[1], suffix) + res;             } else res = content + res;         }         return res;     }     return function(suffix, opt) {         if (typeof suffix === "undefined") suffix = "";         if (opt && opt.allowIllegalSelector != undefined && _xcInvalid != undefined) {             if (opt.allowIllegalSelector) console.warn("For developer:"+ _xcInvalid); else {                 console.error(_xcInvalid +"This wxss file is ignored.");                 return;             }         }         Ca = {};         css = makeup(file, suffix);         var style = document.createElement("style");         var head = document.head || document.getElementsByTagName("head")[0];         style.type ="text/css";         if (style.styleSheet) {             style.styleSheet.cssText = css;         } else {             style.appendChild(document.createTextNode(css));         }         head.appendChild(style);     }; };

阅读这段代码可知, 它把 wxss 代码拆分成几段数组, 数组中的内容可以是一段将要作为 css 文件的字符串, 也可以是一个表示 这里要添加一个公共后缀 或 这里要包含另一段代码 或 要将以 wxss 专供的 rpx 单位表达的数字换算成能由浏览器渲染的 px 单位所对应的数字 的数组

同时, 它还将所有被 import 引用的 wxss 文件所对应的数组内嵌在该函数中的 _C 变量中

我们可以修改 setCssToHead, 然后执行所有的 setCssToHead, 第一遍先判断出 _C 变量中所有的内容是哪个要被引用的 wxss 提供的, 第二遍还原所有的 wxss 值得注意的是, 可能出于兼容性原因, 微信为很多属性自动补上含有 - webkit - 开头的版本, 另外几乎所有的 tag 都加上了 wx - 前缀, 并将 page 变成了 body 通过一些 CSS 的 AST , 例如 CSSTree, 我们可以去掉这些东西

json

app-config.json 中的 page 对象内就是其他各页面所对应的 json , 直接还原即可, 余下的内容便是 app.json 中的内容了, 除了格式上要作相应转换外, 微信还将 iconPath 的内容由原先指向图片文件的地址转换成 iconData 中图片内容的 base64 编码, 所幸原来的图片文件仍然保留在包内, 通过比较 iconData 中的内容和其他包内文件, 我们找到原始的 iconPath

wxs

在 page-frame.html 中, 我们找到了这样的内容

f_['a/comm.wxs'] = nv_require("p_a/comm.wxs"); function np_0(){var nv_module={nv_exports:{}};nv_module.nv_exports = ({nv_bar:nv_some_msg,});return nv_module.nv_exports;}   f_['b/comm.wxs'] = nv_require("p_b/comm.wxs"); function np_1(){var nv_module={nv_exports:{}};nv_module.nv_exports = ({nv_bar:nv_some_msg,});return nv_module.nv_exports;}   f_['b/index.wxml']={}; f_['b/index.wxml']['foo'] =nv_require("m_b/index.wxml:foo"); function np_2(){var nv_module={nv_exports:{}};var nv_some_msg = "hello world";nv_module.nv_exports = ({nv_msg:nv_some_msg,});returnnv_module.nv_exports;} f_['b/index.wxml']['some_comms'] =f_['b/comm.wxs'] || nv_require("p_b/comm.wxs"); f_['b/index.wxml']['some_comms'](); f_['b/index.wxml']['some_commsb'] =f_['a/comm.wxs'] || nv_require("p_a/comm.wxs"); f_['b/index.wxml']['some_commsb']();

可以看出微信将内嵌和外置的 wxs 都转译成 np_%d 函数, 并由 f_数组来描述他们转译的主要变换是调用的函数名称都加上了 nv_前缀在不严谨的场合, 我们可以直接通过文本替换去除这些前缀

wxml

相比其他内容, 这一段比较复杂, 因为微信将原本 类 xml 格式的 wxml 文件直接编译成了 js 代码放入 page-frame.html 中, 之后通过调用这些代码来构造 virtual-dom, 进而渲染网页

首先, 微信将所有要动态计算的变量放在了一个由函数构造的 z 数组中, 构造部分代码如下:

(function(z){var a=11;function Z(ops){z.push(ops)} Z([3,'index']); Z([[8],'text',[[4],[[5],[[5],[[5],[1,1]],[1,2]],[1,3]]]]); })(z);

其实可以将 [[id],xxx,yyy] 看作由指令与操作数的组合注意每个这样的数组作为指令所产生的结果会作为外层数组中的操作数, 这样可以构成一个树形结构通过将递归计算的过程改成拼接源代码字符串的过程, 我们可以还原出每个数组所对应的实际内容下文中, 将这个数组中记为 z

然后, 对于 wxml 文件的结构, 可以将每种可能的 js 语句拆分成 指令 来分析, 这里可以用到 Esprima 这样的 js 的 AST 来简化识别操作, 可以很容易分析出以下内容, 例如:

var {name}=_n('{tag}') 创建名称为 {name}, tag 为{tag} 的节点

_r({name},'{attrName}',{id},e,s,gg)  将 {name} 的{attrName}属性修改为 z[{id}]的值

_({parName},{name})  将 {name} 作为 {parName} 的子节点

var {name}=_o({id},..,..,..)  创建名称为 {name}, 内容为 z[{id}] 的文本节点

var {name}=_v() 创建名称为 {name} 的虚节点( wxml 里恰好提供了功能相当的虚结点 block, 这句话相当于 var {name}=_n('block'))

var {name}=_m('{tag}',['{attrName1}',{id1},'{attrName2}',{id2},...],[],..,..,..)  创建名称为 {name}, tag 为{tag} 的节点, 同时将 {attrNameX} 属性修改为 z[f({idX})]的值 (f 定义为{idX} 与{base}的和;{base}初始为 0,f 返回的第一个正值后 {base} 即改为该返回值; 若返回负值, 表示该属性无值)

return {name}  名称为 {name} 的节点设为主节点

cs.*** 调试用语句, 无视之

此外 wx:if 结构和 wx:for 可做递归处理例如, 对于如下 wx:if 结构:

var {name}=_v() _({parName},{name}) if(_o({id1},e,s,gg)){oD.wxVkey=1 //content1 } else if(_o({id2},e,s,gg)){oD.wxVkey=2 //content2 } else{oD.wxVkey=3 //content3 }

相当于将以下节点放入 {parName} 节点下 (z[{id1}] 应替换为对应的 z 数组中的值):

具体实现中可以将递归时创建好多个 block, 调用子函数时指明将放入 {name} 下(_({name},{son}))识别为放入对应 {block} 下 wx:for 也可类似处理, 例如:

var {name}=_v() _({parName},{name}) var {funcName}=function(..,..,{fakeRoot},..){ //content return {fakeRoot} } aDB.wxXCkey=2 _2({id},{funcName},..,..,..,..,'{item}','{index}','{key}')

对应 (z[{id1}] 应替换为对应的 z 数组中的值):

调用子函数时指明将放入 {fakeRoot}下 (_({fakeRoot},{son})) 识别为放入{name} 下

除此之外, 有时我们还要将一组代码标记为一个指令, 例如下面:

var lK=_v() _({parName},lK) var aL=_o({isId},e,s,gg) var tM=_gd(x[0],aL,e_,d_) if(tM){ var eN=_1({dataId},e,s,gg) || {} var cur_globalf=gg.f lK.wxXCkey=3 tM(eN,eN,lK,gg) gg.f=cur_globalf } else _w(aL,x[0],11,26)

对应于 {parName} 下添加如下节点:

还有 import 和 include 的代码比较分散, 但其实只要抓住重点的一句话就可以了, 例如:

var {name}=e_[x[{to}]].i //Other code _ai({name},x[{from}],e_,x[{to}],..,..) //Other code {name}.pop()

对应与(其中的 x 是直接定义在 page-frame.html 中的字符串数组):

而 include 类似:

var {name}=e_[x[0]].j //Other code _ic(x[{from}],e_,x[{to}],..,..,..,..); //Other code {name}.pop()

对应与:

可以看到我们可以在处理时忽略前后两句话, 把中间的_ic 和_ai 处理好就行了

通过解析 js 把 wxml 大概结构还原后, 可能相比编译前的 wxml 显得臃肿, 可以考虑自动简化, 例如:

可简化为:

这样, 我们完成了几乎所有 wxapkg 包 内容的还原

工具

对于上述内容的转换, 我写了一个可以直接使用的 "反编译" 工具( https://github.com/qwerty472123/wxappUnpacker ), 可以直接自动处理 wxapkg 包

来源: https://blog.csdn.net/rolan1993/article/details/79695913

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值