用 Charles 斷點調試 HTTPS 請求，原理揭祕

現在的網站基本都是 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，看看會有啥效果，使用場景有很多。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/N8DvSASv852vzKRtyIFNyg