피들러(Fiddler Web Debugger)에 대해알아보자

dydwls121200@gmail.com조용진Likemilk

피들러...?

웹(http)...?

웹 디버거 !!!!!

그..... 그만 알아보자.

fiddle [|fɪdl]①[자.동] 만지작거리다②[타.동] (세부 사항을) 조작하다③= violin

④ [명] 조작, 사기

조작하고 속인다.

ServerHost(Capturing)

Clients

감청 조작HTTP Request HTTP Request

HTTP ResponseHTTP Response

fiddle !!

fiddle !!

fiddle !!

fiddle !!

fiddle !!

fiddle !!

fiddle !!fiddle !!

fiddle !!

fiddle !!

fiddler = 무료 http 패킷 디버거 툴

피들러(Fiddler)는 어떻게 생겼을까?

요청과 응답들의 목록

응답

요청

피들러(Fiddler)는 어떤 원리를이용해서 감청하고 조작해줄까?

프록시(Proxy)

피들러는 유틸 프로그램으로써사용자 컴퓨터의 프록시 서버역할을 한다.

프록시란 것은 뭘까?

프록시(Proxy)?

proxy [|prɑːksi]

① [명] 대리(권)② [명] 대리인

클라이언트가 특정 서버를 통해서 다른 네트워크 서비스에 간접적으로접속할 수 있게 해주는 컴퓨터나 응용 프로그램을 프록시 서버한다.

Client Service Server

directly transport to server

indirectly transport to server

Service ServerProxy Server

Clients

packet

피들러(Fiddler)가 프록시(Proxy) 서버이기 때문에모든 패킷을 조작하고 감청할 수 있다.

단,

패킷들이 피들러(Fiddler) 프록시 서버를 통해서 전송하며,HTTP 서비스 프로토콜을 이용한 통신일 경우에 한해서만!

Fiddler에 대한 개괄적인 동작 원리는 프록시 서버의 응용이다.이론은 끝이다. 설치를 해보자! (끝이 어디 있겠습니까. 허허….)

Fiddler Install https://www.telerik.com/download/fiddler다운로드 링크

다운로드 하면서 읽어 보자

설치에 관련된 특이사항

- Telerik사에서 만든 웹 디버깅 프로그램- Windows, MAX OS, Linux Debian (주), Fedora- 리눅스의 설정은 프록시 직접 설정 해주어야한다.- 실제 리눅스에서 피들러를 이용해본 결과 설정 진짜 번거롭다.- Windows는 자동으로 잡힌다.- Browser에서 자동으로 잡히는 경우가 있지만, 자동으로 프록시 설정이

안 잡힌다면, 직접 설정해주어야 한다.

라이선스

- 이건 프리웨어기 때문에 Fiddler 로 인한 고장은 Telerik 에서 보장해주지 않는다.- 옵션으로 당신의 데이터들이 나중의 Telerik 제품을 위해서 전송이 될 텐대 이 정보들은

익명(Anonymous)으로 전송될 것이다. 원하지 않으면 설정에서 변경하라.- 이 소프트웨어의 법과 규칙들은 전부 미국의 수출 법률을 준수한다.- 이것은 서드파티의 유틸리티로서 사용이 가능하며, Telerik 에서 제공하는것이다.- 이 소프트웨어를 이용하여 재가공, 재배포하여 돈을 버는짓을 하면 법적 제재를 가한다.

Fiddler 특징

웹 디버깅

성능 테스트

HTTP/HTTPS 트래픽 기록

웹 세션 조작 보안 테스트

커스터 마이징

쿠키, 헤더, 캐쉬를 조회할 수 있으며 서버의 언어, 클라이언트의 운영체제 및 디바이스에 관계없이 사용할 수 있다.

서비스 되는 웹 페이지의 무게를 측정하거나네트워크의 병목현상도 감지할 수 있다.

쉽게 웹 세션을 조작할 수 있고, 모든 세션작업에서 pause를 걸 수 있으며, 접속자의 요청과 응답을 조작할 수 있습니다.

