Chào mừng bạn đến với Fx Studio. Hôm nay, chúng ta sẽ cùng nhau tìm hiểu về một seri mới. Đó là Testing và bài viết đầu tiên này sẽ giới thiệu công cụ Charles Proxy huyền thoại.

Nếu mọi việc đã ổn rồi, thì …

Bắt đầu thôi!

Đôi lời tản mạn

Nếu bạn là một iOS Developer, chắc hẳn bạn đã từng gặp tình huống mà ứng dụng của mình hoạt động tốt trên môi trường phát triển nhưng lại gặp sự cố khi được triển khai thực tế. Một ví dụ phổ biến là khi bạn gọi API từ một server, dữ liệu trả về không như mong đợi hoặc thậm chí không có phản hồi nào cả … Bạn đã kiểm tra mã nguồn, nhưng vẫn không thể tìm ra nguyên nhân khiến ứng dụng của mình không hoạt động đúng cách. Bài viết này nhằm giới thiệu cho bạn một công cụ mạnh mẽ có thể giải quyết những tình huống khó khăn như vậy – là Charles Proxy – Web Debugging Proxy Application.

Công cụ này cho phép bạn chặn và xem xét tất cả các yêu cầu và phản hồi giữa ứng dụng của bạn và server, giúp bạn dễ dàng xác định xem API có trả về dữ liệu chính xác không. Ngoài ra, bạn có thể sử dụng nó để mô phỏng các điều kiện mạng khác nhau, chẳng hạn như mạng chậm hoặc mất kết nối, để kiểm tra khả năng chịu lỗi của ứng dụng.

Chào mọi người. Vì đây là bài viết đầu tiên nên mình xin tự giới thiệu bản thân một chút.

Mình là Võ Trần Anh Khoa. Với may mắn được tổ nghiệp iOS và các anh chị em đồng nghiệp cưu mang, hiện tại mình đã có gần 6 năm kinh nghiệm với vị trí iOS Developer.

Giới thiệu về Charles Proxy

Charles Proxy là gì?

Về mặt lí thuyết thì:

Charles Proxy là một công cụ giúp lập trình viên theo dõi và kiểm tra lưu lượng dữ liệu từ các ứng dụng hoặc trình duyệt gửi đến máy chủ. Điều này bao gồm thông tin của các requests, responses và các HTTP headers (bao gồm cookie và thông tin bộ nhớ đệm).

Lợi ích khi sử dụng Charles Proxy?

• Tối ưu hóa việc kiểm thử API:
  • Giúp bạn dễ dàng theo dõi, kiểm tra và chỉnh sửa các requests cũng như các responses API để phát hiện lỗi.
  • Cải thiện hiệu suất mà không cần thay đổi mã nguồn của ứng dụng.
• Mô phỏng điều kiện mạng chậm:
  • Tính năng throttle cho phép mô phỏng các điều kiện mạng khác nhau (như mạng chậm, mạng yếu …).
  • Giúp bạn kiểm tra ứng dụng hoạt động trong các môi trường thực tế và tối ưu hóa trải nghiệm người dùng.
• Hỗ trợ nhiều nền tảng:
  • Hoạt động trên cả máy tính và thiết bị di động (Android, iOS).
  • Giúp kiểm tra ứng dụng web và ứng dụng di động một cách dễ dàng.
• Giao diện thân thiện, dễ sử dụng:
  • Có giao diện trực quan, dễ thao tác kể cả với người mới.

Cách cài đặt

Bước 1: Truy cập vào đường link charlesproxy.com và tiến hành tải file cài đặt về máy tính

Version 4.6.7 là mới nhất tính đến thời điểm viết bài (17/09/2024).

Chọn bản cài đặt tương thích với OS của máy tính đang sử dụng (trong bài viết đang chọn bản cài đặt với macOS).

Bước 2: Tiến hành mở file đã tải về và làm theo hướng dẫn cài đặt.

Kéo Charles Proxy vào thư mục Applications.

Act cool ! Đứng hình mất 5s (Chờ một chút trong khi quá trình copy vào thư mục Applications diễn ra).

Bước 3: Tiến hành mở Charles Proxy.

