分析支付宝客户端的插件机制 – 唐巧的技术博客

分析支付宝客户端的插件机制

JUN 23RD, 2013

http://blog.weirong.li/wp-content/uploads/2016/09/0670f045-aaa0-43bb-a559-00b381e17b61

前言

因为开了iOSDevTips的微信公共账号,老收到各种iOS开发的问题,前两天收到一个问题的内容是:

请问像支付宝钱包那样可以在应用里安装自己的应用,是已经在应用里写了逻辑,还是可以向应用里发送代码?

我觉得这个问题挺有意思的,估计大家都感兴趣,所以今天就抽空研究了一下,将支付宝客户端的插件机制具体实现方式介绍给大家。

先介绍一下该插件机制,如上图所示,支付宝客户端在安装后,对于像“彩票”、“爱心捐赠”这类功能,需要再点击安装一次,然后才可以使用。有些时候该插件功能进行了升级,需要点击升级才可以继续使用。插件的方式有利于软件动态增加新的功能或升级功能,而不用再一次向AppStore提交审核。另外,由于用户不需要的插件可以不用安装,也缩小了应用本身的体积大小,节省了下载流量。

分析过程

截取网络请求

分析第一步,截取网络请求。截取网络请求可以查看当用户点击“彩票”进行安装的时候,客户端到底做了什么事情。使用Charles的代理设置功能,启动一个http代理,然后在iPhone上设置连接此代理,则可以看到,当点击“彩票”插件时,客户端下载了一个名为 10000011.amr的文件。如下图所示:

http://blog.weirong.li/wp-content/uploads/2016/09/95c6f089-9793-430f-871a-7ec738e01a81

下载插件文件

尝试用wget将文件下载下来,发现其没有验证cookie,下载成功,命令如下:

1
wget http://download.alipay.com/mobilecsprod/alipay.mobile/20130601021432806/xlarge/10000011.amr

amr本意表示是一个音频文件,明显不对,尝试将其后缀名改成zip,成功将其解压。用itools连接上支付宝的客户端,同样能看到客户端将其下载后,也是解压到document目录下的。解压后的内容与应用内新增加的内容一致,如图所示:

http://blog.weirong.li/wp-content/uploads/2016/09/3ec97ebb-05ef-463c-9898-918f09299f46

分析文件内容

大概浏览了一下解压后的文件,主要包括html、css和js文件。可见支付宝的插件机器是通过UIWebView来展示内容的方式来实现的,那为什么要先下载安装这些内容而不通过UIWebView实时下载html呢?这主要应该是为了节省相应的流量。我看了一下,10000011.amr文件整个有将近1M大小,如果不通过插件机制预先下载,则只能依赖系统对于UIWebView的缓存来节省流量,这相对来说没有前者靠谱。

另外,使用基于UIWebView的方式来展示插件,也有利于代码的复用。因为这些逻辑都是用js来写的,可以同样应用于Android平台,在Config.js文件中,明显可以看到对于各类平台的判断逻辑。如下图所示:

http://blog.weirong.li/wp-content/uploads/2016/09/9803d778-2517-4c2d-8087-cc706aef4c43

另外,/www/demo/index-alipay-native.html 文件即该插件的首页,用浏览器打开就可以看到和手机端一样的内容。如下载图所示(左半边是手机上的应用截图,右半边是浏览器打开该html文件的截图):

http://blog.weirong.li/wp-content/uploads/2016/09/048c9fb1-e3a9-4ad4-aac8-8009287e6b52

插件的网络通讯

接下来感兴趣的是该插件是如何完成和支付宝后台的网络通讯的。可以想到有两种可能的方式:

  1. 直接和支付宝后台通讯
  2. 和Native端通讯,然后Native端和服务器通讯。

要验证这个需要读该插件的js源代码,整个js源码逻辑还是比较干净的,主要用了玉伯写的seajs做模块化加载,backbone.js是一个前端的MVC框架,zepto.js是一个更适合于移动端使用的”JQuery”。

大概扫了一下,感觉更可能是用的方法一:直接和支付宝后台通讯, 因为Config.js中都明确将网络通讯的地址写下来了。另一个证据是,利用下面的脚本扫描整个js源码,只能在backbone中搜到对于iframe的使用。而在iOS开发中,如果js端和native端要通讯,是需要用到iframe的,详细原理可以参见我的另一篇文章《关于UIWebView和PhoneGap的总结》。不过我不能完全确认,因为我还没有找到相应控制页面切换和跳转的js代码,如果你找到了,麻烦告诉我。

1
find . -type f -name "*.js" | xargs grep "iframe"

交易的安全

用Charles可以截取到,当有网络交易时,应用会另外启动一个https的安全链接,完成整个交易过程的加密。如下图所示:

http://blog.weirong.li/wp-content/uploads/2016/09/f492072a-8869-4c6c-860e-419f4d757b0d

总结

支付宝的插件机制整体上就是通过html和javascript方式实现的,主要的好处是:

  1. 跨平台(可以同时用在iOS和Android客户端)
  2. 省流量(不需要的插件不用下载,插件本地缓存长期存在不会过期,自己管理插件更新逻辑)
  3. 更新方便(不用每次提交AppStore审核)

坏处如果非要说有的话,就是用javascript写iOS界面,无法提供非常炫的UI交互以及利用到iOS的所有平台特性。不过象支付宝这种工具类应用,也不需要很复杂的UI交互效果。

另外教大家一个小技巧,如果你不确定某个页面是不是UIWebView做的,直接在那个页面长按,如果弹出”拷贝,定义,学习”这种菜单,那就是确定无疑是UIWebView的界面了。如下图所示:

http://blog.weirong.li/wp-content/uploads/2016/09/3ca0fdc7-3d4b-484f-8550-17c748c991e5

相关工具

欢迎关注我的技术微博 @唐巧_boy 和微信公共账号 iOSDevTips ,每天收获一些关于iOS开发的学习资料和技巧心得。

我在研究时使用了Charles来截获支付宝客户端的网络请求,用iTools来查看支付宝客户端的本地内容。如果你想自行验证本文内容,请先下载上述工具。在此就不额外介绍它们的使用了。

后记(2013-7-7)

  1. 在完成上文后,Allen在他的博客上先后分享了两篇更深入分析的文章《浅析支付宝钱包插件》和 《再谈支付宝钱包插件和说好的 Demo》。 这两篇文章都比本文深入得多,值得大家阅读。

  2. 写完上文,居然收到了来自支付宝卫朴(花名)的工作邀请。不过我现在创业正在努力当中,所以我拒绝了邀请。看来这也是一种找工作的办法啊,比投简历管用,呵呵。

  3. 从一些朋友那儿了解到,支付宝因为本文而会在以后的版本中加强安全性,至少不会像现在这样,所有逻辑都在写在javascript中,并且还带有注释,这也是我希望看到的结果。愿支付宝越做越好。

Posted by 唐巧 Jun 23rd, 2013  iOS

原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

此条目发表在Uncategorized分类目录,贴了标签。将固定链接加入收藏夹。