使用 Charles 获取并修改响应信息

237 阅读2分钟

背景

当业务需要修改响应值并想得到客户端的即时反馈时,就可以使用 Charles 来实现。可以把 Charles 看作是一个运行在本地电脑上的代理服务器

原理(流程如下):

  • 【客--->服】客户端向服务器发起 HTTPS 请求
  • 【C 拦截并处理】Charles 拦截客户端的请求,伪装成客户端向服务器进行请求(对客户端的请求进行代理)。
  • 【C--->服 、服--->客】服务器收到请求后,会向 “客户端” 颁布服务器的 CA 证书!
  • 【C拦截并处理、C--->客】Charles 拦截服务器的 CA 证书,获取服务器证书公钥。然后自己制作一张证书,发布给客户端。
  • 【客--->服】客户端收到 Charles 的证书后,会生成一个对称密钥。用 Charles 给的公钥加密,发送给服务器。
  • 【C拦截并处理、C--->服】Charles 进行拦截,用自己的私钥解密对称密钥,然后用服务器证书公钥加密,发送给服务器。
  • 【服--->客】服务器用自己的私钥解密对称密钥,向客户端发送响应。
  • 【C拦截并处理、C--->客】Charles 拦截服务器的响应,替换成自己的证书发送给客户端。
  • 连接建立完毕!Charles 拿到了服务器证书的公钥和服客两端协商的对称密钥,之后就可以解密或者修改加密的报文了!

简单来说,就是Charles作为“中间人代理”,拿到了 服务器证书公钥HTTPS连接的对称密钥前提是客户端选择信任并安装Charles的CA证书 ,否则客户端就会“报警”并中止连接。这样看来,HTTPS还是很安全的协议。

实践

(1) 配置代理

使用相同的 Wi-Fi网络连接在电脑和手机上,可以让它们之间建立网络通信,这样就可以实现代理。

手机配置: Wi-Fi设置中配置代理。

  • 可以将代理服务器的 IP地址端口号 输入到 Wi-Fi 设置中的代理设置中,这样手机就可以将所有的网络通信交给代理服务器处理。
  • Charles 配置:

1.1 SSL 代理设置

image.png

1.2 SSL 代理设置

image.png

2. 配置私钥

image.png

3.安装证书

image.png

配置代理完成,可以实现拦截!!

(2) 拦截到后对响应进行修改 【Breakpoint功能

1. 启用并设置断点

image.png

image.png

image.png

用户在客户端再次访问互动页面,Charles 界面就会发生一些变化!!

2.断点开始工作【可以对response进行修改】

image.png

3. 保存响应

image.png image.png

4. Map Local 修改本地映射:

image.png

image.png

此时,再发起请求,会发现已经修改成功了!!