分析支付寶客戶端的插件機制

轉自唐巧博客

前言

由於開了iOSDevTips的微信公共帳號，老收到各類iOS開發的問題，前兩天收到一個問題的內容是：

請問像支付寶錢包那樣能夠在應用裏安裝本身的應用，是已經在應用裏寫了邏輯，仍是能夠嚮應用裏發送代碼?

我以爲這個問題挺有意思的，估計你們都感興趣，因此今天就抽空研究了一下，將支付寶客戶端的插件機制具體實現方式介紹給你們。

先介紹一下該插件機制，如上圖所示，支付寶客戶端在安裝後，對於像「彩票」、「愛心捐贈」這類功能，須要再點擊安裝一次，而後纔可使用。有些時候該插件功能進行了升級，須要點擊升級才能夠繼續使用。插件的方式有利於軟件動態增長新的功能或升級功能，而不用再一次向AppStore提交審覈。另外，因爲用戶不須要的插件能夠不用安裝，也縮小了應用自己的體積大小，節省了下載流量。

分析過程

截取網絡請求

分析第一步，截取網絡請求。截取網絡請求能夠查看當用戶點擊「彩票」進行安裝的時候，客戶端到底作了什麼事情。使用Charles的代理設置功能，啓動一個http代理，而後在iPhone上設置鏈接此代理，則能夠看到，當點擊「彩票」插件時，客戶端下載了一個名爲 10000011.amr的文件。以下圖所示：

下載插件文件

嘗試用wget將文件下載下來，發現其沒有驗證cookie，下載成功，命令以下：

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

amr本意表示是一個音頻文件，明顯不對，嘗試將其後綴名改爲zip，成功將其解壓。用itools鏈接上支付寶的客戶端，一樣能看到客戶端將其下載後，也是解壓到document目錄下的。解壓後的內容與應用內新增長的內容一致，如圖所示：

分析文件內容

大概瀏覽了一下解壓後的文件，主要包括html、css和js文件。可見支付寶的插件機器是經過UIWebView來展現內容的方式來實現的，那爲何要先下載安裝這些內容而不經過UIWebView實時下載html呢？這主要應該是爲了節省相應的流量。我看了一下，10000011.amr文件整個有將近1M大小，若是不經過插件機制預先下載，則只能依賴系統對於UIWebView的緩存來節省流量，這相對來講沒有前者靠譜。

另外，使用基於UIWebView的方式來展現插件，也有利於代碼的複用。由於這些邏輯都是用js來寫的，能夠一樣應用於Android平臺，在Config.js文件中，明顯能夠看到對於各種平臺的判斷邏輯。以下圖所示：

另外，/www/demo/index-alipay-native.html 文件即該插件的首頁，用瀏覽器打開就能夠看到和手機端同樣的內容。以下載圖所示（左半邊是手機上的應用截圖，右半邊是瀏覽器打開該html文件的截圖）：

插件的網絡通信

接下來感興趣的是該插件是如何完成和支付寶後臺的網絡通信的。能夠想到有兩種可能的方式：

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的安全連接，完成整個交易過程的加密。以下圖所示：

總結

支付寶的插件機制總體上就是經過html和javascript方式實現的，主要的好處是：

1. 跨平臺(能夠同時用在iOS和Android客戶端）
2. 省流量（不須要的插件不用下載，插件本地緩存長期存在不會過時，本身管理插件更新邏輯）
3. 更新方便（不用每次提交AppStore審覈）

壞處若是非要說有的話，就是用javascript寫iOS界面，沒法提供很是炫的UI交互以及利用到iOS的全部平臺特性。不過象支付寶這種工具類應用，也不須要很複雜的UI交互效果。

另外教你們一個小技巧，若是你不肯定某個頁面是否是UIWebView作的，直接在那個頁面長按，若是彈出」拷貝，定義，學習」這種菜單，那就是肯定無疑是UIWebView的界面了。以下圖所示：

相關工具

歡迎關注個人技術微博 @唐巧_boy 和微信公共帳號 iOSDevTips ，天天收穫一些關於iOS開發的學習資料和技巧心得。

我在研究時使用了Charles來截獲支付寶客戶端的網絡請求，用iTools來查看支付寶客戶端的本地內容。若是你想自行驗證本文內容，請先下載上述工具。在此就不額外介紹它們的使用了。

Posted by 唐巧 Jun 23rd, 2013  iOS

原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0