Charles微信小程序抓包教程

一、 導入Charles證書

在使用Charles之前，需要將Charles的證書導入到手機中，才能夠監控HTTPS請求，否則只能夠監控HTTP請求。

導入證書的方法如下：

1、在電腦上安裝Charles

2、打開Charles，選擇Help -> SSL Proxying -> Install Charles Root Certificate

3、按照提示，將Charles證書導入到系統中

4、將手機連上電腦，打開Charles的Proxy -> Proxy Settings，並且開啟SSL Proxying

5、在手機上打開http://charlesproxy.com/getssl，下載Charles的證書

6、打開設置 -> 通用 -> 描述文件，找到Charles證書，並且點擊安裝

7、在手機的WLAN設置中，將HTTP代理設置成手動，並且填入電腦的IP地址和端口號（默認為8888）

8、打開微信小程序，在Charles上可以看到抓包結果

二、 抓包技術介紹

Charles可以通過兩種方法來監控網絡請求，分別是：

1、代理網絡請求，將所有的請求都轉發到Charles上，再將請求轉發給服務器

<script type="text/javascript">
  wx.request({
    url: 'https://example.com/api',
    success: function(res) {
      console.log(res)
    },
    fail: function() {
      console.log('fail')
    }
  })
</script>

2、安裝證書，監控HTTPS請求，然後解密HTTPS請求，得到明文的請求和響應

<script type="text/javascript">
  wx.request({
    url: 'https://example.com/api',
    success: function(res) {
      console.log(res)
    },
    fail: function() {
      console.log('fail')
    },
    complete: function(res) {
      console.log(res)
    }
  })
</script>

三、 抓包實戰

1、抓取小程序訪問API的請求

首先打開一個微信小程序，然後在Charles的Proxy -> SSL Proxying Settings 中加入一個規則，如下圖所示：

在小程序中的請求將自動被捕獲，然後可以對請求進行攔截、修改、添加headers等等操作：

// 攔截請求
if (request.url.match(/api/)) {
  request.responseStatusCode = 403;
  request.responseText = 'Access Denied';
}

// 修改headers
if (request.url.match(/api/)) {
  for (var header in request.requestHeaders) {
    if (header.toLowerCase() == 'authorization') {
      request.requestHeaders[header] = 'Bearer newtoken';
    }
  }
}

// 添加headers
if (request.url.match(/api/)) {
  request.requestHeaders['X-Custom-Header'] = 'Custom Value';
}

2、修改小程序中的請求

有時候我們需要修改小程序中的請求，比如將請求方法從GET改為POST，更改URL中的參數等等。這時可以使用Map Local功能，將請求映射到一個本地的文件中，然後對文件進行修改。具體的步驟如下：

1）在Charles上，選擇 Tools -> Map Local

2）點擊Add按鈕， 添加一條Rule，如下圖所示：

3）點擊Edit按鈕，修改對應的文件，保存修改

4）在小程序中對應的請求就會被重定向到本地文件中的內容

四、 總結

本文介紹了Charles微信小程序抓包的方法，包括證書的導入、抓包技術介紹、抓包實戰、修改小程序中的請求等方面。了解了這些內容之後，你會更加熟練地使用Charles來抓包，更快地找到問題並且解決問題。