+1

Charles: Điều tra và vượt qua giới hạn của API trong phát triển và gỡ lỗi ứng dụng cũng như trong API Testing

Chào mừng các bạn đến với chuỗi bài viết "Khám phá Charles Proxy"! Trong loạt bài viết này, chúng ta sẽ khám phá một công cụ mạnh mẽ và hấp dẫn được sử dụng rộng rãi trong việc kiểm thử và gỡ lỗi ứng dụng di động và web - Charles Proxy. Hãy cùng bước vào thế giới của Charles và tìm hiểu những khả năng tuyệt vời mà nó mang lại!

1. Giới thiệu về Charles Proxy

1.1. Charles là gì?

Charles Proxy là một công cụ proxy HTTP/HTTPS mạnh mẽ được sử dụng rộng rãi trong việc kiểm thử API và phân tích lưu lượng mạng. Với khả năng ghi lại các yêu cầu và phản hồi của API, Charles giúp các nhà phát triển, kiểm thử viên và chuyên gia quản lý mạng hiểu rõ hoạt động của ứng dụng và tối ưu hóa hiệu suất

1.2. Tính năng chính của Charles

Charles Proxy cung cấp một loạt tính năng mạnh mẽ nhằm hỗ trợ quá trình kiểm thử và gỡ lỗi API, bao gồm:

  • Theo dõi và phân tích yêu cầu/phản hồi:
    • Charles cho phép bạn ghi lại toàn bộ lưu lượng mạng giữa ứng dụng và máy chủ. Bằng cách ghi lại yêu cầu và phản hồi, bạn có thể xem các thông tin chi tiết như URL, phương thức HTTP, tiêu đề, thân nội dung và thời gian phản hồi. Điều này rất hữu ích để kiểm tra và gỡ lỗi các yêu cầu và phản hồi của API.
  • Chỉnh sửa yêu cầu/phản hồi:
    • Với Charles, bạn có thể chỉnh sửa yêu cầu trước khi gửi lại máy chủ. Điều này cho phép bạn thực hiện kiểm thử và gỡ lỗi các kịch bản khác nhau bằng cách thay đổi thông tin yêu cầu như Params, Header và Method... Bạn cũng có thể tái gửi yêu cầu sau khi đã chỉnh sửa để kiểm tra các kịch bản tương tự.
    • Ngoài việc ghi lại yêu cầu, Charles cũng cho phép bạn xem và chỉnh sửa phản hồi từ máy chủ. Điều này giúp bạn kiểm tra và kiểm thử ứng dụng của mình với các phản hồi khác nhau từ máy chủ. Bạn có thể thay đổi nội dung response, header và HTTP status code để kiểm tra các tình huống và xử lý lỗi khác nhau.
  • SSL Proxying:
    • Charles có khả năng xử lý giao thức SSL/TLS, cho phép bạn ghi lại và phân tích lưu lượng mạng bảo mật. Bằng cách cài đặt chứng chỉ SSL của Charles trên thiết bị của bạn, bạn có thể ghi lại và xem nội dung của các kết nối HTTPS một cách chi tiết. Điều này rất hữu ích để phân tích và kiểm tra các yêu cầu và phản hồi bảo mật của API.
  • Kiểm soát lưu lượng mạng:
    • Charles Proxy cung cấp các công cụ để kiểm soát lưu lượng mạng. Bạn có thể giới hạn băng thông, giảm tốc độ mạng hoặc thậm chí giả lập mạng không ổn định để kiểm tra ứng dụng của mình trong các điều kiện mạng khác nhau. Điều này giúp bạn đảm bảo rằng ứng dụng của bạn hoạt động ổn định và đáng tin cậy dưới áp lực lưu lượng mạng.
  • Remote Debugging:
    • Charles Proxy cung cấp tính năng gỡ lỗi từ xa cho các thiết bị di động. Bằng cách cấu hình proxy trên điện thoại di động, bạn có thể sử dụng Charles để ghi lại và phân tích lưu lượng mạng của ứng dụng di động trên thiết bị thật. Điều này giúp bạn gỡ lỗi và tối ưu hóa ứng dụng di động của mình một cách dễ dàng.
  • Mapping và Rewrite:
    • Charles cho phép bạn ánh xạ (mapping) các yêu cầu từ một địa chỉ URL ban đầu sang một địa chỉ URL khác. Điều này hữu ích khi bạn cần ghi lại và kiểm tra yêu cầu API từ môi trường sản xuất, nhưng muốn chuyển hướng chúng đến một môi trường thử nghiệm hoặc địa chỉ URL khác. Bạn cũng có thể sử dụng tính năng này để thay đổi yêu cầu và phản hồi của API bằng cách viết lại (rewrite) các giá trị tham số hoặc nội dung.
  • Breakpoints:
    • Charles cho phép bạn đặt các điểm dừng (breakpoints) trên yêu cầu và phản hồi của API. Khi yêu cầu hoặc phản hồi đạt đến điểm dừng, Charles sẽ dừng lại và cho phép bạn xem và chỉnh sửa thông tin trước khi tiếp tục gửi hoặc nhận dữ liệu. Điều này rất hữu ích để kiểm tra và gỡ lỗi các yêu cầu và phản hồi cụ thể trong quá trình phát triển và kiểm thử.

2. Hướng dẫn cài đặt Charles

