如何使用charles抓包H5页面内容

开发工具
留言

安装 charles

这里推荐直接去官网下载 https://www.charlesproxy.com/latest-release/download.do
根据自己的电脑选择合适的安装包，我这里选择 macOS dmg 格式安装包。安装好后直接运行，第一次是试用版

破解方法

考虑到自己经常使用这个抓包，就在网上搜了下破解方法
方法一：
Registered Name: https://zhile.io
License Key: 48891cf209c6d32bf4
直接用上面的注册码，点击 help->register Charles 输入上面提供的注册码，输完确定后重新启动 charles 即可
方法二：
访问https://www.zzzmode.com/mytools/charles/ 根据页面提示完成操作

抓取 http 报文

想要抓取手机上 H5 页面可按照一下步骤：

  1. 将手机和电脑连接在同一个网络上，电脑和手机连接同一 WIFI
  2. 在 Mac 上系统偏好设置->网络面板可查看到自己电脑的 ip
  3. 在手机连接上同一 WIFI 后，修改网络，设置代理，填写服务器主机名为第 2 步中查看到的自己电脑的 ip，服务器端口为 8888，点击保存
  4. 此时在手机上访问的 http 协议页面在 charles 上都能看到网络请求

抓取 https 报文

想要抓取 https 报文，必先安装证书，如果是想抓取 mac 浏览器访问的 https 页面，mac 得安装证书，同理如果是想抓取手机访问 https 页面，手机得安装证书

mac 上证书安装

  1. 点击 help -> SSL proxying -> install charles root certificate 密码授权
  2. 在弹出的添加证书窗口中，选择添加，可以看到在钥匙串访问窗口中，该证书已成功添加，但是此时该证书仍然不被信任
  3. 双击此证书，在弹出的 Charles Proxy CA 窗口中，点击信任按钮，使用此证书时，选择始终信任后关闭窗口，使用账号和密码授权后，即可看到此证书已经被信任了

此时 mac 上访问的 https 页面在 charles 上能看到网络请求了

手机上证书安装

  1. 手机和电脑连接同一网络后，用手机默认浏览器访问http://chls.pro/ssl 下载 pem 证书
  2. 安装证书，这里不同的手机安装证书方式不同，我这里已 huawei 手机为例 设置->安全和隐私 ->更多安全设置 -> 加密和凭据 -> 从存储设备安装 点击刚才下载的 pem 证书 即可安装完成。
    此时手机上访问的 https 页面也可以在 charles 上看到网络请求了

如何用 charles 过滤请求

在用 charles 抓包请求时会看到有很多请求并不是自己想要的，这时候我们需要学会过滤出自己想要的请求。
过滤方法有三种

  1. 在主界面的中部的 Filter 栏中输入需要过滤出来的关键字

  2. 菜单栏选择 “Proxy”->”Recording Settings”，在弹出的窗口中选择 Include 栏，再点击“Add”，在弹出的窗口中输入需要监控的协议，主机地址，端口号等信息，来添加一个项目。如下图所示：

  3. 在想过滤的网络请求上右击，选择 “Focus”，之后在 Filter 一栏勾选上 Focussed 一项，如下图所示：

charles 如何限制网速，模拟弱网环境

选择 Proxy->Throtting Setting，打开后如下图设置

charles 如何修改请求的响应内容

选中要修改的请求，右击选择 Map Local 在 Edit Mapping 弹窗中选择一个本地文件(自己修改后的请求)作为请求的响应内容

charles 如何代理 localhost

因为某些系统硬编码使得 localhost 的流量不走系统代理，导致 charles 无法代理 localhost
解决方法
第一步: 修改 host 将 127.0.0.1 指向localhost.charlesproxy.com
第二步：在浏览器中请求 localhost.charlesproxy.com:8080

以上这三步就可以在 charles 中捕获到 localhost 中的请求了，方便后面修改请求的响应内容

这里使用 8080 端口是因为我本地开启的服务就是在 8080 端口上

参考文章：

  1. Charles