如何爬取線上小程序的源碼

一、前言

最近在學習微信小程序開發,半個月學習下來,很想實戰一下踩踩坑,於是就仿寫了一個阿里媽媽淘寶客小程序的前端實現,過程一言難盡,差不多兩週時間過去了,發現小程序的坑遠比想象的要多的多!!在實際練手中,完全是黑盒的,看到人家上線的小程序的效果,純靠推測,部分效果在絞盡腦汁後能做出大致的實現,但是有些細節,費勁全力都沒能做出來。很想一窺源碼,查看究竟,看看大廠的前端大神們是如何規避了小程序的各種奇葩的坑。

 

於是就想到獲取到小程序地源文件,然後再對其進行反編譯還原爲源代碼,來作爲學習參考。我百度了各種關於小程序地反編譯教程,但是感覺都不太適合像我這樣地初學小白,踩了挺多坑。在這裏把我重新簡化好的,快速地獲取一個微信小程序源碼的方式記錄下來。

 

二、簡單聊一下xxxxx.wxapkg

先來想想一個很簡單的問題,小程序的源文件存放在哪?

當然是在微信的服務器上。

但是在微信服務器上,普通用戶想要獲取到,肯定是十分困難的,有沒有別的辦法呢?

簡單思考一下我們使用小程序的場景就會明白,當我們點開一個微信小程序的時候,其實是微信已經將它的從服務器上下載到了手機,然後再來運行的。

所以,雖然我們沒能力從服務器上獲取到,但是我們應該可以從手機本地找到到已經下載過的小程序源文件

那麼如何才能在手機裏找到小程序的源文件包呢?

具體目錄位置直接給出:

/data/data/com.tencent.mm/MicroMsg//appbrand/pkg/

在這個目錄下,會發現一些 xxxxxxx.wxapkg 類型的文件,這些就是微信小程序的包

微信小程序的格式就是:.wxapkg

.wxapkg是一個二進制文件,有其自己的一套結構。

關於.wxapkg的詳細內容可以參考lrdcq大神的博文:微信小程序源碼閱讀筆記

但是這裏有個坑,想要進入到上面這個目錄的話,用手機自帶的文件管理器肯定是不行的,安卓或者iPhone都要要用到第三方的文件管理器,比如:RE文件管理器,並且安卓需要取得root權限,而蘋果手機肯定是要越獄的,且iphone的越獄難度>>安卓獲取root,不管越獄還是root,這都太費勁,當然有能力的同學可以直接從手機上來操作,但是這裏不推薦從真機上獲取。

三、準備材料

node.js運行環境 下載地址

如果沒有安裝nodejs,請先安裝一下

反編譯的腳本。 下載地址

這裏提供一個Github上qwerty472123大神寫的node.js版本的,當然也有其它版本的,這裏我只是簡單地用node.js版本舉例

安卓模擬器(要求自帶root權限)下載地址自行百度

我使用的是夜神模擬器,用來獲取小程序源文件

RE管理器 下載地址自行百度

到時候要拖到模擬器中的

四、詳細步驟

使用安卓模擬器獲取到.wxapkg文件

 

不用越獄,不用root,使用電腦端的安卓模擬器來獲取是一個非常簡單快捷且萬能的獲取方式,具體步驟如下:

 

打開安裝好的安卓模擬器,並在模擬器中安裝QQ、微信、RE管理器

QQ、微信在模擬器自帶的應用商店裏搜索下載安裝即可

QQ、微信在模擬器自帶的應用商店裏搜索下載安裝即可

RE管理器的下載地址自行百度

下載好後直接拖拽進打開的模擬器窗口就會自動安裝

設置一下模擬器

以我個人認爲比較好用的夜神模擬器舉例

首先到模擬器內部設置超級用戶權限

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tLzk3MDk3OGQwMjJiNDE5NDNmZmY0ZjUyMThhZGQ4MGM5LmpwZWdAY18xLHdfNjUxLGhfMzg0LHhfMCx5XzA)

編輯

請點擊輸入圖片描述

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tL2E5NzdiYTQwMGFjYTU1MTNhYzJlNjk2ZGVhMWU4OTY2LmpwZWdAd21fMix0XzU1bSs1YTYyNVkrM0wwRko1cG02NklPOU9BPT0sZmNfZmZmZmZmLGZmX1UybHRTR1ZwLHN6XzIxLHhfMTQseV8xNA)

編輯

請點擊輸入圖片描述

 

這些操作的目的都是爲了能讓RE管理器順利的獲取到ROOT權限

接下來在模擬器裏打開微信,然後在微信中運行你想要獲取的下程序(這其實是讓微信把小程序的源文件包從服務器下載到了本地了)

就以我說的這款淘寶客的小程序舉例

在模擬器微信中運行一下後,直接切回模擬器桌面運行RE瀏覽器 來到目錄

/data/data/com.tencent.mm/MicroMsg//appbrand/pkg/

就抵達了目的文件夾

你會看到發現裏面的一些.wxapkg後綴的文件,就是它們沒錯啦,可以根據使用的時間來判斷那個是你剛纔從服務器下載過來的