Tiếp tục đứng hình mất 10s (Với phiên bản dùng thử Trial thì mỗi lần mở sẽ phải đợi 10s).

Giao diện lần đầu khi Charles Proxy được mở.

Bản dùng thử Trial cho phép sử dụng trong 30 ngày. Trong trường hợp muốn mua license thì đi đến mục: Help > Purchase License… để mua nhé.

Sau khi mua xong thì đi đến mục: Help > Register Charles… > điền Register Name và License Key để đăng ký rồi restart lại Charles Proxy.

Đăng kí thành công rồi, quẩy thôi!

Thông báo phiền phức xuất hiện => Hãy mua license nhé.

Cách cấu hình

Phần cấu hình Charles Proxy là phần vô cùng quan trọng. Bạn phải thực hiện cấu hình đúng và đầy đủ nếu muốn làm việc được với nó.

Dưới đây là mục hướng dẫn các bước phần nào đó có thể giúp bạn kiểm tra liệu mình đã cấu hình đúng chưa.

Cấu hình Proxy

Khái niệm Proxy

Proxy là một máy chủ trung gian giữa người dùng và máy chủ đích (server). Khi bạn gửi yêu cầu (request) từ thiết bị của mình đến một trang web hoặc dịch vụ nào đó, yêu cầu của bạn sẽ được gửi đến proxy trước, sau đó proxy sẽ chuyển tiếp đến máy chủ đích (server) và trả kết quả về cho bạn.

Khi sử dụng Charles Proxy trên máy tính Mac, bạn cần cấu hình cho nó sử dụng macOS Proxy.

Bật macOS Proxy cho Charles Proxy

Lần đầu sử dụng bạn sẽ được tự động hỏi về việc cấp quyền macOS Proxy như sau. Chọn Grant Privileges.

Nhập username và password của tài khoản đang sử dụng trên máy tính. Sau đó chọn Install Helper.

Nếu bật macOS Proxy thành công, dấu tick sẽ xuất hiện bên cạnh mục Proxy > macOS Proxy.

Trong trường hợp chọn nhầm Not Yet thay vì Grant Privileges ở bước trên (hình ảnh bên dưới sẽ được hiển thị) thì đừng vội lo lắng nhé! Đi đến mục: Proxy > macOS Proxy thì thông báo với nút Grant Privileges sẽ được hiển thị lại để bạn chọn.

Cấu hình proxy cho iOS Simulators

iOS Simulators đã sử dụng System Proxy nên không cần phải cấu hình proxy cho nó nữa. Nếu iOS Simulators gặp trục trặc, hãy khởi động lại iOS Simulators.

Cấu hình proxy cho iOS Devices

Khi bạn chọn debug ứng dụng của bạn trên iOS Devices cùng với Charles Proxy, bạn cần phải trỏ HTTP Proxy của iOS Devices đến máy tính mà bạn đang sử dụng.

Lưu ý: Máy tính (đang cài đặt Charles Proxy) và thiết bị iOS (iOS Devices mà bạn muốn debug) phải sử dụng cùng Wifi.

Cách cấu hình lần lượt theo các bước như sau:

Trên iOS Devices đi đến mục: Settings > Wi-Fi.

Mục Network đang kết nối chọn vào vùng được khoanh đỏ như hình ảnh bên dưới.

Kéo đến phần dưới cùng chọn mục Configure Proxy (được khoanh đỏ như hình ảnh bên dưới).

Mục Configure Proxy ở Menu trên chọn mục Manual. Ở Menu dưới điền vào form, trong đó:

• Server: Địa chỉ IP của máy tính đang chạy Charles Proxy => Sẽ được hướng dẫn tìm thông tin này ở bước tiếp theo.
• Port: Cổng mà Charles Proxy chạy (thường là 8888).
• Authentication: Tắt.

Để biết thông tin địa chỉ IP của máy tính đang chạy Charles Proxy. Đi đến mục: Help > Local IP Address.

Bảng hiển thị Local IP Addresses được hiện ra. Hãy copy địa chỉ IP được khoanh đỏ như hình ảnh bên dưới (ví dụ ở đây là 172.18.28.58) và nhập vào ở bước điền form Mục Configure Proxy.

Quay lại mục Configure Proxy trên iOS Devices phần menu dưới điền các thông tin được khoanh đỏ như hình ảnh bên dưới:

