Charles抓包的那些事

前言

作为移动端开发人员用的最多的抓包工具就是charles,但是我近几年一直做PC端的前端开发工作，感觉chrome的devtools已经满足了日常的工作需求；对于charles的使用也很少。最近开始做一些webview的开发，对于灰度环境，线上环境的bug还是需要用到charles的，所以这篇文章也是我自己的趟坑之旅，用作平时对于charles的一些总结，以免出现有段时间不用再用的时候“抓瞎”的情况；

一、Charles抓包原理

• 客户端向服务器发起HTTPS请求
• Charles拦截客户端的请求，伪装成客户端向服务器进行请求
• 服务器向“客户端”（实际上是Charles）返回服务器的CA证书
• Charles拦截服务器的响应，获取服务器证书公钥，然后自己制作一张证书，将服务器证书替换后发送给客户端。（这一步，Charles拿到了服务器证书的公钥）
• 客户端接收到“服务器”（实际上是Charles）的证书后，生成一个对称密钥，用Charles的公钥加密，发送给“服务器”（Charles）
• Charles拦截客户端的响应，用自己的私钥解密对称密钥，然后用服务器证书公钥加密，发送给服务器。（这一步，Charles拿到了对称密钥）
• 服务器用自己的私钥解密对称密钥，向“客户端”（Charles）发送响应
• Charles拦截服务器的响应，替换成自己的证书后发送给客户端
• 至此，连接建立，Charles拿到了 服务器证书的公钥 和 客户端与服务器协商的对称密钥，之后就可以解密或者修改加密的报文了。

HTTPS抓包的原理还是挺简单的，简单来说，就是Charles作为“中间人代理”，拿到了 服务器证书公钥 和 HTTPS连接的对称密钥，前提是客户端选择信任并安装Charles的CA证书，否则客户端就会“报警”并中止连接。这样看来，HTTPS还是很安全的。

二、PC端抓包

1. HTTP
   一般我们正常安装完charles之后就会,HTTP数据就会正常抓取到
   
   注：如果突然某一天charles连本机的http都抓取不到了，请检查一下你本地是否开启了VPN代理，关闭VPN就好了。

2. HTTPS
   我们正常安装完charles是可以抓取到HTTP数据的，但是HTTPS通常返回unknown。
   
   因此想要抓取https的数据就要做些操作：

• 安装根证书
  
  这里说明一下安装根证书一般是不被信任的，需要自己取钥匙串里面去手动授予信任，我以mac为例：
  
  
• 配置 Proxy-> SSL Proxying Settings->SSL Proxying:勾选Enable SSL Proxying
  
  
  然后再去请求HTTPS的时候就可以了
  

三、移动端抓包

• Charles上的设置

  1. 安装根证书
     上文PC端已详细说明怎么抓取https包，并安装根证书，参照上文就可以。
  2. 要截取手机上的网络请求，我们首先需要将Charles的代理功能打开。
     在Charles的菜单栏上选择“Proxy”->“Proxy Settings”，填入代理端口8888，并且勾上”Enable transparent HTTP proxying” 就完成了在Charles上的设置。如下图所示:
     

• 手机上的设置（iPhone）
  a. 确保手机与电脑连得同一个wifi。
  b. 在设置 - 无线局域网，找到链接的wifi，点击进去，找到配置代理 - 手动，然后填写电脑IP（不会找IP的问度娘吧），端口8888，如图所示：
  
  c. 手机安装ssl证书
  Charles上 Help->SSL Proxying ->Install Charles Root Certificate on a Mobile Device or Remote Browser，会弹出如下提示框：
  
  手机连接电脑代理，打开safari，输入网址：chls.pro/ssl
  手机弹出提示：此网站正尝试打开“设置”已向您显示一个配置描述文件。您要允许吗？忽略|允许，选择允许，安装描述文件，并信任！
  iOS10.3以上的手机需要在：设置→ 通用 → 关于本机 → 证书信任设置→ 找到charles proxy CA证书，打开信任即可；
  
  设置好后，我们打开iPhone上的需要抓包的页面，一切正常获取数据！
  
  注意：手机要与电脑在同一个WiFi下；本文以iphone为例，安卓机型挺多，大家可以针对自己机型搜索一下，大体步骤一样，只是针对证书安装这块略有区别！

四、Charles常用技巧

1. 如果只想抓取移动端的包，不想抓取PC的包，可以设置Proxy - MacOS Proxy ，勾选表示接收电脑的数据抓包，不勾选表示只抓app包。
2. Tools - Map Remote 是将指定的网络请求重定向到另一个网址（针对还没有提测的接口，我们可以代理到特定服务器）。（之前联调微信公众账号的时候用过）
   Tools - Map Local 是将指定的网络请求重定向到本地文件(修改返回的数据，本地文件就是你想要返回的数据)。
   参考
   例子（通过线上域名访问本地环境）
3. 如果突然某一天你的charles连本机的http都抓取不到了，请检查一下你本地是否开启了VPN代理，关闭VPN就好了。
4. 如果你安装了PC证书，手机也正常安装证书一切都合乎常理，就是抓不到https的包，请检查手机端是否启用了证书，启用方法：通用 - 关于本机 - 证书信任设置 - 把你的证书启用就好了
5. Charles 30分钟会自动关闭，弹出一个弹窗；我们可以设置一下，让它30分钟不自动关闭；
   • 1.网上查找后发现是需要注册一下。
   • 打开Charles，如图的操作顺序
     
     
   • 框内输入
     Registered Name: https://zhile.io
     License Key: 48891cf209c6d32bf4
   • 重启即可