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来抓包，更快地找到问题并且解决问题。