[Fiddler] Fiddler 사용법 (네이버, 유튜브 검색)

1. Fiddler 란?

• 컴퓨터와 웹 서버 또는 서버 사이의 HTTP 및 HTTP 트래픽을 기록, 검사 및 변경하는데 사용되는 디버깅 프록시 도구

2. Fiddler 다운

• 아래 링크에서 무료 다운 가능 (mac 지원X)
  https://www.telerik.com/fiddler
• Fiddler을 통해 네이버와 유튜브 검색을 해봄

3. 네이버 검색

3.1. Request, Response 분석

• 아래와 같이 인터넷 브라우저와 피들러 준비

• Capture Traffic이 체크 되어있는지 확인

• 이 상태에서 네이버 검색창에 '안녕하세요'를 쳐보면 피들러에 아래와 같이 Traffic들이 Capture 됨

• 적당히 캡쳐가 되었다 싶으면 Capture Traffic(단축키 F12)를 꺼줘서 새로운 Traffic들의 캡쳐를 정지시킴
• 이제 이 Traffic들 중에 원하는 결과를 담고있는 Traffic을 찾아내야 함
  • 보통 Body가 적당히 큰 값일 확률이 높음
• 첫번째 Traffic을 살펴보자. 첫번재 Traffic을 클릭하면 오른쪽 창에서 아래와 같이 Request와 Response를 확인할 수 있음

• Response body를 decode 후 (노란색 부분 클릭) WebView를 보면 아래와 같음

• 이 페이지가 매우 안 이쁘긴 하지만 사실 우리가 인터넷 브라우저를 통해 검색한 아래의 결과창과 일치함

• 첫번째 Traffic의 Response의 WebView 뿐만 아닌 Header, TextView, SyntaxView, Raw, Json 등을 통해 페이지를 분석해 볼 수 있음

3.2. 네이버 검색 요청 보내기 (Composer로 동일 요청 재전송)

• 우측의 Composer 탭에 들어간 후 첫번째 Traffic을 우측으로 드래그하면 아래와 같이 어떤 값들이 채워짐

• 이 값들은 아까 브라우저를 통해 전송한 Request들을 그대로 가져온 값임
• 이 상태에서 빨간색으로 표시한 Execute 버튼을 누르면 똑같은 요청이 전송되고 Response를 받을 수 있음

• 첫번째 Traffic은 브라우저에서 보낸 요청, 두번째 Traffic은 Fiddler에서 보낸 요청 => 결과는 같음

3.3. 네이버 검색값 바꿔서 전송

• 이번에는 '안녕하세요'가 아닌 '반갑습니다'를 검색해보자
• 브라우저에서 '반갑습니다'를 검색해서 가져와도 되지만 Fiddler의 Request를 분석해 봄