피들러를 사용해서 웹 어플리케이션에 대한보안(https)를 테스트할 수 있으니, 피들러를통해서 https의 요청을 해석해봅시다

피들러는 확장성이 큰 유틸 프로그램입니다. 간단한 피들러 스크립트는 (.NET 언어로 작성되어 있다.)

피들러는 http 프록시 웹 디버거이기 때문에TLS의 패킷들을 감청할 수 있다.

여기 까지 왔으면 다운로드가 끝나 있을 것이다. 이제! 피들러(Fiddler.exe)를 실행시켜 보자.

설치를 완료하고 실행시킨 뒤, 아무 웹 페이지를 들어가면 다음과 같이자동적으로 Fiddler가 http에 대한 패킷을 감청할 것이다.

만약, Fiddler가 패킷이 감청하고 있지 않다면브라우저의 프록시 설정을 들어가보자.

브라우저의 설정

설정->고급 설정 표시 -> 프록시 설정 변경 -> LAN 설정 -> …프록시 사용 Check!

Check!!

우선 Fiddler의 각각 컨트롤러 패널들을 살펴보자

요청과 응답들의 목록

요청 값 보기

응답 값 보기

패킷 제어 메뉴

프로그램 제어 메뉴서비스 제어 메뉴

빠른 명령줄 상태

드디어

대망의 실습

모바일에서 웹서버에 요청한 후 패킷을 감청 해보자. 그리고 감청한 패킷을 변형 시켜서 다시 웹 서버에 요청해보자

우선 번거롭겠지만 모바일 단말기의 Wi-Fi 설정과데스크 탑의 Fiddler 프로그램의 설정을 잡아야 한다.

Long Tab!!

①

②

③

④

⑤⑥

⑦

Wi-Fi 설정 -> 해당 SSID 롱 클릭 -> 네트워크 수정-> 고급 설정->프록시 설정 사용-> 프록시 호스트, 포트 지정-> 저장

“어.... 음.. 제가 설정을 잘못 잡았나요?”

(또는)

아뇨, 아직 덜 잡으셨습니다….저는 아직 웹 페이지에 접속하라고 안했습니다!

프로그램 제어 메뉴-> Tools -> Telerik Fiddler Options...->Allow Remote Computers to connect 에 Check!!

적당한 설정은 이제 끝났다!(설정에 끝이 어디있겠습니까…. 허허)

모바일 단말기에서 http://smartlock.fun25.co.kr 을 들어가 보자.

엥....? 이거 완전 뚱뚱이 사이트 아냐? (작성자의 웹 페이지입니다..)리소스를 뭐 이리 잡아먹어? (폰트를 누가 *.ttf로..)

로그인을 해봅시다.

(본 웹 페이지는 테스트용 웹 페이지입니다. 요청 막 넣으면 아파해요....)

Test 계정Email : dydwls121200@gmail.comPassword : 1

/login.do 를 클릭하고 오른쪽 패널의 상단 메뉴에 inspector 를 선택하면다음과 같은 화면으로 요청값과 응답메시지를 확인 할 수 있다.

잘 따라오고 있나요?

이제 요청값을 조작해 보도록 하자 (Manipulate Request data)

요청 값을 조작하기 위해서는 별도의 처리가 필요하다

브레이크 포인트(Break Point)

브레이크 포인트는 동작 중 특정 지점에서 멈춰 세우는 의미로Fiddler 에서는 브레이크 포인트를 걸 수 있는 방법이 세 가지 있습니다.

1. 프로그램 제어 메뉴에서의 Break Point2. 프로그램의 상태 표시줄에서의 Break Point(1번과 동일기능)

3. 빠른 명령줄에서의 스크립팅 이용 (유연한 프레이크 포인트 가능)

①

②③

- 1번과 2번은 같은 기능으로 써 Break Point의 시점을요청 전과 응답 후 로 지정할 수 있습니다.

- 3번은 빠른 명령 실행으로 Alt+Q로 Focus를이동시킬 수 있습니다.

