由于去过风险点位,我从2022年6月16日开始,进行为期一周的居家隔离,门都不让出。在家闲着没事,研究点东西:如何通过Charles抓取https请求的内容,并修改响应内容?

1. 试验材料

硬件:Macbook pro、iPhoneXR,且保证Macbook pro和iPhoneXR在同一个局域网下

软件:Charles,下载地址:Download a Free Trial of Charles • Charles Web Debugging Proxy

2. 步骤

A. 打开Charles,界面如下:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https

B. 在Macbook pro上安装证书

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_02

 确认添加Charles根证书:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_抓包_03

信任添加的Charles根证书:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_抓包_04

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_05

 选择始终信任,并关闭窗口。Charles根证书将被信任:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_06

C. 设置手机端信任Charles证书

Charles设置:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_抓包_07

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_08

让Charles可以代理https:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_09

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_抓包_10

设置访问控制:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_11

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_Mac_12

查看Charles的IP和端口:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_13

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_14

设置手机http代理:

首先保证手机与电脑在同一个局域网内。

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_15

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_16

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_17

在手机的Safari浏览器地址栏输入:chls.pro/ssl 并访问,注意前面不要加 http://或https://。手机会下载证书,并弹框确认允许。

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_Mac_18

然后到手机的设置,点击已下载描述文件,一直到安装成功。

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_19

然后到手机的设置,通用,关于本机,拉到最后点击证书信任设置:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_20

  

到此为止,手机端的设置就完了。

D. 开始抓包并修改响应内容

打开Charles抓包:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_21

手机访问:https://www.charlesproxy.com/static/img/os_windows.5cd4e154.gif

手机显示结果如下:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_抓包_22

Charles上的抓包结果如下:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_https_23

http请求和响应的详细内容都能在Charles上观察到,证明设置成功,并成功抓取https的请求。

下面开始修改响应:

在PC上下载另外一个文件:https://www.charlesproxy.com/static/img/os_linux.5ce92361.gif ,保存到本地。

在Charles抓到的请求上右键,选Map Local,在弹出的框中的Local Path选则刚刚下载的文件,保存。

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_24

     

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_http_25

手机再次访问https://www.charlesproxy.com/static/img/os_windows.5cd4e154.gif,发现显示内容已经发生变化,证明内容已经篡改成功:

charles可以抓取聊天app时聊天的请求吗 charles怎么抓取https请求_safari_26

3. 总结

    本文只是以篡改图片为例,任何内容都可以篡改,包括json,包含微信小程序和任何APP显示的任何基于http协议的内容。

    另外,可以先在抓取的请求上先save response,再修改。

    本文的方法可用于调试程序,但是,条件比较苛刻,就是手机和PC必须在同一局域网内,电脑放在家中,人却在外面,不在同一局域网内怎么办呢?下篇再介绍。