代理工具的使用-Charles

目录

一、Charles及其作用

1、Charles是什么

2、Charles的作用

3、Charles安装

3.1 Charles支持平台

3.2 Charles安装

二、Charles的使用

1、本地全部网络hhtp请求都走Charles代理

2、Charles充当中间代理方式进行网络监控

2.1 浏览器

2.2 移动端

3、拦截客户端请求，篡改数据后发送给服务端

4、拦截服务端响应结果，篡改数据后发送给客户端

5、弱网测试

---

一、Charles及其作用

1、Charles是什么

 Charles是一个可运行在自己本地机器的web代理（HTTP代理或HTTP监听器），你的web浏览器（或任何网络应用）都可以配置Charles代理配置从而通过Charles访问互联网，Charles可以记录下访问过程中请求和响应的数据。

Charles官网：https://www.charlesproxy.com/

2、Charles的作用

• 截取 Http 和 Https 网络封包。
• 支持重发网络请求，方便后端调试。
• 支持修改网络请求参数。
• 支持网络请求的截获并动态修改。
• 支持模拟慢速网络。

3、Charles安装

3.1 Charles支持平台

Charles可支持Windows，macOS，Linux系统

3.2 Charles安装

3.2.1 下载

下载地址：https://www.charlesproxy.com/download/

3.2.2 安装（示例为macOS版本安装：charles-proxy-4.6.1.dmg）

下载好应用后，双击.dmg文件->点击同意协议->拖拽到应用文件夹

从启动台打开Charles app，则可看到如下页面：

二、Charles的使用

1、本地全部网络hhtp请求都走Charles代理

适用于PC端本地请求抓包，包括浏览器，APP等。

示例：本地PC端浏览器抓包

step1 配置macOS proxy（用于控制masOS网络应用是否默认使用Charles代理），设置好代理端口，端口设置只要不与本地已用端口一致即可。

step2 安装Charles根证书

    设置证书信任

step3 点击Charles录制按钮，打开浏览器访问网站

2、Charles充当中间代理方式进行网络监控

2.1 浏览器

step1 设置代理端口（端口设置要求：未被其他程序占用）

step2 在浏览器端添加代理（利用Chrome扩展程序：Proxy SwitchyOmega做浏览器代理，再用Charles充当中间代理方式实现抓包）

    安装Proxy SwitchyOmega：直接在Chrome扩展程序商店中搜索SwitchyOmega，并添加到Chrome浏览器中

    配置Proxy SwitchyOmega：

step3 点击Charles录制按钮，打开浏览器访问网站

    

2.2 移动端

step1 安装移动端Charles根证书，并在弹出的小弹窗中点击OK按钮

step2 手机端安装Charles证书

    配置代理，代理地址为step1中小弹窗的IP:port

    在浏览器中访问chls.pro/ssl地址

    按照step1中小弹窗中的步骤信任证书

step4 在手机端浏览器中访问百度，并在Charles中查看抓包情况

3、拦截客户端请求，篡改数据后发送给服务端

示例效果：在百度搜索框中输入http，在Charles代理中篡改搜索参数为https，使实际搜索结果为搜索https的结果集。

step1 更改rewrite设置

step2 在浏览器中输入http，查看搜索结果

4、拦截服务端响应结果，篡改数据后发送给客户端

示例效果：在百度搜索框中输入http，在Charles代理中篡改响应body返回的http为[代理测试]，使搜索结果中本应是http字符的显示为[代理测试]。

step1 在Charles的rewrite中添加配置

step2 在浏览器中搜索http，查看返回结果

5、弱网测试

示例效果：设置弱网往上，查看web页面的响应效果

step1 设置弱网网络网速及相关配置

 

step2 访问百度，查看响应效果