移动端http、https抓包之Charles

抓包工具Charles的使用

Charles的安装大家自行搜索安装就好了。macOS环境，windows环境上有更好的Fiddler，这里不做过多介绍。Charles中各个设置的位置可能在不同版本中有变动，本文章使用了Charles4.1.4

安装后的代理基本设置

1.调出端口设置页面
菜单栏操作 Proxy->Proxy Settings...

---

2.设置端口
选中Proxies面板->HTTP Proxy 下的Port: 后填入 8888 -> 点击OK完成

端口设置为8888并没有什么特殊意义，你也可以更改为1024到49151之间的任一端口，不建议使用1024以下端口，那些都是公认端口，有特殊意义或者正在被电脑使用。

---

3.设置手机代理

(以MIUI为例) 打开WLAN设置->进入链接的WiFi的设置。代理处选择手动->主机名设置为我们刚才安装Charles的主机的IP->端口输入上面设置的8888->点击确定完成

4.效果查看
打开手机的浏览器，查看Charles是否捕获到了网络请求 注意我选的是Structure结构，如果和你界面显示不一致注意切换。在Request中我们已经可以看到了网络请求。

上面截图框选的3，4两处。3处我们可以看到是一个http请求，我们看到了请求的内容。4处的请求是个https请求，是不能直接查看请求内容的，因为请求本身是加密的。

---

抓取https请求的设置

1.手机安装证书

菜单栏操作 Help->SSL Proxing->Install Charles Root Certificate on a Mobile Device or Remote Browser

(注意上图的2，我们会在MIUI安装证书时用到)

手机浏览器输入框选的这个地址，记得加协议头http://访问的时候如果你手机没有设置锁屏密码的话会优先提示你设置密码(为了安全)，设置为就会进入证书下载页面，输入证书名称点确定即可(MIUI的特别设置：不知道MIUI是处于什么考虑不允许这种浏览器安装证书的方式，我们需要采用本地安装的方式。还记得安装证书第一步我标识2的Save Charles Root Certificate... 吗，点击它，下载证书到主机，然后以你喜欢的方式转存到手机MIUI:设置->更多设置->系统安全->凭据存储：从存储安装)

2.Charles设置代理https

菜单栏操作 Proxy->SSL Proxying Settings... 开启SSL代理->输入要抓取https接口的域名->OK

3.效果查看

我们已经抓取到了https接口的内容

---

文章到此处抓取请求的方法就介绍完了，下面说一下我们在开发中使用Charles来解决开发服务器不提供https服务的场景

开发场景应用

1.通过切换host指向开发服务器的情况
通常这种情况，如果我们应用发出的是http请求，那么直接使用Charles代理到本机，本机切换host指向开发服务器IP即可。但是如果我们应用发出的是https请求，且开发服务器不提供https服务，你可以在切换host这个操作的基础上再将https请求经过Charles转换为http请求： 开启远程请求替换->添加替换规则->from https协议 map to http 协议->OK

我们来看下结果：已经将https请求转换为了http请求，并得到了返回结果

2.开发服务器与线上服务器不同域名的情况

这种情况，我们同样适用情况中的Map Remote方式，将原始域名替换为开发环境的域名，如图： 将hot.browser.miui.com替换为hot-dev.browser.miui.com

最后的最后，有个叫https双向认证的概念，如果你遇到这种情况，上面的方法是无法抓取数据的，这个话题等有机会我们再谈。