現(xiàn)在的網(wǎng)站基本都是 https 的，而 charles 是常用的 http 抓包工具，所以用 charles 調(diào)試 https 請求是常見的需求。

今天就分享下如何用 charles 調(diào)試 https 請求，如何打斷點。

首先安裝 charles，點擊 start recording：

瀏覽器訪問一些頁面，這時候左側(cè)就會展示出抓到的 http/https 請求：

但是這時候抓到的是加密過后的內(nèi)容，這是 https 的機(jī)制導(dǎo)致的：

服務(wù)端會下發(fā)被 CA 認(rèn)證過的證書，里面包含了公鑰，而服務(wù)器自己保留私鑰，通過這種機(jī)制完成對稱密鑰的傳輸和身份的認(rèn)證，之后加密傳輸數(shù)據(jù)。

中間人拿到的數(shù)據(jù)自然都是被加密過的，也就是上圖的那些亂碼：

那抓包工具怎么能拿到明文的數(shù)據(jù)呢？

自己用服務(wù)端的證書和服務(wù)端對接不就行了？

也就是這樣：

Charles 自己用服務(wù)端的證書來和服務(wù)端通信，然后給瀏覽器一個自己的證書，這樣就能解密傳輸?shù)膬?nèi)容，拿到明文數(shù)據(jù)了。

點擊 Proxy 的 SSL Proxy Setting：

添加一條對 juejin 的 https 代理：

這是 juejin 之前的證書：

代理之后就換成了 Charles 的證書，但是會提示不安全：

這是因為系統(tǒng)有一個存放所有根證書的地方，要那里存在并且被信任的證書才是安全的。

點擊 help > SSL Proxying > Install Charles Root Certificate，安裝到系統(tǒng)的鑰匙串中：

改為始終信任：

這時候瀏覽器里就會標(biāo)記安全了：

并且在 charles 里就會看到明文的 http 請求和響應(yīng)內(nèi)容：

這個過程的原理就是這張圖：

現(xiàn)在能夠抓 https 包了，但是還不夠，現(xiàn)在只能看，很多情況下我們是希望能修改一下請求和響應(yīng)內(nèi)容的，這時候就要用斷點功能了：

右鍵請求，勾選 breakpoints：

然后開啟斷點：

刷新頁面你會發(fā)現(xiàn)它斷住了：

下面三個按鈕分別是取消、終止、執(zhí)行修改后的請求的意思。

上面可以改 url，添加 header，還可以改請求內(nèi)容和 cookie：

點擊 execute 之后就會發(fā)送請求。

之后響應(yīng)的時候還會斷住，這時候就可以用同樣的方式修改響應(yīng)了：

比如我把 title 修改了一下，點擊 execute 之后，看到的網(wǎng)頁就是修改過后的：

這樣我們就可以斷點調(diào)試 https 請求了。

為什么可以實現(xiàn)斷點功能呢？

這個很容易想明白，怎么請求、怎么響應(yīng)都是 Charles 控制的，那想實現(xiàn)一個斷點和編輯的功能，豈不是很容易么？

有的同學(xué)可能會問，移動端怎么調(diào)試呢？

其實是一樣的，只不過移動端也要把 Charles 證書安裝到自己的系統(tǒng)中，需要點擊安裝 charles 證書到移動設(shè)備：

他會提示你在手機(jī)設(shè)置代理服務(wù)器，然后下載 Charles 證書：

原理和我們在 PC 端下載 Charles 證書是一樣的，后續(xù)流程也一樣。

除此以外，chrome 還有一個瀏覽器插件可以更細(xì)粒度的控制代理，叫做 SwitchyOmega：

你可以配置若干個代理服務(wù)器，比如 charles 的代理服務(wù)器：

這個可以在 Charles 的 Proxy > Proxy Setting 里配置：

然后就可以配置什么 url 用什么代理，或者不用代理直接連接：

當(dāng)你有多個代理服務(wù)器，或者想控制有的頁面走代理有的不走的時候，就可以用這個插件來控制了。

總結(jié)

用 Charles 調(diào)試 https 請求是常見的需求，它需要安裝 Charles 的證書到本地系統(tǒng)，然后信任，之后就可以抓到明文數(shù)據(jù)了。

原理就是 Charles 會使用服務(wù)器的證書來和服務(wù)器通信，然后發(fā)一個自己的證書給瀏覽器。

Charles 還有斷點調(diào)試功能，可以修改請求和響應(yīng)的數(shù)據(jù)。

移動端 https 調(diào)試也是同樣的原理，只不過需要配置下代理和證書。

如果想切換代理服務(wù)器或者設(shè)置有的頁面不走代理，可以用 Chrome 插件 SwitchyOmega 來控制。

會斷點調(diào)試 https 請求還是很有意義的，比如改改 header、改改 body，看看會有啥效果，使用場景有很多。