• Composer 탭에서 Request를 봐보면 여기 어딘가에 '안녕하세요'가 있을 것이라고 판단 => '안녕하세요' 찾아야 됨
• Header 쪽에는 특별한 값이 없는 것 같으니 URL 쪽을 봐봄
• URL : https://search.naver.com/search.naver?where=nexearch&sm=top\_hty&fbm=1&ie=utf8&query=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94
• query parameter가 %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94 인데 이것을 URL decoder(https://meyerweb.com/eric/tools/dencoder/)을 사용해 decode 해보면 '안녕하세요' 임을 확인할 수 있음
• query 값에 '반갑습니다'를 넣으면 된다는 사실까지 알아냄
• Composer의 URL에 'https://search.naver.com/search.naver?where=nexearch&sm=top\_hty&fbm=1&ie=utf8&query=반갑습니다' 를 넣어주고 전송하면 아래의 결과를 얻을 수 있음 (따로 URL encode 안해줘도 됨, Header은 그대로 해도 되고 지워도 상관 없음)

4. 유튜브 검색

4.1. Request, Response 분석

• 네이버와 진행 방식은 똑같음, 유튜브에 'itzy sneakers' 를 검색해봄
• 캡쳐된 여러개의 Traffic 중에 우리가 원하는 Traffic을 찾아냄

 

• 그런데 유튜브는 네이버와는 달리 WebView로 봤을때 홈페이지 형태의 Response가 아닌 Json 타입의 Response였음
• 너무 길어서 분석하기 막막하긴 하지만 굳이 한번 해보자면..
  • Json Beautifier https://jsonbeautifier.org 유용
• 아래의 JSON Object가 계속 반복됨을 확인할 수 있었는데, 이 한 Object가 아래에 표시한 컨텐츠 하나를 의미함

{"videoRenderer":{"videoId":"Hbb5GPxXF1w","thumbnail":{"thumbnails":[{"url":"https://i.ytimg.com/vi/Hbb5GPxXF1w/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBMf-AMRYMROcA-AGjFoA0U-K4BrQ","width":360,"height":202},{"url":"https://i.ytimg.com/vi/Hbb5GPxXF1w/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCWiQ-lYOz51I3H3IKH17hSgmPwww","width":720,"height":404}]},"title":{"runs":[{"text":"ITZY “SNEAKERS” M/V @ITZY"}],"accessibility":{"accessibilityData":{"label":"ITZY “SNEAKERS” M/V @ITZY 게시자: JYP Entertainment 1개월 전 3분 5초 조회수 107,091,526회"}}},"longBylineText":{"runs":[{"text":"JYP Entertainment","navigationEndpoint":{"clickTrackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","commandMetadata":{"webCommandMetadata":{"url":"/c/JYPEntertainment","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UCaO6TYtlC8U5ttz62hTrZgg","canonicalBaseUrl":"/c/JYPEntertainment"}}}]},"publishedTimeText":{"simpleText":"1개월 전"},"lengthText":{"accessibility":{"accessibilityData":{"label":"3분 5초"}},"simpleText":"3:05"},"viewCountText":{"simpleText":"조회수 107,091,526회"},"navigationEndpoint":{"clickTrackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApAyBnNlYXJjaFINaXR6eSBzbmVha2Vyc5oBAxD0JA==","commandMetadata":{"webCommandMetadata":{"url":"/watch?v=Hbb5GPxXF1w","webPageType":"WEB_PAGE_TYPE_WATCH","rootVe":3832}},"watchEndpoint":{"videoId":"Hbb5GPxXF1w","params":"qgMNaXR6eSBzbmVha2Vyc7oDCwjFntLi5Ku05bUBugMKCKTos4uUxqWAQ7oDCgi7_o2507_O_kC6AwsI36Tlkc3wz5DmAboDCgiRpumDm9yi4nK6AwsIx9y6_LO2kdbeAboDCwiHgpeEiKvw4_4BugMLCLXksJra1aWw8gG6AwsIwIbE9ZKo08CRAboDCgisz5eovr_UjXe6AwoItteakO-ykeo4ugMLCLuanJHAiP7whAG6Aw8SDVJESGJiNUdQeFhGMXe6AwoIyMLBy9bHir99ugMKCODTm7Dvpab6fLoDCgid3eXX6-72thS6AwsIn7eZ4MbA3I6qAboDCgiO3YHL3J6c2Qe6AwsI3Ljn36m3tK3CAQ%3D%3D","watchEndpointSupportedOnesieConfig":{"html5PlaybackOnesieConfig":{"commonConfig":{"url":"https://rr2---sn-3u-nf0s.googlevideo.com/initplayback?source=youtube&orc=1&oeis=1&c=WEB&oad=3200&ovd=3200&oaad=11000&oavd=11000&ocs=700&oewis=1&oputc=1&ofpcc=1&rbqsm=fr&msp=1&odeak=1&odepv=1&osfc=1&id=1db6f918fc57175c&ip=121.136.79.187&initcwndbps=1476250&mt=1663062312&oweuc="}}}}},"badges":[{"metadataBadgeRenderer":{"style":"BADGE_STYLE_TYPE_SIMPLE","label":"4K","trackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA="}},{"metadataBadgeRenderer":{"style":"BADGE_STYLE_TYPE_SIMPLE","label":"자막","trackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","accessibilityData":{"label":"자막"}}}],"ownerBadges":[{"metadataBadgeRenderer":{"icon":{"iconType":"CHECK_CIRCLE_THICK"},"style":"BADGE_STYLE_TYPE_VERIFIED","tooltip":"인증됨","trackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","accessibilityData":{"label":"인증됨"}}}],"ownerText":{"runs":[{"text":"JYP Entertainment","navigationEndpoint":{"clickTrackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","commandMetadata":{"webCommandMetadata":{"url":"/c/JYPEntertainment","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UCaO6TYtlC8U5ttz62hTrZgg","canonicalBaseUrl":"/c/JYPEntertainment"}}}]},"shortBylineText":{"runs":[{"text":"JYP Entertainment","navigationEndpoint":{"clickTrackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","commandMetadata":{"webCommandMetadata":{"url":"/c/JYPEntertainment","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UCaO6TYtlC8U5ttz62hTrZgg","canonicalBaseUrl":"/c/JYPEntertainment"}}}]},"trackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApBA3K7c4o-jvtsd","showActionMenu":false,"shortViewCountText":{"accessibility":{"accessibilityData":{"label":"조회수 1억회"}},"simpleText":"조회수 1억회"},"menu":{"menuRenderer":{"items":[{"menuServiceItemRenderer":{"text":{"runs":[{"text":"현재 재생목록에 추가"}]},"icon":{"iconType":"ADD_TO_QUEUE_TAIL"},"serviceEndpoint":{"clickTrackingParams":"CL8CEP6YBBgQIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true}},"signalServiceEndpoint":{"signal":"CLIENT_SIGNAL","actions":[{"clickTrackingParams":"CL8CEP6YBBgQIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","addToPlaylistCommand":{"openMiniplayer":true,"videoId":"Hbb5GPxXF1w","listType":"PLAYLIST_EDIT_LIST_TYPE_QUEUE","onCreateListCommand":{"clickTrackingParams":"CL8CEP6YBBgQIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/playlist/create"}},"createPlaylistServiceEndpoint":{"videoIds":["Hbb5GPxXF1w"],"params":"CAQ%3D"}},"videoIds":["Hbb5GPxXF1w"]}}]}},"trackingParams":"CL8CEP6YBBgQIhMIwtT4t7-R-gIVtEsPAh2ysQKQ"}}],"trackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","accessibility":{"accessibilityData":{"label":"작업 메뉴"}}}},"channelThumbnailSupportedRenderers":{"channelThumbnailWithLinkRenderer":{"thumbnail":{"thumbnails":[{"url":"https://yt3.ggpht.com/fxlLUAZQPfYiK_6B-8ZQDbT1C_o-LkTTT75RO_JZ_78SbTSrNrRHB-X7nJkUJYKUb2XOos_Tnw=s68-c-k-c0x00ffffff-no-rj","width":68,"height":68}]},"navigationEndpoint":{"clickTrackingParams":"CLwCENwwGAAiEwjC1Pi3v5H6AhW0Sw8CHbKxApA=","commandMetadata":{"webCommandMetadata":{"url":"/c/JYPEntertainment","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UCaO6TYtlC8U5ttz62hTrZgg","canonicalBaseUrl":"/c/JYPEntertainment"}},"accessibility":{"accessibilityData":{"label":"채널로 이동"}}}},"thumbnailOverlays":[{"thumbnailOverlayTimeStatusRenderer":{"text":{"accessibility":{"accessibilityData":{"label":"3분 5초"}},"simpleText":"3:05"},"style":"DEFAULT"}},{"thumbnailOverlayToggleButtonRenderer":{"isToggled":false,"untoggledIcon":{"iconType":"WATCH_LATER"},"toggledIcon":{"iconType":"CHECK"},"untoggledTooltip":"나중에 볼 동영상","toggledTooltip":"추가됨","untoggledServiceEndpoint":{"clickTrackingParams":"CL4CEPnnAxgEIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/browse/edit_playlist"}},"playlistEditEndpoint":{"playlistId":"WL","actions":[{"addedVideoId":"Hbb5GPxXF1w","action":"ACTION_ADD_VIDEO"}]}},"toggledServiceEndpoint":{"clickTrackingParams":"CL4CEPnnAxgEIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/browse/edit_playlist"}},"playlistEditEndpoint":{"playlistId":"WL","actions":[{"action":"ACTION_REMOVE_VIDEO_BY_VIDEO_ID","removedVideoId":"Hbb5GPxXF1w"}]}},"untoggledAccessibility":{"accessibilityData":{"label":"나중에 볼 동영상"}},"toggledAccessibility":{"accessibilityData":{"label":"추가됨"}},"trackingParams":"CL4CEPnnAxgEIhMIwtT4t7-R-gIVtEsPAh2ysQKQ"}},{"thumbnailOverlayToggleButtonRenderer":{"untoggledIcon":{"iconType":"ADD_TO_QUEUE_TAIL"},"toggledIcon":{"iconType":"PLAYLIST_ADD_CHECK"},"untoggledTooltip":"현재 재생목록에 추가","toggledTooltip":"추가됨","untoggledServiceEndpoint":{"clickTrackingParams":"CL0CEMfsBBgFIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true}},"signalServiceEndpoint":{"signal":"CLIENT_SIGNAL","actions":[{"clickTrackingParams":"CL0CEMfsBBgFIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","addToPlaylistCommand":{"openMiniplayer":true,"videoId":"Hbb5GPxXF1w","listType":"PLAYLIST_EDIT_LIST_TYPE_QUEUE","onCreateListCommand":{"clickTrackingParams":"CL0CEMfsBBgFIhMIwtT4t7-R-gIVtEsPAh2ysQKQ","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/playlist/create"}},"createPlaylistServiceEndpoint":{"videoIds":["Hbb5GPxXF1w"],"params":"CAQ%3D"}},"videoIds":["Hbb5GPxXF1w"]}}]}},"untoggledAccessibility":{"accessibilityData":{"label":"현재 재생목록에 추가"}},"toggledAccessibility":{"accessibilityData":{"label":"추가됨"}},"trackingParams":"CL0CEMfsBBgFIhMIwtT4t7-R-gIVtEsPAh2ysQKQ"}},{"thumbnailOverlayNowPlayingRenderer":{"text":{"runs":[{"text":"지금 재생 중"}]}}}],"richThumbnail":{"movingThumbnailRenderer":{"movingThumbnailDetails":{"thumbnails":[{"url":"https://i.ytimg.com/an_webp/Hbb5GPxXF1w/mqdefault_6s.webp?du=3000&sqp=CIyMgZkG&rs=AOn4CLARbEaZjYuZB68PGF6-UGWRhAwGGQ","width":320,"height":180}],"logAsMovingThumbnail":true},"enableHoveredLogging":true,"enableOverlay":true}},"detailedMetadataSnippets":[{"snippetText":{"runs":[{"text":"ITZY","bold":true},{"text":" “"},{"text":"SNEAKERS","bold":true},{"text":"” M/V @ITZY ITZY \"CHECKMATE\" https://itzy.lnk.to/CHECKMATE ALBUM RELEASE 2022.7.15 ..."}]},"snippetHoverText":{"runs":[{"text":"동영상 설명에서 가져옴"}]},"maxOneLine":false}],"searchVideoResultEntityKey":"EgtIYmI1R1B4WEYxdyDnAigB"}}

• 이를 분석해보면 아래와 같은 값들을 추출해 낼 수 도 있음
• 비디오 아이디 : Hbb5GPxXF1w
• 썸네일 이미지 URL : https://i.ytimg.com/vi/Hbb5GPxXF1w/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBMf-AMRYMROcA-AGjFoA0U-K4BrQ
• 제목 : ITZY “SNEAKERS” M/V @ITZY
• 시간 : 3분 5초
• 조회수 : 107,091,526회
• 링크 : /watch?v=Hbb5GPxXF1w

4.2. 유튜브 검색값 바꿔서 전송

• 네이버와 마찬가지로 여기서 내가 검색한 키워드인 'itzy sneakers'를 찾아서 바꿔줘야 함

• 위와 같이 Header을 다 지우고 전송해도 같은 결과가 돌아옴 => Header가 의미 없음을 의미
• Accept-Encoding: gzip, deflate, br은 response 압축을 위해 남겨둠
• 이처럼 Request Body와 URL의 요소들도 지우고 전송했을 때 값이 제대로 넘어오면 제거하는 식의 작업을 반복해서 찾아 본 결과 아래의 정보값의 전송만으로도 정확한 결과값을 받아올 수 있었음

• 이제 마지막으로 query 값으로 'itzy sneakers'가 아닌 'newjeans attention'을 넣고 전송하면 아래와 같이 원하는 값들을 받아올 수 있었음