Charles Proxy — คืออะไร การตั้งค่าและการดักจับ traffic HTTPS

Charles Proxy คืออะไร?

Charles Proxy เป็น proxy HTTP และมอนิเตอร์ HTTP ที่ทำหน้าที่เป็นตัวกลางระหว่างไคลเอ็นต์และเซิร์ฟเวอร์ คำขอและการตอบสนองทั้งหมดผ่าน Charles ทำให้คุณสามารถดูเนื้อหา วิเคราะห์โครงสร้าง แก้ไขข้อมูลแบบเรียลไทม์ และจำลองสภาวะเครือข่ายต่างๆ ได้ มีให้ใช้งานสำหรับ Windows, macOS และ Linux

ประวัติและตำแหน่งทางการตลาด

Charles Proxy ถูกสร้างขึ้นในปี 2004 โดย Karl von Randow และยังคงเป็นหนึ่งในเครื่องมือยอดนิยมที่สุดสำหรับการดีบัก traffic เครือข่าย ซึ่งแตกต่างจากทางเลือกฟรี Charles เสนอใบอนุญาตแบบเสียเงินพร้อมระยะเวลาทดลองใช้ 30 วัน เครื่องมือนี้ถูกวางตำแหน่งเป็นโซลูชันระดับมืออาชีพสำหรับนักพัฒนาแอปมือถือ นักพัฒนาเว็บ และวิศวกร QA ที่ต้องการการควบคุมการสื่อสาร HTTP อย่างสมบูรณ์

ความเข้ากันได้ของแพลตฟอร์ม

Charles ทำงานเป็น system proxy บนคอมพิวเตอร์และสามารถดักจับ traffic จากอุปกรณ์ใดๆ ในเครือข่ายเดียวกัน: Android, iOS, ซิวมูเลเตอร์, อีมูเลเตอร์, เว็บเบราว์เซอร์ และอุปกรณ์ IoT ในการดักจับ HTTPS คุณต้องติดตั้งใบรับรองรากของ Charles บนแต่ละอุปกรณ์ traffic รองรับบน HTTP/1.1 และ HTTP/2 (บางส่วน) HTTP/3 (QUIC) ไม่รองรับในระดับการดักจับ

Charles Proxy ทำงานอย่างไร

Charles ทำงานบนหลักการของ proxy MITM (Man-in-the-Middle): เมื่อไคลเอ็นต์ส่งคำขอผ่าน Charles เครื่องมือจะดักจับคำขอ ส่งต่อไปยังเซิร์ฟเวอร์เป้าหมาย รับการตอบสนอง และส่งกลับไปยังไคลเอ็นต์ traffic ทั้งหมดผ่าน Charles ทำให้สามารถวิเคราะห์และแก้ไขได้

สถาปัตยกรรมของ proxy

เมื่อเริ่มทำงาน Charles จะสร้าง local HTTP proxy บนพอร์ต 8888 (ค่าเริ่มต้น) ระบบปฏิบัติการหรือแอปพลิเคชันถูกกำหนดค่าให้ใช้ proxy นี้ คำขอ HTTP ทั้งหมดจะถูกส่งไปยัง Charles ก่อน ซึ่งจะทำหน้าที่เป็นไคลเอ็นต์เต็มรูปแบบไปยังเซิร์ฟเวอร์เป้าหมาย สำหรับ HTTPS Charles ใช้เทคนิค SSL proxy ของตัวเอง: มันสร้างใบรับรองทันทีสำหรับแต่ละโดเมนซึ่งลงนามโดยใบรับรองรากของ Charles หากใบรับรองรากถูกติดตั้งบนอุปกรณ์เป็นที่เชื่อถือได้ Charles สามารถถอดรหัสและดู traffic HTTPS ได้

โหมดการทำงาน

Charles รองรับสองโหมด: Proxy(เซิร์ฟเวอร์ proxy แบบคลาสสิก) และ SOCKS Proxy(สำหรับ traffic UDP และ TCP) สำหรับการพัฒนาเว็บ ใช้ HTTP-proxy มาตรฐาน สำหรับอุปกรณ์มือถือ — กำหนดค่า WiFi Proxy บนอุปกรณ์โดยระบุที่อยู่ IP ของคอมพิวเตอร์ที่เรียกใช้ Charles macOS รองรับการกำหนดค่า proxy อัตโนมัติสำหรับซิวมูเลเตอร์ iOS