- 3번에 대한 빠른 명령 실행 Documenthttp://docs.telerik.com/fiddler/KnowledgeBase/QuickExec

1번과 2번에 대한 설정은 건너뛰고 개발자 답게 3번으로 실습 해보겠습니다.

Fiddler의 메인 화면에서 [Alt + Q] 단축키를 누르고‘bpu smartlock.fun25.co.kr/dydwls121200@gmail.com’ 을 입력해 봅시다.

브레이크 포인트 관련 명령어를 알아보자-bpu : break point url-bpafter : break point [response] after-bpbefore : break point [request] before

Ex) bpu smartlock.fun25.co.kr/dydwls121200@gmail.com

Break Point 가 걸린 웹 패킷

Response 에도 Break Point를 걸거나조작(Manipulation)작업의 완료를 선택함

스크립트가 적용되면 해당 영역에 표시됨

uri 명이 smartlock.fun25.co.kr/dydwls121200@gmail.com 일 경우에 Break Point에 걸림

Notice !! bpu 명령어는 요청전에 break point를 걸어버린다.

어떤가요? break point는 잘 걸렸나요? 이제 요청값들을 바꿔보도록 합시다.

요청은‘dmlaldjqtdma’으로 하고서 요청값 변조를 통해서‘dydwls121200@gmail.com’계정으로 로그인을 할 것이다.

우선, 빠른 명령줄에서 [Alt + Q]‘bpu smartlock.fun25.co.kr/login.do’을 입력해 봅시다.

**Break point 의 해제는 ‘bpu ’만 입력하세요!상태 표시 줄에서 cleard break point 라는 메시지가 나타날 것입니다.

그리고 로그인을 해서 브레이크 포인트에 걸려봅시다.

Test 계정Email : dmlaldjqtdmaPassword : 아무거나

dmlaldjqtdma

● ● ● ● ● ● ●

‘로그인’을 누르고 피들러를 열어보면 다음과 같이 login.do 에break point가 걸려있을 것입니다.

Email : dydwls121200@gmail.compassword : 1 로 셋팅하고

Break on Response를 클릭합니다.

피들러에서‘로그인’에서 요청한 값들을 수정해 봅시다.

‘Break On Response’를 누르면 응답값이 정상적으로 돌아오는것을 확인 할 수 있습니다.작업이 완료되면 Run to Completion을 눌러 클라이언트에게 전달합니다.

마찬가지로 Break On Response를 잘 활용해서 Response를 수정하면 된다.

드디어 실습 예제 끝!

“잠깐..!!”

“SSL 처리된 http는 어떻게 보는거죠..? 복호화된 문서를 어떻게 보라구요-!?”

클릭하세요. 클릭

이렇게

“딸칵! 딸칵!”

사실 검증을 위해 잠깐의 테스트를 해 봅시다.

https 적용된 웹 페이지 중에.. Naver를 들어가서자신의 계정으로 로그인을 해봅니다

Click-!

Check-!

Https 적용된 웹 사이트에 접속하게 되면 https 패킷이라 나타나는데이때, “HTTPS decryption is ….”를 클릭하고 Decrypt HTTPS Traffic 에다가 체크 합니다.

만약 이 방법이 스마트하지 않다고 생각하면‘프로그램 제어 메뉴 -> Tools -> Telerik Fiddler Options-> Https Tab’

에서 설정할 수 있습니다.

(끝! 을 내려고 했으나. 아쉽다. 그리고 나는 아직 피들러가 불편하다.)

(예정 되어 있는 실습은 끝이지만…. 작성자는 프로 불편러라서…. 더 알아보았습니다…. )

뭔가…. Fiddler를 계속 이용하다 보면 느끼는게 있습니다.

뭐…뭐이리 많아…이 호스트는 어디야..?

이래서 크롬이 램 괴물이라 한거야?

아니.. 지금 그냥 구글링 하는대.. 패킷을 왜 읽어..

1. 내가 원하는 것은 단 한곳의 서비스 서버에서 발생하는 요청과 응답….2. 지금 웹 패킷을 받고 싶지 않아….

