Ryan Shang

生死看淡，不服就干

0%

移动端开发调试工具——Charles

发表于 分类于

一、简介

01

1
Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles是移动端开发时候比较常见的抓包工具：

  • Web调试代理工具

  • 可用于Http/Https接口获取Request/Reponse信息

  • 可用于手机抓包

二、PC/Mac HTTPS配置

1. 安装根证书

(1) Mac
  1. 在应用的工具栏选择Help—SSL Proxying—Install Charles Root Certificate
  2. 输入本机密码安装证书（注意需要安装为系统证书）
  3. 打开Mac的“钥匙串访问”程序，选择系统，找到Charles Proxy CA一项，双击打开
  4. 点击信任，然后全部改为“始终信任”
  5. 重启Charles
  6. 在应用的工具栏选择Proxy—macOS Proxy即可对Mac进行抓包

02

(2) PC
  1. 在应用的工具栏选择Help—SSL Proxying—Install Charles Root Certificate
  2. 在弹出的“证书”页面，选择“安装证书”
  3. 选择“本地计算机”，点击“下一页”（需要管理员权限）
  4. 选择“将所有的证书都放入下列存储”，点击“浏览”，选择“收信人的根证书颁发机构”，点击“确认”，点击“下一页”
  5. 点击“完成”
  6. 重启Charles
  7. 在应用的工具栏选择Proxy—Windows Proxy即可对Windows进行抓包

03

2. 配置Https

  1. 在应用的工具栏选择Proxy—SSL Proxying Settings
  2. 勾选“Enable SSL Proxying”
  3. 在Include下点击“Add”
  4. Host输入通配符(*)，Port输入443，点击“OK”
  5. 点击“OK”

04

三、iOS/Android配置

1. 下载手机证书

(1) iOS
  1. 打开iOS的“设置”—无线局域网—选择和PC/Mac同一局域网进行连接
  2. 修改当前局域网配置，在http代理项，“配置代理”—手动—输入PC/Mac的IP地址（可在Charles—Help—Local IP Address查看），端口号选择8888（默认值），点击右上角“存储”
  3. 首次连接PC/Mac会提示设备链接，需要确认是“Allow”还是“Deny”，选择“Allow” （可在Charles—Proxy—Access Control Settings管理）
  4. 打开Safafi浏览器，输入网址“chls.pro/ssl”，提示是否允许下载配置描述文件，选择“允许”
  5. 点击“OK”
(2) Android
  1. 打开Android的“设置”—“WLAN”—选择和PC/Mac同一局域网进行连接
  2. 修改当前局域网配置，在代理项，选择手动—输入PC/Mac的IP地址（可在Charles—Help—Local IP Address查看），端口号选择8888（默认值），保存
  3. 首次连接PC/Mac会提示设备链接，需要确认是“Allow”还是“Deny”，选择“Allow”（可在Charles—Proxy—Access Control Settings管理）
  4. 打开浏览器，输入网址“chls.pro/ssl”，下载证书文件

2. 安装手机证书

(1) iOS
  1. 打开iOS的“设置”—通用—VPN与设备管理—已下载的描述文件—点击“Charles Proxy CA……”
  2. 进入安装描述文件页面，点击“安装”，输入锁屏密码安装证书
  3. 打开iOS的“设置”—通用—关于本机—证书信任设置
  4. 找到安装的“Charles Proxy CA”，开启后面的开关
(2) Android

Android系统的CA证书分为两种：用户证书和系统证书

Android7.0后，Android的APP默认配置只信任系统证书，使用用户证书无法对Https进行抓包

安装CA证书为用户证书（适用于测试包）：
  1. 下载证书文件后，打开Android的“设置”，安全—加密与凭据—安装证书—CA证书—选择刚下载的证书文件（不同厂商、不同版本操作步骤可能会有区别）
安装CA证书为系统证书，需要ROOT（适用于正式包）：
  1. 把下载的证书转移到PC/Mac上，使用openssl x509 -subject_hash_old -in charles-ssl-proxying-certificate.pem计算特征值，例如46f58a05
  2. 把证书文件改名为46f58a05.0
  3. 把证书放到手机的系统分区中/system/etc/security/cacerts/

四、常用功能

1. Rewrite

操作：Charles工具栏—Tools—Rewrite

适用场景：对接口的Req/Res进行调整；对HTML进行注入

05

06

2. Map Local

操作：Charles工具栏—Tools—Map Local

适用场景：本地开发真机调试，build后替换资源；新项目上线前的模板Mock

07

08

3. Map Remote

操作：Charles工具栏—Tools—Map Remote

适用场景：部分SDK的联调

09

10

4. Breakpoints

操作：Charles工具栏—Proxy—Breakponits Settings

适用场景：对接口的Req/Res进行编辑

11

12

13

14

五、推荐实践

1. 每次调试完成后关闭所有工具

操作：每次使用完成后，关闭Map Remote/Map Local/Rewrite/Breakpoints等功能

作用：排除因这些功能造成的异常

2. 设置抓包记录域名白名单

操作：在Charles—Proxy—Record Settings设置抓包记录域名白名单

作用：只记录58相关域名，减少其他请求干扰

15

3. SSL证书绕过Apple域名

操作：在Charles—Proxy—SSL Proxying Settings设置SSL代理不包括Apple相关域名：

  • *.apple.com
  • *.itunes.apple.com
  • *.mzstatic.com

作用：抓包时候可以正常访问Apple Store以及苹果内购（也可以通过手机的pac分流实现）

16

4. 使用Rewrite注入vconsole

操作：在Charles—Tools—Rewrite设置给html请求的Response注入vconsole

作用：不需要给项目中增加冗余代码，不需要重新构建，不会影响线上代码

16

5. 利用Map Local/Rewrite模拟一些case

操作：利用Map Local/Rewrite模拟一些case

作用：不改变代码逻辑的情况对线上接口进行微调
（jsonp使用Rewrite）