<!-- การกำหนดค่า network_security_config.xml สำหรับ Android ที่รองรับ Charles -->
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <debug-overrides>
        <trust-anchors>
            <!-- เชื่อถือใบรับรอง Charles ในบิวด์ Debug -->
            <certificates src="user" />
        </trust-anchors>
    </debug-overrides>
</network-security-config>

คุณสมบัติหลักของ Charles Proxy

Charles Proxy มี ชุดเครื่องมือระดับมืออาชีพ สำหรับการวิเคราะห์และแก้ไข traffic ที่เหนือกว่าการดักจับคำขอแบบธรรมดามาก

Rewrite และ Breakpoints

เครื่องมือ Rewrite ช่วยให้คุณสามารถเปลี่ยนบางส่วนของคำขอหรือการตอบสนองโดยอัตโนมัติ: ส่วนหัว, พารามิเตอร์ URL, เนื้อหาการตอบสนอง ตัวอย่างเช่น คุณสามารถแทนที่ส่วนหัว User-Agent ด้วยค่าจากอุปกรณ์อื่นหรือลบคุกกี้บางตัว Breakpoints ทำงานเหมือนดีบักเกอร์: คำขอจะหยุดที่ขั้นตอนที่เลือก (ก่อนส่งหรือก่อนรับ) และนักพัฒนาสามารถเปลี่ยนเนื้อหาด้วยตนเองก่อนที่จะดำเนินการต่อ ซึ่งมีประโยชน์สำหรับการทดสอบการจัดการการตอบสนองข้อผิดพลาดหรือสถานะที่ไม่ได้มาตรฐาน

Map Local และ Map Remote

Map Local ช่วยให้คุณสามารถแทนที่ทรัพยากรเครือข่าย (CSS, JS, JSON) ด้วยไฟล์ในเครื่องจากดิสก์ ซึ่งขาดไม่ได้ในการพัฒนา frontend: คุณสามารถแก้ไข CSS/JS และเห็นผลลัพธ์ทันทีโดยไม่ต้องปรับใช้บนเซิร์ฟเวอร์ Map Remote เปลี่ยนเส้นทางคำขอจาก URL หนึ่งไปยังอีก URL หนึ่ง — ตัวอย่างเช่น จากเซิร์ฟเวอร์โปรดักชันไปยัง staging สำหรับการทดสอบ เครื่องมือทั้งสองทำงานกับรูปแบบ URL ที่รองรับไวด์การ์ด

Throttle และการจำลองสภาวะเครือข่าย

เครื่องมือ Throttle ช่วยให้คุณสามารถจำลองการเชื่อมต่อเครือข่ายประเภทต่างๆ โดยใช้โปรไฟล์ที่ตั้งไว้ล่วงหน้า: 3G, EDGE, GPRS, DSL, WiFi คุณสามารถกำหนดค่าขีดจำกัดความเร็ว (ดาวน์โหลด/อัปโหลด), ความหน่วง, การสูญเสียแพ็กเก็ต และความเสถียร ซึ่งสำคัญอย่างยิ่งสำหรับการทดสอบพฤติกรรมของแอปในการเชื่อมต่อที่ช้าหรือไม่เสถียร — การจัดการ timeout ที่ถูกต้อง, ตรรกะการลองใหม่, โหมดออฟไลน์

Auto Save และ Recording

Charles สามารถ บันทึกเซสชัน traffic โดยอัตโนมัติ ลงในไฟล์ .chls ทำให้คุณสามารถวิเคราะห์ในภายหลังหรือแชร์กับเพื่อนร่วมงานได้ Recording Control ช่วยให้คุณกำหนดค่าได้อย่างยืดหยุ่นว่า traffic ใดที่จะบันทึก: ตามโดเมน, ประเภทเนื้อหา หรือรหัสสถานะ สะดวกสำหรับการตรวจสอบ API ในระยะยาว

การตั้งค่า Charles Proxy สำหรับอุปกรณ์มือถือ

สำหรับการดีบัก traffic ของแอปมือถือ Charles จะถูกกำหนดค่าเป็น WiFi Proxy: อุปกรณ์ทั้งหมดในเครือข่ายเดียวกับคอมพิวเตอร์สามารถกำหนดเส้นทาง traffic ผ่าน Charles ได้ การกำหนดค่า HTTPS ที่ถูกต้องต้องติดตั้งใบรับรอง Charles บนอุปกรณ์มือถือ

การตั้งค่าบน Android