• Server: 172.18.28.58 (cách lấy thông số này đã giới thiệu ở trên).
• Port: 8888.
• Authentication: Off.

Nhập xong chọn Save.

Thông báo từ Charles Proxy khi nhận thấy có iOS Devices muốn kết nối đến. Chọn Allow.

Lỗi SSL Proxying not enabled for this host

Trên giao diện của Charles Proxy thì bạn đã thấy được các request từ iOS Devices (dùng trình duyệt trên iOS Devices mở 1 trang web gì đó bất kì) được hiển thị nhưng đính kèm lỗi SSL Proxying not enabled for this host. Enable in the Proxy Menu, SSL Proxying Settings (được khoanh đỏ như hình ảnh bên dưới).

Bước tiếp theo trong phần cấu hình Charles Proxy sẽ giúp bạn giải quyết vấn đề đó.

Cấu hình SSL Proxying Certificates

Thêm Charles Proxy CA Certificate cho máy tính Mac

Đi đến mục: Help > SSL Proxying > Install Charles Root Certificates.

Nhập password của tài khoản đang sử dụng trên máy tính. Sau đó chọn OK => Charles Proxy CA Certificate đã được thêm vào máy tính Mac thông qua Keychain Access.

Truy cập Keychain Access trên máy tính Mac, nhập Charles Proxy CA ở thanh tìm kiếm để nhanh chóng tìm ra Charles Proxy CA Certificate với thông báo This root certificate is not trusted (được khoanh đỏ như hình ảnh bên dưới).

Chọn mục Charles Proxy CA … ( …. ở đây là thời gian cài đặt Charles Proxy CA và tên của máy tính Mac) thì một bảng nội dung sẽ được hiển thị ra. Tiếp tục chọn mục When using this certificate: Use System Defaults trong bảng nội dung đó (được khoanh đỏ như hình ảnh bên dưới).

Chọn Always Trust.

Nhập password của tài khoản đang sử dụng trên máy tính. Sau đó chọn Update Settings.

Mục Charles Proxy CA … ( …. ở đây là thời gian cài đặt Charles Proxy CA và tên của máy tính Mac) đã được hiển thị với thông báo “This certificate is marked as trusted for this account” (được khoanh đỏ như hình ảnh bên dưới).

Hoàn thành nội dung Thêm Charles Proxy CA Certificate cho máy tính Mac.

Bật SSL Proxy cho máy tính Mac và cài đặt SSL cho các host name

Charles có thể được sử dụng như một proxy HTTPS trung gian, cho phép bạn xem dữ liệu giao tiếp giữa trình duyệt web và máy chủ SSL.
Thay vì trình duyệt trực tiếp đọc chứng chỉ của máy chủ, Charles sẽ tạo một chứng chỉ mới cho máy chủ đó, được xác thực bằng chứng chỉ gốc của Charles (Charles CA Certificate). Trình duyệt của bạn sẽ nhận chứng chỉ từ Charles, trong khi Charles nhận chứng chỉ từ máy chủ.

Vì vậy, bạn có thể thấy cảnh báo bảo mật về việc “the root authority is not trusted”. Để tránh cảnh báo này, bạn cần thêm Charles CA Certificate vào danh sách chứng chỉ đáng tin cậy.

Đi đến mục: Proxy > SSL Proxying Settings…

• Chọn mục SSL Proxying ở menu trên.
• Sau đó tích chọn vào Enable SSL Proxying (nếu chưa).
• Sau đó chọn Add (tất cả được khoanh đỏ như hình ảnh bên dưới).

Mục Edit Location được hiển thị. Tiến hành nhập các giá trị cho 2 trường Host và Port và chọn OK.

• Nếu bạn mong muốn bật SSL proxy cho tất cả các host name => Nhập giá trị * cho cả 2 trường.
• Nếu bạn mong muốn bật SSL proxy chỉ riêng cho host name cụ thể nào đó => Nhập giá trị của host name đó.

Kiểm tra lại thông tin Location đã nhập.

Trên giao diện của Charles Proxy thì bạn đã thấy được các request từ iOS Devices (dùng trình duyệt trên iOS Devices mở 1 trang web gì đó bất kì) đã được hiển thị với thông báo SSL Proxying enabled for this host.