一般小程序的文件不會太大,可以結合時間來判斷,長按壓縮所選文件,然後再將壓縮好的包通過QQ發送到我的電腦

如果不進行壓縮的話,是無法將這個文件通過QQ來發送的

所以QQ的這個功能可以讓我們很方便的拿到源文件,而不必到電腦目錄去找模擬器的文件目錄。

解壓。這樣幾步簡單操作,就成功拿到了小程序的源文件了。

五、使用反編譯腳本解包 wxapkg

到這裏你應該已經將反編譯腳本從github下載 或者 clone 到本地某個目錄

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tLzNjNTgyMWUyNGYzNDBiNjlhODhkNTg4Mjg4MmYyOWI5LnBuZ0B3bV8yLHRfNTVtKzVhNjI1WSszTDBGSjVwbTY2SU85T0E9PSxmY19mZmZmZmYsZmZfVTJsdFNHVnAsc3pfMTcseF8xMSx5XzEx)

編輯

請點擊輸入圖片描述

 

打開nodejs命令窗口,按住shift+右擊

 

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tL2NlYjJlMTFmNzk4Y2YzYWQwMzgxMTg5MmZmOTQ0ZDVmLnBuZ0B3bV8yLHRfNTVtKzVhNjI1WSszTDBGSjVwbTY2SU85T0E9PSxmY19mZmZmZmYsZmZfVTJsdFNHVnAsc3pfMTkseF8xMix5XzEy)

編輯

請點擊輸入圖片描述

cd 到你clone或者下載好的反編譯腳本目錄下

 

  • 在node命令窗口中依次安裝如下依賴:

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tL2VmOTdmZmJlYmQ3MTIyZmY5YzFiN2I4YzVkZDNlMDM4LnBuZ0B3bV8yLHRfNTVtKzVhNjI1WSszTDBGSjVwbTY2SU85T0E9PSxmY19mZmZmZmYsZmZfVTJsdFNHVnAsc3pfMTkseF8xMix5XzEy)

編輯

請點擊輸入圖片描述

npm install esprima

npm install css-tree

npm install cssbeautify

npm install vm2

npm install uglify-es

安裝好依賴之後,就是最後一步了,反編譯 .wxapkg 文件

 

在當前目錄下輸入 node wuWxapkg.js [-d] //files 就是你想要反編譯的文件名 例如:我有一個需要反編譯的文件 _163200311_32.wxapkg 已經解壓到了C盤根目錄下,那麼就輸出命令 node .wuWxapkg.js C:\_163200311_32.wxapkg

 

回車運行

![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL3BpYy5ybWIuYmRzdGF0aWMuY29tL2ZjMDYzZWJmZThkN2QzZTA3NDIzNDMwNzY4YzRjNDA5LmpwZWdAd21fMix0XzU1bSs1YTYyNVkrM0wwRko1cG02NklPOU9BPT0sZmNfZmZmZmZmLGZmX1UybHRTR1ZwLHN6XzI5LHhfMTkseV8xOQ)

編輯

請點擊輸入圖片描述

反編譯腳本就能一步將.wxapkg 文件還原爲微信開發者工具能夠運行的源文件,目錄地址和你反編譯的文件地址是一樣的 然後在微信開發者工具新增項目即可打開

運行成功,源碼獲取完成

六、結束語

至此我們就通過非常簡單的方式獲取到了一個想要的小程序源文件,並對齊進行了反編譯還原以後想要再反編譯其他的小程序,非常快速,只需要兩步即可完成

 

使用模擬器找到小程序.wxapkg文件

使用nodejs 反編譯腳本將.wxapkg文件反編譯

使用此方法,絕大部分的小程序都能正常反編譯出來,但是也會有一些特殊的情況,具體可以查看qwerty472123大神的readme文件

 

.apk 之類的文件反編譯非常困難,而小程序竟可以如此輕鬆隨意地被獲取到源碼,根源在於小程序的開發團隊並沒有對小程序的執行文件進行有效的保護,也就是加密,所以我們才能使用別人寫好的腳本直接進行反編譯,其過程類似於解壓。

 

實際上,小程序只是很簡單的將圖片、js和json文件壓在一起,而壓制的過程就是Wxml -> Html、 Wxml -> JS、Wxss -> Css,轉換後文件二進制格式跟後綴名爲wx二進制格式完全一致。

 

上線的源代碼能如此簡單的被獲取到,不得不說小程序的源碼安全存在很大的隱患,這一點很多開發者應該也知道,所以發現有些小程序會將重要的js邏輯代碼柔在一個js文件中,這樣,即使被獲取了源碼,也不是很容易讀懂,但是任然避免不了被窺視的問題。小程序作爲微信生態內的新生力量,不僅被官方,也被很多開發者和內容創業者寄予厚望,處於對代碼的安全性的考慮,這個漏洞遲早有一天會被 修復(封掉) 的。

 

所以這種這裏介紹的獲取小程序源碼的方法,應該是不會太長久的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章