3. A와 B의 패킷을 비교하고 싶어요….4. 페이지의 무게와 리소스 로드 시간을 알고 싶어요….

그래서 준비해보았다. 불편하시지 마시라구!

1. 내가 원하는 것은 단 한곳의 서비스 서버에서 발생하는 요청과 응답….

특정 호스트에 대한 내용만 받아보길 원한다면 Filters에서 설정할 수 있다.

Documents: http://docs.telerik.com/fiddler/KnowledgeBase/Filters

① 선택형② 필수

④ 적용

③ 적용1. Network의 범위를 설정한다.

2. 숨길 것인지 보일 것인지에 대한 선택을설정한다.

3. 필터를 적용할 호스트들을 선택한다. 포트를지정하지 않으면 모든 포트에 대해 Listen 한다.

4. 적용한 필터의 내용대로 피들러가 웹 패킷감청에 적용한다.

2. 지금 웹 패킷을 받고 싶지 않아….

패킷 캡쳐의 중단은 세 가지 방법이 있다. 매우 심플하니 길게 설명할 것 도 없다.- F12 키를 누른다.

- File-> Capture Traffic 을 체크한다.- 좌측 하단의 Capturing 상태를 클릭한다.

3. A와 B의 패킷을 비교하고 싶어요….

Ctrl 로 두 개의 패킷만 선택합니다. 그리고 오른쪽 클릭하고‘Compare’ 를 누르거나 ‘[Ctrl]+w’를 누르면 됩니다.

피들러는 Text Compare Tool을 기본적으로 ‘WinMerge’를 사용하는데기본적으로 독자 여러분의 컴퓨터에서 WinMerge는 설치되어 있지 않다.

그러므로 Error Alert를 뿜을 것이다.

그러니 우리는 ‘WinMerge’를 설치해서 사용하면 됩니다. 이 기능 하나 쓰겠다고 WinMerge를 사용해야 하나 자괴감 들고 괴롭겠지만,나름 실무에서 로그 분석할 때나 소스 분석할 때 유용하게 쓰일 수 있습니다.

설치하고 후회는 들지 않을 것입니다. (무료라구요 무료!)

WinMerge는 이클립스에서 Text비교하기 번거로울 때 가볍게 쓰기 좋은 툴이기도 합니다.

참고 : http://winmerge.org/

다운로드 완료 후, 다시 비교하고 싶은 두 패킷을 선택한 다음 ‘Ctrl+w’를 눌러주면다음 화면과 같이 ‘WinMerge’가 실행되어 두 패킷을 비교합니다.

4. 페이지의 무게와 리소스 로드 시간을 알고 싶어요….

패킷의 용량과 로드 된 시간을 파악하기 위해서는우측 패널의 Timeline기능을 활용하면 됩니다.

복수개의 웹 패킷을 선택하고 우측 패킷의 timeline 을 선택하면 됩니다.

진짜 끝!

이제 좀 피들러에 대해 감이 잡히시나요? 이 피피티를 작성하면서 저도 몰랐던것들을 여럿 배웠는대요. 아마 부분 틀린 지식들이 있을거 같기도 합니다.

저 이외에 다른 사람들 보여준다고 이것저것 준비해보았는데, 읽고나서 도움이되었으면 합니다.

그럼

Happy Hacking!!

피드백이나 질문메일은 언제나 환영합니다.제 개인메일로 메일 주시면 친절히 답변 드리겠습니다.

Happy Hacking!

dydwls121200@gmail.com조용진

References

참고 1 : http://www.mehdi-khalili.com/fiddler-in-action/part-1/

참고 2 : http://www.mehdi-khalili.com/fiddler-in-action/part-2/

참고 3 : http://www.telerik.com/fiddler/add-ons [Fiddler 확장 프로그램]

참고 4 : https://www.youtube.com/watch?v=8bo5kXMAcV0 [Fiddler 공식 영상]

참고 5 : http://winmerge.org/ [WinMerge 공식 홈페이지]