Hoàn thành nội dung Bật SSL Proxy cho máy tính Mac và cài đặt SSL cho tất cả host name.

Cài đặt Charles’s Root Certificate Bật Trust SSL Certificate cho iOS Devices/Simulators

Đối với iOS Simulators

Cách 1: Cài cho tất cả các iOS Simulators trong duy nhất 1 lần (Tuy nhiên cách này lại ít khi thành công, hiện tại vẫn chưa rõ nguyên nhân):

• Tắt tất cả iOS Simulators.
• Ở Charles Proxy, đi đến mục: Help > SSL Proxying > Install Charles Root Certificate in iOS Simulators.

Cách 2: Cài riêng cho 1 iOS Simulator cụ thể nào đó (Thành công 100%):

• Trên iOS Simulators mở trình duyệt Safari và truy cập tới https://chls.pro/ssl.
• Sau đó chọn Allow. Xuất hiện thông báo Configuration Profile của Charles Proxy (Charles’s Root Certificate) đã được download xong
• Sau đó chọn Close

Trên iOS Simulators đi đến mục: Settings > General > VPN & Device Management.

Chọn Install.

Configuration Profile của Charles Proxy được cài đặt thành công.

Tiếp tục thực hiện Bật Trust SSL Certificate cho iOS Simulators. Trên iOS Simulators đi đến mục: Settings > General > About.

• Đi đến mục: Certificate Trust Settings.
• Tiến hành bật Charles Proxy CA nếu đang bị tắt (được khoanh đỏ như hình ảnh bên dưới)
• Sau đó chọn Continue => Hoàn thành nội dung Bật Trust SSL Certificate cho iOS Simulators.

 

Đối với iOS Devices

Cũng tương tự các bước với iOS Simulators thì trên iOS Devices:

• Mở trình duyệt Safari và truy cập tới https://chls.pro/ssl.
• Sau đó chọn Allow => Xuất hiện thông báo Configuration Profile của Charles Proxy (Charles’s Root Certificate) đã được download xong.
• Sau đó chọn Close.

Trên iOS Devices đi đến mục: Settings > General > VPN & Device Management.

Chọn Profile tương ứng đã download (ở đây là Charles Proxy CA).

Chọn Install.

Configuration Profile của Charles Proxy được cài đặt thành công.

Tiếp tục thực hiện Bật Trust SSL Certificate cho iOS Devices:

• Đi đến mục: Settings > General > About > Certificate Trust Settings.
• Tiến hành bật Charles Proxy CA nếu đang bị tắt (được khoanh đỏ như hình ảnh bên dưới).
• Sau đó Chọn Continue => Hoàn thành nội dung Bật Trust SSL Certificate cho iOS Devices.

Tạm kết

Vì tính chất quan trọng nên một lần nữa mình xin phép nhắc lại danh sách các bước cấu hình với Charles Proxy ở bên dưới:

• Cấu hình Proxy
  • Bật macOS Proxy cho Charles Proxy
  • Cấu hình proxy cho iOS Simulators
  • Cấu hình proxy cho iOS Devices
• Cấu hình SSL Proxying Certificates
  • Thêm Charles Proxy CA Certificate cho máy tính Mac
  • Bật SSL Proxy cho máy tính Mac và cài đặt SSL cho các host name
  • Cài đặt Charles’s Root Certificate và Bật Trust SSL Certificate cho iOS Devices/Simulators

Tới đây, mình xin kết thúc bài viết Phần 1 – giới thiệu, hướng dẫn cách cài đặt và cấu hình Charles Proxy. Ở bài viết tiếp theo mình sẽ đi vào chi tiết các tính năng được sử dụng phổ biến của Charles Proxy. Rất mong nhận được những ý kiến đóng góp từ mọi người thông qua phần bình luận.

Tài liệu tham khảo:

• Charles Proxy Guide by nmint8m.  Xin gởi lời cảm ơn đặc biệt đến chủ nhân repo này vì đã đồng ý cho mình mượn ý tưởng viết bài.
• Charles Proxy: Developer’s Guide by Abhishek Ravi

Cảm ơn bạn đã đọc bài viết này!