用 Charles 断点调试 HTTPS 请求,原理揭秘

开发 前端
用 Charles 调试 https 请求是常见的需求,它需要安装 Charles 的证书到本地系统,然后信任,之后就可以抓到明文数据了。

现在的网站基本都是 https 的,而 charles 是常用的 http 抓包工具,所以用 charles 调试 https 请求是常见的需求。

今天就分享下如何用 charles 调试 https 请求,如何打断点。

首先安装 charles,点击 start recording:

图片

浏览器访问一些页面,这时候左侧就会展示出抓到的 http/https 请求:

图片

但是这时候抓到的是加密过后的内容,这是 https 的机制导致的:

图片

服务端会下发被 CA 认证过的证书,里面包含了公钥,而服务器自己保留私钥,通过这种机制完成对称密钥的传输和身份的认证,之后加密传输数据。

中间人拿到的数据自然都是被加密过的,也就是上图的那些乱码:

图片

那抓包工具怎么能拿到明文的数据呢?

自己用服务端的证书和服务端对接不就行了?

也就是这样:

图片

Charles 自己用服务端的证书来和服务端通信,然后给浏览器一个自己的证书,这样就能解密传输的内容,拿到明文数据了。

点击 Proxy 的 SSL Proxy Setting:

图片

添加一条对 juejin 的 https 代理:

图片

这是 juejin 之前的证书:

图片

代理之后就换成了 Charles 的证书,但是会提示不安全:

图片

图片

这是因为系统有一个存放所有根证书的地方,要那里存在并且被信任的证书才是安全的。

点击 help > SSL Proxying > Install Charles Root Certificate,安装到系统的钥匙串中:

图片

改为始终信任:

图片

这时候浏览器里就会标记安全了:

图片

并且在 charles 里就会看到明文的 http 请求和响应内容:

图片

这个过程的原理就是这张图:

图片

现在能够抓 https 包了,但是还不够,现在只能看,很多情况下我们是希望能修改一下请求和响应内容的,这时候就要用断点功能了:

右键请求,勾选 breakpoints:

图片

然后开启断点:

图片

刷新页面你会发现它断住了:

图片

下面三个按钮分别是取消、终止、执行修改后的请求的意思。

上面可以改 url,添加 header,还可以改请求内容和 cookie:

图片

点击 execute 之后就会发送请求。

之后响应的时候还会断住,这时候就可以用同样的方式修改响应了:

图片

比如我把 title 修改了一下,点击 execute 之后,看到的网页就是修改过后的:

图片

这样我们就可以断点调试 https 请求了。

为什么可以实现断点功能呢?

这个很容易想明白,怎么请求、怎么响应都是 Charles 控制的,那想实现一个断点和编辑的功能,岂不是很容易么?

有的同学可能会问,移动端怎么调试呢?

其实是一样的,只不过移动端也要把 Charles 证书安装到自己的系统中,需要点击安装 charles 证书到移动设备:

图片

他会提示你在手机设置代理服务器,然后下载 Charles 证书:

图片

原理和我们在 PC 端下载 Charles 证书是一样的,后续流程也一样。

除此以外,chrome 还有一个浏览器插件可以更细粒度的控制代理,叫做 SwitchyOmega:

图片

你可以配置若干个代理服务器,比如 charles 的代理服务器:

图片

这个可以在 Charles 的 Proxy > Proxy Setting 里配置:

图片

然后就可以配置什么 url 用什么代理,或者不用代理直接连接:

图片

当你有多个代理服务器,或者想控制有的页面走代理有的不走的时候,就可以用这个插件来控制了。

总结

用 Charles 调试 https 请求是常见的需求,它需要安装 Charles 的证书到本地系统,然后信任,之后就可以抓到明文数据了。

原理就是 Charles 会使用服务器的证书来和服务器通信,然后发一个自己的证书给浏览器。

Charles 还有断点调试功能,可以修改请求和响应的数据。

移动端 https 调试也是同样的原理,只不过需要配置下代理和证书。

如果想切换代理服务器或者设置有的页面不走代理,可以用 Chrome 插件 SwitchyOmega 来控制。

会断点调试 https 请求还是很有意义的,比如改改 header、改改 body,看看会有啥效果,使用场景有很多。

责任编辑:武晓燕 来源: 神光的编程秘籍
相关推荐

2022-03-22 09:16:24

HTTPS数据安全网络协议

2019-04-18 09:31:07

iOS项目开发断点代码

2021-08-26 05:04:53

JavaScript调试技巧

2017-04-19 10:25:01

JS断点调试

2009-07-14 11:34:42

MyEclipse断点JavaScript

2014-06-13 11:22:18

Https

2022-10-21 13:52:56

JS 报错调试本地源码

2014-08-06 11:59:16

Xcode变量summary

2021-05-13 23:30:17

JavaScript 原理揭秘

2010-07-23 15:37:22

Perl调试器用法

2022-01-06 10:23:49

HTTPS协议数据

2017-04-21 16:00:09

2019-11-15 15:12:19

Windows激活KMS

2019-08-20 14:01:22

HTTPSSSL协议

2009-09-27 08:57:29

Visual Stud

2019-12-20 13:56:04

HTTPSTCP加密

2017-04-18 21:54:27

iOSWireShark网络请求

2021-05-08 11:50:59

网络安全API函数代码

2010-09-17 15:25:03

JAVAJVM

2021-12-12 21:01:12

CSS 技巧PurgeCss
点赞
收藏

51CTO技术栈公众号