Charles 是在電腦上運行的 Web Proxy (HTTP Proxy / HTTP Monitor)，很多時候我們需要帶入參數、返回的 response、查看 request 的各種 header、協議、響應時間等等
Charles 通過將自己設置為系統的網絡訪問代理服務器，這樣所有的 request 都會通過它，從而實現截獲和分析。
Chareles 不僅可以分析電腦本機的網絡請求（HTTP和HTTPS），還可以分析手機端的 request

簡單定義的話，charles 就是一個抓包工具，但！什麼是抓包？

快速釐清

什麼是封包？

瀏覽器開啟 devtool，點擊 Network 後，會看一系列的資訊，那些資訊就是所謂的【封包】。
封包的內容不僅限於 API，連同 jpg/png/js/css/json 等等多種檔案，只要可以讓瀏覽器對該網站進行渲染完成的資訊，都是【封包】。

那所謂的【抓包】？

客戶端對伺服器端進行溝通資料傳遞時，過程中間多了一位程咬金，會取得任一封包後，可以攔截且自行修改任一參數值後，再回傳給 server 端，就可以偽造是 user 的操作
所以這種操作手法也很容易出現是駭客的操作手法之一。

當使用電腦端的瀏覽器時，按照上方圖片說明，是可以非常容易取得且查看封包的，並且可以直接進行測試或者程式相關撰寫。

但針對手機端時就會無法重現，因為手機端的瀏覽器是無法輕易打開 devtool

但這時候又需要取得手機 封包才能進行測試時，該怎麼辦？

簡單介紹

看完上方的介紹後，相信大家都了解了 charles 就是一個抓包的工具。

可以使用 WebProxy(HTTP Proxy / HTTP Monitor) ，透過代理伺服器(Proxy Server)機制，瀏覽器或其他有透過網路的應用程式，將透過設定 Charles 顯示或記錄所有的發送或接收的數據

Charles 主要的功能包括：

• 截取 Http 和 Https 網絡封包
• 支持重發網絡請求，方便後端調試
• 支持修改網絡請求參數
• 支持網絡請求的截獲並動態修改
• 支持模擬慢速網絡

WebProxy(HTTP Proxy / HTTP Monitor) 、Proxy Server 等專有名詞
若有不懂的請先自行 google 大致了解一下即可，此篇不細講

安裝

Charles 官方下載連結

安裝太簡單了，不多做說明，就依照自己電腦的系統自行下載並安裝即可。

快速設定教學

Step1. 基本的代理設定

【Windows Proxy】 通常預設都會自動打勾，表示會自動抓取電腦 web 上的封包。

(此文章主要以抓 app 封包為主，所以可以先將它取消打勾)

通常這欄位名稱會依照電腦系統不同而有所改變，但實際上效果都是一樣的

• windows→ Windows Proxy
• mac → Mac Proxy

【Proxy Settings…】就是在設定 代理伺服器(Proxy) 的部分，點擊開啟視窗後，將會看到以下畫面

【Port】 可以自行決定，只要與手機的網路的代理伺服器設定相同即可（通常使用預設 8888 就行了），稍後下面會細講到手機的 proxy 設定。

【Support HTTP/2】勾選表示支援 HTTP/2 協定。詳細可參考: Http/2 是什麼?、你的網站升級到 HTTP/2 了嗎？

【Enable transparent HTTP proxying】勾選則表示 charles 開啟代理的角色。

Step2. 設定 SSL，確保可以撈取 HTTPS 的封包

【SSL Proxy Settings】主要是設定 HTTPS 的封包可以進行撈取。

【Add】新增你要的 host 網域、port 號，若設定 * 則表示全部網址、port 號都可以。

【SSL Proxying】這部分主要是可以設定限制某網域、某 port 號指定抓包，則表示所有網站的封包都會抓以

【Enable SSL Proxying】設定要啟用 SSL Proxying，主要是可以針對 HTTPS 的封包進行撈取

若此部分未設定可能封包回傳的內容都會顯示亂碼，或是撈不到資料

Step3. 確認你當前的 IP

通常第一筆就會是你的 IP位置了

若仍然不太確定的話可以開啟你的 cmd(windows系統)/terminal(mac統)，輸入 ipconfig 也可以查詢到你的 ip 位置

這 IP 位置很重要，稍後手機設定時，就會需要使用到

Step4. 安裝電腦憑證

這部分需要安裝好 CA（憑證）才行
電腦需安裝（Install Charles Root Certificate）

• windwos 安裝步驟
  
  (若已正確安裝人，文字則會顯示上方原來的文字)

  

  

  

  看到此畫面表示已經安裝完成了~

• mac 安裝步驟
  

  

  

  看到此畫面表示已經安裝完成了~

Step5. 設定手機代理伺服器

先找到你目前連線的 Wifi，點擊【設定代理伺服器】，並點擊並開啟詳細的設定(如上圖)

切換成【手動】後

• IP 為上方先前的確認的
• port 號為一開始設定的 8888(實際情況依照自己的設定為主)

Step6. 安裝手機憑證

手機需安裝（Install Charles Root Certificate on a Mobile Device Remote Browser）

• 記住需讓電腦與手機使用【相同網路】

• 然後開啟在手機瀏覽器中輸入 chls.pro/ssl

• 就可以下載憑證，並且直接安裝

• 手機安裝步驟
  

  

  

  

最後還有非常重要的步驟！！！一定要記得！！！

點擊 設定 → 一般 → 關於本機 → (畫面拉到最下面)憑證信用設定 → 開啟 charles 憑證

可參考：https://juejin.cn/post/6967317908351352845

Step7. 確認 charles 是否可以正常運作

設定成功後，預期為像是以下這樣，封包內的資料都可以順利取得。

IOS 小地雷分享

• 先安裝好憑證(CA)至手機上，確認不要過期
• 務必人工開啟憑證授權，否則 HTTPS 系列的封包都會無法抓到
  • 設定 → 一般 → 關於本機 → 憑證信任設定 → 開啟 Charles Proxy CA(XX XXX XXX(安裝日期))
• 使用完 Charles 後，記得把手機 Wifi 的代理伺服器關掉，不然會出現連不到網路的情況
• 回傳結果出現亂碼：Charles抓包时request和respond都出现乱码
  

參考來源

• Charles on Windows + Android 查看https封包
  
• Day 013. 抓包軟體 - Charles Web Debugging Proxy
• Charles 抓包从入门到精通
  
• 十分钟学会Charles抓包(iOS的http/https请求)