친절한 Fiddler 사용법
저의 개인 블로그에서 가장 많은 조회 수를 차지하는 글이 Fiddler 사용법입니다. 기존의 포스팅이 해커의 관점에서 작성된 글이라면, 개발자와 해커 뿐만 아니라 웹 프로토콜 디버깅을 원하는 분들이 Fiddler를 사용할 수 있도록 Fiddler 사용법을 준비했습니다. 이 글을 다 읽고나면 Fiddler를 누구보다 잘 사용 할 수 있을거라 생각합니다.
Fiddler란?
Fiddler는 Proxy 기능을 HTTP 프로토콜을 디버깅 할 수 있는 디버거 입니다. 브라우저 및 응용 프로그램에서 HTTP 프로토콜을 사용하고 있다면 Fiddler를 통해 HTTP 통신을 분석할 수 있습니다. 웹 개발을 하거나 웹 해킹을 할 때 가장 브라우저에서 서버에 어떤 값을 보내고, 어떤 응답 값이 왔는지 확인하고 싶을 때 사용할 수 있습니다. 기본 기능 외에 웹 개발, HTTP 프로토콜 분석 시 유용하게 사용될 수 있는 기능들을 제공하고 있습니다.
저는 Fiddler를 웹 사이트 분석, PC/모바일 애플리케이션 HTTP/S 통신 분석, 자체 서명 인증서 없이 HTTPS 환경 구성, 각종 인코더/디코더 사용, 개발 및 스테이징 접근을 위한 hosts 설정 등에 이용하고 있습니다.
Getting Started with Fiddler Web Debugging Proxy [9:19]
본문에 들어가기에 앞서 전체적인 기능은 공식 사이트에서 제공하는 Fiddler 사용법 동영상에서 확인해주세요.
Fiddler 다운로드
공식 페이지 다운로드에서 사용목적과 이메일을 적고 다운로드를 눌러 내려받을 수 있습니다. (아무렇게 적어도 상관없습니다.)
설치파일 다운로드 이후 설치 시 특별한 설정은 없습니다. 다음 버튼을 눌러서 원하는 경로에 설치를 진행해주세요.
Note! 공식적으로 Windows외의 다른 운영체제도 제공하지만, 아직은 제대로 작동하지 않습니다. 😂
Fiddler 설정
Fiddler를 실행시키고 해야 할 설정 방법을 소개합니다. 설명해 드리는 내용을 무작정 적용하기보단 자신의 상황에 필요한 기능만 설정하는 것을 권고드립니다. 앞으로 설명할 내용은 아래와 같습니다.
1. HTTPS 복호화 설정
최근 웹페이지들의 주요 통신은 암호화해서 통신합니다. 타인의 암호화된 통신 내용을 확인하는 것은 어렵지만, 자신의 암호화 통신은 본인의 PC에서 확인할 방법이 있습니다.
Fiddler에서 제공하는 방법은 Fiddler에서 생성한 인증 기관(CA) 인증서(아직 신뢰 되지 않음)를 신뢰할 수 있는 루트 인증서로 등록하고, Fiddler proxy를 통해 접근하는 웹 사이트의 모든 인증서를 Fiddler CA가 발행한 인증서로 대체하여, 브라우저에서는 HTTPS 통신을 확인할 수 있는 자물쇠 마크와 동시에 Fiddler에서는 HTTPS 통신의 내용을 확인할 수 있습니다.
상단 메뉴 Tools > Options > HTTPS 메뉴
Fiddler에서 HTTPS를 복호화하는 방법을 알았으니 실제로 적용을 하기 위해서 상단 메뉴 Tools > Options > HTTPS 탭으로 이동합니다. 상단에 존재하는 Capture HTTPS CONNECTs와 Decrypt HTTPS traffic 2개의 체크박스 모두 체크를 합니다.
인증서를 설치하기전 발생하는 경고 창 (Windows 기준)
Decrypt HTTPS traffce 버튼을 누르는 순간 인증서 설치 창이 생성됩니다. 신뢰하지 않는 인증서를 등록하는 건 굉장히 위험한 일이지만, 자신의 HTTPS 내용을 확인하기 위해선 인증서를 설치해야합니다.
웹 어플리케이션을 개발시에 브라우저에서 HTTP로 통신할 때와 HTTPS로 통신할 때 작동하는 방법이 조금 다르기 때문에, 개발한 웹 애플리케이션의 배포 환경이 HTTPS를 사용하고 있다면, 개발 환경에서도 HTTPS를 적용해서 개발하는 게 편합니다. 이 방법을 통해 HTTPS 미적용 개발환경에 HTTPS를 적용해 사용할 수 도 있습니다.
Note! HTTPS 탭 내부의 Actions 버튼을 눌러 인증서를 재설치하거나 인증서를 바탕화면으로 복사할 수 있습니다. 복사한 인증서는 모바일 기기 등에 설치해서 해당 단말의 통신을 복호화할 수 있습니다.
Note! OS의 인증서 저장소를 사용하지 않고 자체 저장소 혹은 응용 프로그램(예. Firefox)의 경우 인증서 에러가 발생할 수 있습니다. 해당 경우 응용 프로그램에 인증서를 직접 설치할 수 있다면 해결할 수 있습니다.
Note! 인증서 Pinning을 사용하는 응용 프로그램 통신은 복호화 할 수 없습니다.
2. 이미지, CONNECTs Hide 설정
네이버에 접속했을때 발생하는 HTTPS CONNETs와 수많은 이미지 요청들
HTTP 요청 중 하나인 Images 요청이나 HTTPS에 연결하기 위한 요청들 전부 화면에 보여줍니다. 하지만 특이한 경우를 제외하고 이미지나 CONNECT 요청을 볼 필요는 없습니다.
상단 메뉴 Rules의 메뉴에서 이미지와 CONNECT 요청 제외 옵션
상단 메뉴 Rules에서 Image 요청과 CONNECT 요청을 숨길 수 있습니다.
image와 CONNECT 요청들이 사라진 화면
두 가지 옵션을 키고 네이버에 접근했을 때, 비로서 확인해야 할 요청들만 화면에 보이는 것을 볼 수 있습니다. 이를 통해 업무에 집중력을 높이고 필요한 요청만 볼 수 있습니다.
3. Remove All Encoding 설정
브라우저는 통신량을 감소시켜 빠르게 가볍게 통신하기 위해 HTTP 통신을 압축해서 통신합니다. 웹 서버와 통신할때 브라우저가 지원하는 압축 인코딩 정보를 웹서버로 전송합니다. 브라우저는 HTTP 패킷의 헤더에 Accept-Encoding 헤더와 자신이 지원하는 압축 포맷 정보를 함께 보냅니다. 웹 서버는 브라우저의 요청에서 서버에서 사용할 수 있는 압축 포맷을 선택해서 해당 압축 포맷으로 압축해서 Content-Encoding 헤더와 함께 브라우저에 전달합니다.
압축된 응답 값을 받은 화면, 압축된 내용을 확인할 수 없다
압축이 적용되면 Fiddler에서 응답 값을 바로 확인하지 못합니다. 눈으로 압축을 풀 수 없다면, 상단의 Click to decode 버튼을 눌러 압축을 푸는 작업을 매번 진행해야 합니다. 압축된 응답마다 해당 버튼을 눌러서 압축을 풀어야 하기에 상당히 번거롭습니다.
상단의 Rules에서 Remove All Encdoings 옵션
해당 문제를 해결하기 위해 모든 인코딩을 제거할 수 있는 Remove All Encdoings 설정이 존재합니다. 해당 설정을 키면 Fiddler에서 Accept-Encoding 요청을 보내지만, 서버에서 주는 Content-Encoding 헤더를 받아서 Fiddelr가 압축을 해제한 후 Content-Encoding 헤더를 삭제한 후 사용자에게 전달됩니다. 이후 Fiddler에서는 압축에 대해서 신경쓸 필요가 없게됩니다.
Note! 브라우저와 서버 통신은 그대로 압축된 상태로 이루어지므로 데이터 소비량은 걱정은 하지 않아도 됩니다.
Note! 해당 설정을 키면 상단 바에 Decode 버튼이 활성화 됩니다.
4. Hosts Remapping 설정
메모장으로 hosts파일을 열어 수정하는 화면
간혹 도메인이 실제로 매핑된 ip의 서버가 아닌 다른 서버에서 테스트해야 할 상황이 많습니다. 보통 system 폴더의 안의 hosts 파일을 직접 수정합니다. 관리자 권한이 필요한 데다 굉장히 번거롭고 간혹 백신이 이를 탐지하고 차단하기도 하기도 합니다.
상단 메뉴 Tools > HOSTS 메뉴
상단 메뉴 Tools > HOSTS... 설정에 들어가면 새로운 창이 활성화됩니다. 상단의 활성화 버튼을 누르고 hosts 파일과 동일한 포맷으로 원하는 ip와 dns를 할당할 수 있습니다. 활성화 된 이후 설정된 DNS와 ip로 접속합니다. 하단의 Import Winodws Hosts File 버튼을 눌러 윈도우에서 사용중인 설정을 호출할 수 있습니다.
Note! Fiddler의 Hosts 설정이 윈도우에 설정된 Hosts 파일보다 우선순위가 높습니다.
Host가 활성화되어 두가지 요청 같은 요청이 다른 결과를 반환하는 화면
해당 기능이 설정되면 기존 요청에는 없던 하늘색 뒷 배경이 활성화 됩니다. 이를 통해 현재 Hosts가 활성화된지 확인할 수 있습니다.
그 외에도 User Agent를 바꾸는 등의 유용한 설정들이 있지만, 주로 사용하는 4가지 설정에 대해서 설명해 드렸습니다. 다음으로 Fiddler를 이용한 주요 기능은 다음글에 설명하겠습니다.
