MAC 使用Charles进行抓包详细教程

很酷爱学习
13,939 阅读11分钟

操作环境：

  • 电脑系统：Mac OS （本人11.3.1）
  • 手机系统：iOS 12及以上（本人目前14.2）/Android
  • Charles版本：V4.6.2

使用场景

正常情况下，Chrome DevTool已经满足了日常web开发的需求，但是有的特性：编辑request参数、重定向request请求资源、编辑response数据，使用ChromeDevTool就感觉力不从心啦，而且查看和调试移动端资源时候Chrome也并不好用。

使用charles可以做这些事情:

  • 抓取 http 和 https 的请求和响应，这是最常用的。
  • 重发网络请求，方便后端调试。
  • 修改网络请求参数（客户端向服务器发送的时候，可以修改后再转发出去）。
  • 网络请求的截获和动态修改。
  • 支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。
  • 支持本地映射和远程映射，比如你可以把线上资源映射到本地某个文件夹下，这样可以方便的处理一些特殊情况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你可以本地随便修改，数据之类的都是线上的环境，方面在线调试）。
  • 可以抓手机端访问的资源（如果是配置HOST的环境，手机可以借用host配置进入测试环境）。

安装

官网下载安装

使用

第一步：安装Charles证书到MAC

1.启动Charles，选择Help-->SSL Proxying→Install Charles Root Certificate

image.png

2.此时会启动“钥匙串访问”APP，并找到刚开安装好的证书，证书名字：Charles Proxy CA，找不到的可以搜索框搜下。

image.png

3.双击证书，点击显示简介

image.png

4.更改证书信任权限。更改为始终信任，并关闭窗口输入密码保存。

image.png

5.复制粘贴该证书到“系统”里面。此时电脑端的证书就配置完毕了

image.png

6.设置HTTPS端口抓包，点击Charles-->Proxy-->SSL Proxying Settings，出现如下弹窗，点击"Enable SSL Proxying",点击“Add”

image.png

image.png

7.按照图中输入，点击保存。至此，电脑端配置已全部完成！

image.png

第二步：安装Charles证书到手机

前提：手机必须和电脑在同一个Wi-Fi下

1.首先查看电脑IP地址，点击help-->SSL Proxying -->Install Charles Root Certificate On a Mobile Device or Remote Browser 如下图：

image.png 弹出如下图弹框：

image.png

2.IPhone证书安装

IPhone，Wi-Fi设置代理。步骤：设-->WIFI-->点击Wi-Fi旁边的i

image.png

2.划到底部，点击配置代理

image.png

3、配置代理，输入上面查出来的IP和端口，点击存储（注意切换wifi IP也会变更需要重新配置）

image.png

4.然后打开Safari浏览器，访问：chls.pro/ssl，此时电脑上连接提示，点击allow允许。

5.此时手机会提示下载描述文件，点击允许

image.png

6.下载后，点击 设置-->通用-->描述文件，安装刚下载好的文件

image.png

7.安装完成后，点击 设置-->通用-->关于本机，下拉到底部，点击证书 信任设置，把刚信任开关打开。

image.png

image.png

8.大功告成!

使用介绍

视图

Charles 提供两种查看抓包的视图，分别名为 Structure 和 Sequence。

  • Structure/结构视图，将网络请求按访问的域名分类，比如某个域名下有n个资源请求，那么所有此域名下的请求都会归为这一类；
  • Sequence/序列视图，将网络请求按访问的时间排序，按照你的电脑的发送请求顺序进行。

筛选

有时候请求多了会看不过来，想过滤出自己想要的结果。

方法一：Charles 提供了一个简单的 Filter 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。

image.png

方法二：修改Include的域名和端口。 在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”，然后选择 Include 栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了;

image.png

通常情况下，我们使用方法一做封包过滤，方法二做一些唯一的域名抓包。

方法三：过滤焦点域名

在目标的网络请求上右键，选中focus（此时，该域名已经被设置为一个焦点标记了），然后点击fillter后面的focused来筛选你的做的focus标记文件

image.png

这种方法是抓取特定的网络请求，你设置的焦点域名在”focused Hosts”里面可以查看和管理。

image.png

这种模式下的展现更加人性化，当你设置某个域名为焦点域名的时候，在Structure视图下，会把当前域名单独显示在上面，而其它的非焦点域名，都会在other Hosts里显示。

image.png

界面介绍

image.png

Contents是最常用的一个标签，其中上半部分是请求，下半部分是响应：请求部分中，会根据请求的内容，而分为很多项，比如如果是表单提交，还会有form的选项供你查看提交的内容（表格图形化的方式），最后一项”Raw”是未经处理的请求信息，可以理解为，raw左侧的所有项目都是对raw信息的拆分和美化，以便直观查看

Proxy

image.png charles有强大的代理功能，总的来看大概可以分为5大块：

一、常用功能开关区

  • stop/start recording 开始/暂停记录
  • stop/start throttling 开始/暂停节流
  • enable/disable breakpoints 启用/禁用断点

【stop/start recording和recording settings】是常用的功能，这里需要注意后面的session1代表当前你将要操作的会话窗口，就是切换是否进行捕获记录。作用：限制记录大小 限制记录的历史 显示websocket的设置。下面的Imporet和export分别是资源的导入和导出，类似PSD文件一样，详细的储存，方便直接导入使用；但是仅仅是储存当前的设置。include、exclude是对特定域名进行抓包。

image.png

