Charles는 앱의 패킷 캡처 분석을 수행하고 앱 실행 중에 발생하는 모든 네트워크 요청과 응답을 얻는 데 사용할 수 있는 네트워크 패킷 캡처 도구입니다. 웹 브라우저에서 도구의 네트워크 부분에 표시된 결과는 일관됩니다.
Fiddler에 비해 Charles는 더 강력한 기능과 더 나은 크로스 플랫폼 지원을 제공합니다. 따라서 우리는 모바일 앱 데이터 패킷을 분석하고 앱 데이터 캡처 작업을 완료하는 데 도움을 주기 위한 주요 모바일 패킷 캡처 도구로 Charles를 선택했습니다.
1. 이 섹션의 목적
이 섹션에서는 JD.com 앱을 예로 들어 Charles를 사용하여 앱 실행 중에 네트워크 데이터 패킷을 캡처하고 그런 다음 특정 요청 및 응답 내용을 확인하여 Charles의 사용법을 이해하세요.
2. 준비
Charles가 올바르게 설치되었는지, 프록시 서비스가 활성화되어 있는지 확인하십시오. 휴대폰과 Charles가 동일한 LAN에 있고 Charles 프록시와 CharlesCA 인증서가 있는지 확인하십시오. 설정되어 있습니다.
3. 원리
먼저 Charles는 자신의 PC에서 실행됩니다. Charles가 실행되면 PC의 포트 8888에서 프록시 서비스가 열립니다. 이 서비스는 실제로 HTTP입니다. /HTTPS 에이전트.
휴대폰과 PC가 동일한 LAN에 있는지 확인하십시오. 휴대폰 시뮬레이터를 사용하여 가상 네트워크를 통해 연결할 수도 있고, 실제 휴대폰과 PC를 사용하여 무선으로 연결할 수도 있습니다. 회로망.
휴대폰 프록시를 Charles의 프록시 주소로 설정하면 인터넷에 액세스하는 휴대폰의 데이터 패킷이 Charles를 통해 흐르고 Charles는 이러한 데이터 패킷을 실제 서버로 전달하고 서버에서 반환된 데이터 패킷은 Charles에 의해 다시 전달됩니다. 휴대폰의 경우 Charles는 중개자 역할을 하며 모든 트래픽 패킷을 캡처할 수 있으므로 모든 HTTP 요청과 응답을 캡처할 수 있습니다. 동시에 Charles는 요청과 응답을 수정할 권한도 있습니다.
4. 패킷 캡처
초기 상태에서 Charles의 실행 인터페이스는 아래 그림과 같습니다.
찰스는 PC와 휴대폰에서 생성되는 네트워크 데이터 패킷을 항상 모니터링하며, 캡처된 데이터 패킷은 시간이 지날수록 더 많은 데이터 패킷이 캡처되어 왼쪽에 표시됩니다. 왼쪽 목록에 점점 더 많은 콘텐츠가 있을 것입니다.
보시다시피 Charles가 캡처한 요청 사이트가 그림 왼쪽에 표시됩니다. 항목을 클릭하면 요청, 응답 및 기타를 포함하여 해당 요청에 대한 자세한 정보를 볼 수 있습니다. 내용물.
다음으로 Charles의 캡처 결과를 지우고 현재 캡처된 요청을 모두 지우려면 왼쪽의 빗자루 버튼을 클릭하세요. 그런 다음 두 번째 듣기 버튼을 클릭하고 듣기 버튼이 켜져 있는지 확인하세요. 이는 아래 그림과 같이 Charles가 앱의 네트워크 데이터 흐름을 모니터링하고 있음을 의미합니다.
이때 휴대폰에서 JD.com을 열어주세요. 반드시 Charles의 에이전트를 설정하고 CA 인증서를 구성해야 합니다. 그렇지 않으면 아무런 효과가 없습니다.
아래와 같이 iPhone과 같은 제품을 연 다음 제품 리뷰 페이지를 엽니다.
댓글을 계속해서 끌어오고 로드하면 아래 그림과 같이 Charles가 이 과정에서 JD.com 앱에서 발생한 모든 네트워크 요청을 캡처한 것을 확인할 수 있습니다.
왼쪽 목록에 api.m.jd.com 링크가 나타나며 계속 깜박입니다. 현재 앱에서 보낸 댓글 데이터를 가져오라는 요청이 Charles에 의해 캡처되었을 가능성이 높습니다. . 클릭하여 확장하고 계속해서 위로 당겨 댓글을 새로 고칩니다. Pull-up이 진행되면서 여기에 네트워크 요청 기록이 차례로 나타나게 됩니다. 이때의 새로운 패킷 요청은 분명 코멘트를 얻기 위한 요청입니다.
정확성을 확인하기 위해 클릭하여 항목 중 하나의 세부정보를 확인합니다. Contents 탭으로 전환합니다. 이때 일부 JSON 데이터를 찾아 결과를 확인합니다. 결과에는 commentData 필드가 있으며 해당 콘텐츠는 아래 그림과 같이 앱에서 볼 수 있는 댓글 콘텐츠와 일치합니다.
이때, 본 요청에 해당하는 인터페이스는 상품평 획득을 위한 인터페이스임을 확인할 수 있다. 이러한 방식으로 풀업 새로 고침 프로세스 중에 발생한 요청 및 응답 내용을 성공적으로 캡처했습니다.
5. 분석
이제 이 요청과 응답의 세부정보를 분석합니다. 먼저, 개요 탭으로 돌아갈 수 있습니다. 요청된 인터페이스 URL이 위에 표시되고, 응답 상태 상태 코드, 요청 방법 등이 아래 그림과 같이 표시됩니다.
이 결과는 원래 웹의 브라우저 개발자 도구에서 캡처한 결과와 유사합니다.
그런 다음 콘텐츠 탭을 클릭하여 요청 및 응답의 세부정보를 확인하세요.
상단에는 Request 정보가, 하단에는 Response 정보가 표시됩니다. 예를 들어 Reqeust의 경우 헤더 탭으로 전환하여 요청의 헤더 정보를 확인합니다. 응답의 경우 JSON TEXT 탭으로 전환하여 응답의 본문 정보를 볼 수 있으며 콘텐츠 형식은 아래와 같습니다. .
이번 요청은 POST 요청이기 때문에 아래 그림과 같이 Form 탭으로 전환하면 확인할 수 있는 POST 양식 정보도 신경써야 합니다.
이러한 방식으로 앱에서 댓글 인터페이스의 요청과 응답을 성공적으로 캡처했으며 응답에서 반환된 JSON 데이터를 볼 수 있습니다.
다른 앱과 마찬가지로 이 방법을 사용하여 분석할 수도 있습니다. 요청된 URL과 매개변수의 패턴을 직접 분석할 수 있다면 프로그램 시뮬레이션을 사용하여 일괄적으로 크롤링할 수 있습니다.
6. 재전송
Charles에는 캡처된 요청을 수정하고 수정된 요청을 보낼 수 있는 강력한 기능도 있습니다. 위의 수정 버튼을 클릭하면 왼쪽 목록에 수정 아이콘으로 시작하는 링크가 표시됩니다. 이는 아래 그림과 같이 이 링크에 해당하는 요청이 당사에서 수정되고 있음을 의미합니다.
양식에서 필드를 제거할 수 있습니다. 예를 들어 여기에서 파트너 필드를 제거한 다음 제거를 클릭합니다. 이때 아래 그림과 같이 원본 요청에 담긴 Form Data를 수정한 후, 아래의 Execute 버튼을 클릭하면 수정된 요청이 실행됩니다.
아래 그림과 같이 인터페이스의 요청 결과가 왼쪽 목록에 다시 나타나고 내용은 변경되지 않은 것을 확인할 수 있습니다.
양식 양식에서 파트너 필드를 삭제해도 아무런 영향이 없으므로 이 필드는 관련이 없습니다.
이 기능을 사용하면 디버깅에 Charles를 쉽게 사용할 수 있으며 매개변수, 인터페이스 등을 수정하여 다양한 요청의 응답 상태를 테스트할 수 있으며 어떤 매개변수가 필요하고 어떤 매개변수가 불필요한지 알 수 있습니다. , 그리고 매개변수의 규칙은 무엇이며, 마지막으로 프로그램 시뮬레이션 호출을 위한 가장 간단한 인터페이스와 매개변수 형식을 얻습니다.
7. 결론
위 내용은 찰스 패킷 캡처를 통해 앱 요청을 분석하는 과정입니다. Charles를 통해 우리는 앱을 통해 흐르는 네트워크 데이터 패킷을 성공적으로 캡처하고 원본 데이터를 캡처할 수도 있었으며 인터페이스 테스트를 위해 수정된 요청을 다시 시작할 수도 있었습니다.
이제 요청과 응답의 구체적인 정보를 알았으니, 요청한 URL과 매개변수의 패턴을 분석할 수 있다면 프로그램 시뮬레이션을 이용해 직접 일괄 크롤링을 할 수 있겠네요!
휴대폰 크롤러는 매우 흥미롭고 크롤링할 수 있는 데이터가 많습니다. 물론 아직 배워야 할 것이 많습니다.
앞으로는 모두를 위한 몇 가지 흥미로운 실제 사례도 작성하겠습니다.