สำหรับ Android: เปิด Settings → WiFi → Advanced → Proxy, เลือก Manual และป้อนที่อยู่ IP ของคอมพิวเตอร์พร้อมพอร์ต 8888 จากนั้นเปิดเบราว์เซอร์บนอุปกรณ์และไปที่ http://chls.pro/ssl เพื่อดาวน์โหลดใบรับรอง Charles บน Android 7+ (API 24+) จำเป็นต้องใช้ network_security_config.xml เพื่อเชื่อถือใบรับรองผู้ใช้ในบิวด์ Debug — มิฉะนั้นแอปอาจไม่กำหนดเส้นทาง traffic ผ่าน Charles

การตั้งค่าบน iOS

สำหรับ iOS: Settings → WiFi → กำหนดค่า proxy ด้วย IP และพอร์ต 8888 จากนั้น Safari → http://chls.pro/ssl → ติดตั้งโปรไฟล์ใบรับรอง บน iOS 10.3+ คุณต้องเปิดใช้งานความเชื่อถือใบรับรองเพิ่มเติม: Settings → General → About → Certificate Trust Settings → เปิด Charles Proxy iOS เข้มงวดกว่าเกี่ยวกับใบรับรอง: แอปบางตัวอาจใช้ SSL Pinning ปิดกั้น traffic ผ่าน Charles แม้จะมีใบรับรองที่เชื่อถือได้

การแก้ปัญหา SSL Pinning

หากแอปใช้ SSL Pinning(การยึดใบรับรองเซิร์ฟเวอร์) proxy มาตรฐานผ่าน Charles จะไม่ทำงาน — แอปจะปฏิเสธใบรับรอง Charles วิธีแก้ไข: ปิดการใช้งาน SSL Pinning ในบิวด์ Debug ผ่านการตั้งค่า OkHttp หรือ URLSession, ใช้ Frida เพื่อบายพาส pinning ในรันไทม์, หรือใช้ Android Emulator ที่มีสิทธิ์ root

กรณีการใช้งานจริงของ Charles Proxy

Charles Proxy แก้ งานพัฒนาและทดสอบเฉพาะ มาดูสถานการณ์ที่พบบ่อยที่สุดที่เครื่องมือนี้ขาดไม่ได้

การดีบักการรวม API

สถานการณ์ที่พบบ่อยที่สุด — ตรวจสอบความถูกต้องของคำขอ API Charles แสดง URL คำขอที่แน่นอน, ส่วนหัว, เนื้อหาและพารามิเตอร์ หากเซิร์ฟเวอร์ส่งคืนการตอบสนองที่ไม่คาดคิด คุณจะเห็นทันที: โครงสร้าง JSON, รหัสข้อผิดพลาด, ส่วนหัวการตอบสนอง ซึ่งช่วยให้แยกแยะข้อผิดพลาดฝั่งไคลเอ็นต์จากข้อผิดพลาดฝั่งเซิร์ฟเวอร์โดยไม่ต้องมีบันทึกจากทั้งสองฝ่าย

การทดสอบกับการเชื่อมต่อที่ช้า

การใช้โปรไฟล์ Throttle คุณสามารถทดสอบว่าแอปทำงานอย่างไรกับ ความเร็วการเชื่อมต่อต่ำ: มีการแสดงตัวบ่งชี้การโหลดหรือไม่, timeout ถูกจัดการอย่างถูกต้องหรือไม่, UI ค้างเมื่อสูญเสียการเชื่อมต่อหรือไม่ การทดสอบแคชมีความสำคัญเป็นพิเศษ — หากข้อมูลถูกโหลดแล้ว แอปควรแสดงจากแคชแทนที่จะเข้าสู่สถานะการโหลดไม่สิ้นสุด

การแก้ไขการตอบสนองของเซิร์ฟเวอร์

การใช้ Breakpoints คุณสามารถ แก้ไขการตอบสนองของเซิร์ฟเวอร์ ก่อนที่จะส่งไปยังแอป ตัวอย่างเช่น ส่งคืนอาร์เรย์ว่างแทนข้อมูล, เปลี่ยนรหัสสถานะเป็น 500, เพิ่มฟิลด์ใหม่ใน JSON ซึ่งช่วยให้ทดสอบการจัดการกรณีขอบโดยไม่ต้องแก้ไขโค้ดเซิร์ฟเวอร์ — หนึ่งในการใช้งานที่ทรงพลังที่สุดของ Charles ในการพัฒนามือถือ