【stop/start throttling 、throttling settings】暂时开始慢网速，这个手机上2G/3G/4G的速度，这个对应工具栏的小乌龟图标。一般选择多少网速就可以了，下面默认即可。 注意限速是指向下兼容，如果你网速很差，你选个100Mbps的，也是没用的。

image.png

image.png

【enable/disable breakpoints 、breakpoints settings】有时候对于一些特殊请求在发往服务器之前想要修改一些参数，或者在服务器响应完成之后修改响应信息，此时可以使用Charles的断点功能，设置断点之后，当有网络请求的时候Charles会自动跳转到断点处，此时我们就能进行相关的修改。

image.png

image.png

二、常用功能设置区

  • recording settings 记录设置
  • throttle settings 节流设置
  • breakpoint settings 断点设置

三、反向代理和端口转发区域

  • reverse proxies 反向代理
  • port forwarding 端口转发

【反向代理】

正向代理和反向代理的区别：

正向代理：是代理客户端，为客户端收发请求，使真实客户端对服务器不可见；在客户这一端的，替客户收发请求（类似现在正常使用的charles的功能）。

反向代理：是代理服务器，为服务器收发请求，使真实服务器对客户端不可见；在服务器这端的，替服务器收发请求，应用场景常见是就是请求分发到多台服务器的负载均衡应用。

反向代理的设置

本地端口:

本地主机上的端口创建反向代理。该字段可能会自动填充一个可用的端口。如果有另一个应用程序使用该端口，则在反向代理启动时将收到一条警告消息。

例如。给定本地端口8001，将连接到http:// localhost:8001/

远程主机和端口:

作为反向代理的目的地的远程主机的主机名或IP地址和端口。远程端口默认为80，这是HTTP的默认端口。

例如。输入www.jianshu.com的远程主机和80的远程端口，然后http:// localhost:8001 /将像是已连接到www.jianshu.com。

image.png

重写重定向：

重定向远程服务器的响应将被重写以与反向代理源地址相匹配。默认为开。

远程服务器的重定向响应是完全限定的URL，即使它们在同一网站内。

如果重定向到远程服务器地址，则需要将其重写为反向代理本地地址，否则客户端将使用重定向URL到远程主机，因此不再通过反向代理连接。

保留主机头:

仅当具有特定要求时，才需要保留主机头;普通使用的时候没有必要使用的。

监听特定地址:

如果要指定本地地址以侦听反向代理，则可以启用此选项并在此处输入IP地址。如果要在同一台机器上运行多个网络服务，但在同一台机器上的不同IP地址上运行，则此功能非常有用。

禁用此选项时，反向代理将绑定到所有可用的本地地址。

【端口转发】

端口转发（Port forwarding），有时被叫做隧道，是安全壳(SSH) 为网络安全通信使用的一种方法。端口转发是转发一个网络端口从一个网络节点到另一个网络节点的行为，其使一个外部用户从外部经过一个被激活的NAT路由器到达一个在私有内部IP地址（局域网内部）上的一个端口。

端口转发能够将本地TCP或UDP端口透明地转发到远程主机和端口。 所有在端口的请求和回复可能会记录在charles。

端口转发流量记录在Charles中作为socket：// host：port / URL

如果有要使用Charles监控的非HTTP应用程序，则端口转发非常有用。

将端口创建到原始目标服务器，然后将客户端应用程序连接到本地端口; 端口转发对客户端应用程序是透明的，并能够查看Charles先前可能无法使用的流量。

例子：

可以将本地主机上的TCP端口2525转发到远程主机上的端口25， 然后当连接到localhost时：2525 Charles将透明地将流量转发到远程主机，就像直接连接一样，会看到在Charles中记录的流量为socket：// localhost：2525 /，该功能。

四、charles的代理身份配置区域

  • macOS Proxy 开启整个系统通过charles作为代理

五、常用的高级设置区

  • proxy setting 代理设置
  • ssl proxy setting ssl代理设置
  • access control setting 访问控制设置
  • extornal proxy setting 外部代理设置
  • web interface setting Web界面设置

【Proxy Settings】设置的主界面如下：

image.png

动态端口：

启用动态端口选项来监听动态端口，每次启动时会进行查询，会赋予合理的端口，这样可以避免与计算机上可能运行的其他网络服务的冲突。

透明代理：

透明代理使Charles能够访问不支持HTTP代理服务器的客户端，或者不知道他们正在使用HTTP代理服务器，例如TCP / IP连接由路由器或防火墙重定向到Charles。这里可以被手机连接。

手机连接的时候，http代理那里写选手动，并填写此时charles的本机地址和上面设置的8888端口即可。

image.png

image.png

【SSL Proxying Settings】

通过SSL代理，您的浏览器或应用程序将收到由Charles签名的证书，而不是来自远程Web服务器的原始证书。这将在您的浏览器或应用程序中触发警告，某些应用程序实际上可能会拒绝该连接。

image.png

【Access Control Settings 】

访问账户设置，连接到charles时的一些配置，控制确定谁可以使用charles。

image.png

本机是永远都可以访问的，默认的访问控制列表如果是空的，意味着除了这台电脑以外，没有任何设备可以使用charles。如果你把下面的提示开始，未经授权的设备连接时候会提示你是否允许。

【External Proxy】

外部代理设置，有时候可能需要使用网络上的代理服务器才能访问Internet，上面已经提到了，是没法连接代理服务器的同时，让charles继续抓包的，在这种情况下，需要为Charles配置外部代理。

参考前辈博主

avatar
文章
阅读
粉丝