Bước 1: Truy cập trang web chính thức của Charles Proxy

Truy cập vào trang web chính thức của Charles Proxy tại địa chỉ: https://www.charlesproxy.com/download/.

Bước 2: Tải xuống phiên bản phù hợp

Charles Proxy có sẵn cho nhiều hệ điều hành khác nhau. Hãy chắc chắn rằng bạn chọn phiên bản phù hợp cho hệ điều hành của bạn, ví dụ: Windows, macOS hoặc Linux.

Bước 3: Tiến hành cài đặt

Sau khi tải xuống các tệp cài đặt, hãy thực hiện các bước sau để cài đặt Charles Proxy:

  • Trên Windows: Chạy tệp cài đặt (.exe) và làm theo hướng dẫn trên màn hình để hoàn tất quá trình cài đặt.
  • Trên macOS: Mở gói cài đặt (.dmg) và kéo biểu tượng Charles vào thư mục "Applications" để hoàn tất cài đặt.
  • Trên Linux: Giải nén tệp cài đặt (.tar.gz) và chạy tệp "install.sh" trong terminal bằng quyền quản trị. Làm theo hướng dẫn trên màn hình để hoàn tất quá trình cài đặt.

Bước 4: Đăng ký và kích hoạt Charles Proxy (tuỳ chọn)

Charles là 1 công cụ mất phí, tuy nhiên bạn vẫn có thể sử dụng miễn phí một khoảng thời gian giới hạn. Tuy nhiên, nếu bạn muốn sử dụng toàn bộ tính năng của Charles Proxy, bạn cần đăng ký và kích hoạt bản quyền.

Đây là giao diện ứng dụng Charles khi bạn mở nó sau khi cài đặt xong:

Screenshot 2024-06-14 at 15.03.03.png

3. Kết nối điện thoại vào Charles

Chú ý để có thể kết nối điện thoại với Charles trên máy tính thì cả máy tính và điện thoại của bạn cần phải truy cập cùng 1 wifi (cùng mạng LAN)

3.1. Cài đặt trên máy tính

Bước 1: Lấy thông tin địa chỉ IP của máy tính

Bạn có thể lấy địa chỉ IP của máy tính trên Charles bằng cách truy cập Help -> Local IP Address:

Screenshot 2024-06-14 at 15.16.33.png

Sau đó sẽ có modal hiển thị địa chỉ IP address như ảnh: Screenshot 2024-06-14 at 15.15.03.png

Bước 2: Lấy thông tin Port của Charles trên máy tính

Truy cập vào Proxy > Proxy Settings Screenshot 2024-06-14 at 15.20.22.png

Ở đây bạn sẽ thấy Port của Charles, thường thì nó sẽ là 8888. Recommend các bạn không nên sửa nó nếu không hiểu Port là gì.

Screenshot 2024-06-14 at 15.20.34.png

Thông tin IP và Port ở trên sẽ dùng để nhập trong điện thoại nhé.

3.2. Cài đặt trên điện thoại

Ở bài viết này mình sẽ sử dụng điện thoại iPhone (có thời gian mình sẽ update cho Android sau)

Bước 1: Cài đặt Proxy

IMG_2836.PNG IMG_2837.PNG
1. Vào setting wifi chọn Config Proxy 2. Chọn Manual sau đó điền địa chỉ IP và Port có ở trên

Chú ý khi kết nối proxy sang máy tính, mà máy tính không bật Charles thì điện thoại của bạn sẽ không vào mạng được -> Khi test xong cần đổi Config Proxy sang lại OFF

Nếu đây là lần đầu tiên kết nối tới máy tính thì bạn sẽ thấy thông báo sau yêu cầu cấp quyền truy cập trên máy tính như hình dưới. Ở đây bạn cho Allow.

Screenshot 2024-06-17 at 08.00.46.png

Bước 2: Cài đặt Certificate

Nếu đây là lần đầu tiên kết nối điện thoại với máy tính thì bạn cần thực hiện bước này. Còn những lần kết nối tiếp theo thì chỉ cần bước 1 ở trên là đủ rồi nhé.

Đầu tiên cần Download ceritificate:

1. Mở Safari truy cập vào trang web chls.pro/ssl 2. Chọn cho phép tải xuống 3. Vào Settings chọn Profile Downloaded

Sau đó là cài đặt:

IMG_2842.PNG IMG_2843.PNG IMG_2845.PNG
4. Chọn Install để bắt đầu cài đặt 5. Tiếp tục chọn install 6. Cứ install tiếp cho đến khi hoàn thành

Cuối cùng cần phải kích hoạt certificate đã cài:

IMG_2846.PNG IMG_2847.PNG IMG_2848.PNG
6. Vào Setting -> Genneral -> About 7. Chọn Certificate Trust Settings 8. Active certificate của Charles lên

DONE Vậy là bạn đã cài đặt và kết nối thành công Charles với điện thoại. Ở bài viết tiếp theo chúng ta sẽ cùng tìm hiểu cách sử dụng Charles để theo dõi và phân tích 1 API.

Screenshot 2024-06-17 at 08.34.49.png

CHÚ Ý: ở Sun* Charles là 1 phần mềm nằm trong danh sách hạn chế sử dụng. Bạn cần phải được sự đồng ý của TL, PM và ký cam kết với ISO mới được phép sử dụng nhé.


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.