全部产品

如何抓取 HTTP 报文(Mac OS/Charles)

更新时间:2020-03-25 20:54:00

免责声明: 本文档可能包含第三方产品信息,该信息仅供参考。阿里云对第三方产品的性能、可靠性以及操作可能带来的潜在影响,不做任何暗示或其他形式的承诺。

背景

在基于 mPaaS 框架的移动 App 项目开发过程中,经常会遇到各种各样的错误。特别是当问题涉及到客户端与服务器或网关之间的交互行为时,抓取 HTTP 报文是帮助理解和排查这类错误的重要手段。例如,当观察到存在请求报错时,可以通过分析请求报文和响应报文,查看请求的信息是否存在错误、服务器是否正常返回以及查看返回值是否符合预期等,帮助判断问题的根本原因。

HTTP 报文捕获工具

常用的 HTTP 抓包工具有 CharlesFiddler。两者的基本原理几乎一样:

  • 在本地架设一个的 HTTP Proxy,所有通过该 Proxy 的 HTTP 报文均可以被截获和解析。
  • 对于 HTTPS 协议报文的解析需要提前在客户端配置好 Charles/Fiddler 的 CA Root 证书,保证“中间人”转发的信息被客户端信任,从而实现报文的解密。

mode

proxy

说明:Charles/Fiddler 只能对 HTTPS 报文本身进行解密展示。在是实践中,开发者可能会对数据先做一次离线加密操作(如 MGS 的数据加密功能),再经过 HTTPS 进行通讯。这部分的原始内容是无法被 Charles/Fiddler 解密的,只能展示离线加密后的内容。

Charles(Mac OS 平台)

本节以 Charles 4.5.5 版本为例,介绍 Charles 的原理、安装、配置和 HTTPS 解密配置的内容。Charles 在 Mac 端是相当重要的 HTTP 报文分析工具,在许多问题的排查中能够发挥相当重要的作用,帮助开发者高效定位和解决问题。

charles

参考文档:

安装与基本界面

Charles 官网 下载 Charles 4.5.5 的 dmg 安装包,运行安装包并安装到系统中。

首次启动 Charles 时,会请求给予设置系统代理的权限,设置允许。启动后,当有 HTTP 请求经过 Charles 时,可以在 Charles 主界面中见到这些请求,如下图:

message details

客户端配置

  • 在本机上运行的模拟器所产生的 HTTP 请求默认会经过系统 Proxy,因此无需手动配置 Proxy 信息。
  • 对于物理移动设备(iPhone/Android 手机)则需要手动配置 Proxy,保证其所产生的网络请求均经过 Charles Proxy 转发。
    1. 保证移动设备可以通过 IP 直接访问安装 Charles 的 Mac 设备,建议将移动设备和安装 Charles 的机器置于同一网络下。
    2. 查看 Charles 的 Proxy 配置,获取 Proxy 端口号:点击 Proxy > Proxy Settings,打开 Proxy 配置页面,如下图:
      说明:默认端口号为 8888
    3. 打开系统网络设置,查看本机 IP 地址:
    4. 配置移动端 Proxy,以 iOS 设备为例,打开 设置 > 无线网络 > 对应 Wi-Fi 设置,添加 Proxy(Charles 机器)的 IP 地址和端口号。
      iOS proxy
    5. 移动端配置成功后,移动端首次请求到达 Charles 时会有如下提示,点击 Allow
      connection
    6. 在 Charles 中可见到移动设备产生的 HTTP 请求。例如,通过手机浏览器访问 http://www.antfin.com/,可以在 Charles 中见到该请求,如下图:
      request

配置 SSL Proxying

默认情况下,Charles 不会对 HTTPS 报文进行解密,如果需要分析 HTTPS 的报文内容,需配置 SSL Proxying 功能。主要有两部分:

  • 在设备端(模拟器和真机均需安装)安装并信任 Charles Root CA。
  • 在 Charles 中配置需要解密的 HTTPS 站点。

配置设备端

  1. 在 Charles 开启的状态下,移动端通过浏览器(iOS 请使用 Safari)访问 chls.pro/ssl,浏览器会自动下载 charles-proxy-ssl-proxying-certificate.pem 并提示安装 Charles Proxy Customer Root Certificate
    certificate
    Android 会需要对证书命名,并安装在用户信任凭据(Customer Certificate)中。
  2. 对于 iOS 10 以上系统,进入 设置 > 通用 > 关于本机 > 证书信任设置,对上一步安装的 Charles 证书启用完全信任。
    trust
  3. 需要注意的是,对于Android App,需要通过增加 配置网络安全选项 的方式来信任用户信任凭据。步骤如下:

    1. 在 Portal 工程中增加一个 Network Security Configuration XML 资源,放到 res/xml/network_security_config.xml中,XML 内容如下:
      1. <network-security-config>
      2. <debug-overrides>
      3. <trust-anchors>
      4. <!-- Trust user added CAs while debuggable only -->
      5. <certificates src="user" />
      6. </trust-anchors>
      7. </debug-overrides>
      8. </network-security-config>
      XML resource
    2. 更新 AndroidManifest.xml 文件,配置使用上面的 network security configuration:

      1. <?xml version="1.0" encoding="utf-8"?>
      2. <manifest ... >
      3. <application ...
      4. android:networkSecurityConfig="@xml/network_security_config"
      5. ... >
      6. ...
      7. </application>
      8. </manifest>

      AndroidManifest

      点击这里 下载信任 User CA 的代码示例。

  4. 如果本机(Mac)需要信任 Charles 证书,可通过 Help > SSL Proxying > Install Charles Root Certificate 进行设置。
    Install

配置 Charles

在 Charles 菜单栏选择 Proxy > SSL Proxy Settings…,在 SSL Proxying 选项卡中可以添加需要进行 HTTPS 报文解密的域名和端口,并勾选 Enable SSL Proxying

SSL Proxy Settings

  • 对于 mPaaS 公有云用户,需要增加的域名包括:
    • *.aliyun.com
    • *.alipay.com
    • *.aliyuncs.com
  • 对于专有云用户,参考上述配置,加入自定义域名。

上述配置完成后,可在 Charles 中看到 HTTPS 报文的内容,例如:

  • 配置前:HTTPS 报文处于乱码状态。
    before
  • 配置完成后:HTTPS 报文内容被解密。
    after