现在的网站基本都是 https 的,而 charles 是常用的 http 抓包工具,所以用 charles 调试 https 请求是常见的需求。
今天就分享下如何用 charles 调试 https 请求,如何打断点。
首先安装 charles,点击 start recording:
![](https://i-blog.csdnimg.cn/blog_migrate/9694af117404c9f895aacafa84be5713.png)
浏览器访问一些页面,这时候左侧就会展示出抓到的 http/https 请求:
![](https://i-blog.csdnimg.cn/blog_migrate/f6f9f9905b5392b4074fe46384cc6a07.png)
但是这时候抓到的是加密过后的内容,这是 https 的机制导致的:
![](https://i-blog.csdnimg.cn/blog_migrate/2ac9a187ad072837dfc50f54b6026c69.png)
服务端会下发被 CA 认证过的证书,里面包含了公钥,而服务器自己保留私钥,通过这种机制完成对称密钥的传输和身份的认证,之后加密传输数据。
中间人拿到的数据自然都是被加密过的,也就是上图的那些乱码:
![](https://i-blog.csdnimg.cn/blog_migrate/5d531e6e656fea3c19880863fc32d2fb.png)
那抓包工具怎么能拿到明文的数据呢?
自己用服务端的证书和服务端对接不就行了?
也就是这样:
![](https://i-blog.csdnimg.cn/blog_migrate/5aa51052310986561fa5f09f8fc85e02.jpeg)
Charles 自己用服务端的证书来和服务端通信,然后给浏览器一个自己的证书,这样就能解密传输的内容,拿到明文数据了。
点击 Proxy 的 SSL Proxy Setting:
![](https://i-blog.csdnimg.cn/blog_migrate/3a7790b7ada7296c1c465e256b641e39.png)
添加一条对 juejin 的 https 代理:
![](https://i-blog.csdnimg.cn/blog_migrate/928f57af25fdf1a71ce89ff8186b3421.png)
这是 juejin 之前的证书:
![](https://i-blog.csdnimg.cn/blog_migrate/73b13f06b0f11a7a476312a3c5343716.jpeg)
代理之后就换成了 Charles 的证书,但是会提示不安全:
![](https://i-blog.csdnimg.cn/blog_migrate/3e43875ac6c7534efd9b0d98dc9526fc.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/caa935dc4e9fc457841733534ffd861c.jpeg)
这是因为系统有一个存放所有根证书的地方,要那里存在并且被信任的证书才是安全的。
点击 help > SSL Proxying > Install Charles Root Certificate,安装到系统的钥匙串中:
![](https://i-blog.csdnimg.cn/blog_migrate/48feb5d508131d0a63de279b0621e9b5.jpeg)
改为始终信任:
![](https://i-blog.csdnimg.cn/blog_migrate/962ceade949a105e3f42d4f3a701be7f.jpeg)
这时候浏览器里就会标记安全了:
![](https://i-blog.csdnimg.cn/blog_migrate/18db232464d069022f26ae7de8580ee5.jpeg)
并且在 charles 里就会看到明文的 http 请求和响应内容:
![](https://i-blog.csdnimg.cn/blog_migrate/72b874a45b4eed04192860a17a4f5b5c.png)
这个过程的原理就是这张图:
![](https://i-blog.csdnimg.cn/blog_migrate/c0be50bcc118c2d209a94e2dde1fa290.png)
现在能够抓 https 包了,但是还不够,现在只能看,很多情况下我们是希望能修改一下请求和响应内容的,这时候就要用断点功能了:
右键请求,勾选 breakpoints:
![](https://i-blog.csdnimg.cn/blog_migrate/45f3f30b53a174d27180c9141f0462df.png)
然后开启断点:
![](https://i-blog.csdnimg.cn/blog_migrate/aafa43066cc9e10162899f7746d5ddde.png)
刷新页面你会发现它断住了:
![](https://i-blog.csdnimg.cn/blog_migrate/55d3f8835958f651e11a74d6fa6f5679.png)
下面三个按钮分别是取消、终止、执行修改后的请求的意思。
上面可以改 url,添加 header,还可以改请求内容和 cookie:
![](https://i-blog.csdnimg.cn/blog_migrate/a2f1b0fbf0f74496b3dd2515fca77c98.png)
点击 execute 之后就会发送请求。
之后响应的时候还会断住,这时候就可以用同样的方式修改响应了:
![](https://i-blog.csdnimg.cn/blog_migrate/3595a3af3c7287ab2521cd82742cc691.png)
比如我把 title 修改了一下,点击 execute 之后,看到的网页就是修改过后的:
![](https://i-blog.csdnimg.cn/blog_migrate/f9f56f4c9fca8f0557d213d18b0ff322.png)
这样我们就可以断点调试 https 请求了。
为什么可以实现断点功能呢?
这个很容易想明白,怎么请求、怎么响应都是 Charles 控制的,那想实现一个断点和编辑的功能,岂不是很容易么?
有的同学可能会问,移动端怎么调试呢?
其实是一样的,只不过移动端也要把 Charles 证书安装到自己的系统中,需要点击安装 charles 证书到移动设备:
![](https://i-blog.csdnimg.cn/blog_migrate/0b125d56f729bbfc6d70a32636a2c0c9.png)
他会提示你在手机设置代理服务器,然后下载 Charles 证书:
![](https://i-blog.csdnimg.cn/blog_migrate/2e5977dc2bbcfa1758b6def60f619a9d.png)
原理和我们在 PC 端下载 Charles 证书是一样的,后续流程也一样。
除此以外,chrome 还有一个浏览器插件可以更细粒度的控制代理,叫做 SwitchyOmega:
![](https://i-blog.csdnimg.cn/blog_migrate/526f23dfe51f093ed6a77d520e57c5c4.png)
你可以配置若干个代理服务器,比如 charles 的代理服务器:
![](https://i-blog.csdnimg.cn/blog_migrate/93eef759c98c74121f4d9f12708be87c.png)
这个可以在 Charles 的 Proxy > Proxy Setting 里配置:
![](https://i-blog.csdnimg.cn/blog_migrate/4160d5f56b1d68d4c1d3a135e047af0a.png)
然后就可以配置什么 url 用什么代理,或者不用代理直接连接:
![](https://i-blog.csdnimg.cn/blog_migrate/1dd121e05dd040839578ae44d3992425.png)
当你有多个代理服务器,或者想控制有的页面走代理有的不走的时候,就可以用这个插件来控制了。
总结
用 Charles 调试 https 请求是常见的需求,它需要安装 Charles 的证书到本地系统,然后信任,之后就可以抓到明文数据了。
原理就是 Charles 会使用服务器的证书来和服务器通信,然后发一个自己的证书给浏览器。
Charles 还有断点调试功能,可以修改请求和响应的数据。
移动端 https 调试也是同样的原理,只不过需要配置下代理和证书。
如果想切换代理服务器或者设置有的页面不走代理,可以用 Chrome 插件 SwitchyOmega 来控制。
会断点调试 https 请求还是很有意义的,比如改改 header、改改 body,看看会有啥效果,使用场景有很多。
最后
整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴,可以点击下方卡片领取,无偿分享