개발자 도구
브라우저 개발자 도구(DevTools)는 웹 개발 및 해킹 활용 할 수 있습니다.
웹 개발 과정에서 프론트엔드의 JavaScript 버그, 백엔드 API 문제, 혹은 CSS 등 다양한 문제가 발생할 수 있습니다. 이를 해결하려면 IDE에서 코드 수정 후 브라우저에서 결과를 확인하는 반복 작업이 필요하며, 특히 CSS는 변경 결과를 예측하기 어려워 수정 과정이 번거로울 수 있습니다.
브라우저 개발자 도구(DevTools)는 이러한 불편함을 해소하는 강력한 도구입니다.
주요 기능
1. HTML/CSS 실시간 수정
- 브라우저에서 직접 코드를 수정하고 즉시 결과 확인 가능
- JavaScript 디버깅
- 코드의 동작을 분석하고 문제를 추적
- HTTP 요청 분석
- 서버와 주고받는 HTTP 패킷 확인으로 프로토콜 문제 진단
문제 설명: 개발자 도구를 활용한 플래그 획득
목표: 개발자 도구(DevTools)의 Sources 탭을 활용하여 플래그를 찾기.
웹 페이지 열기
브라우저에서 웹 페이지를 띄운 후, 개발자 도구(DevTools)를 열기.
단축키: F12 또는 Ctrl+Shift+I (Cmd+Option+I on Mac).
Sources 탭 탐색
개발자 도구에서 Sources 탭으로 이동.
페이지에서 로드된 파일 목록을 확인.
소스 코드 확인
각 파일의 소스 코드를 열어 플래그를 포함한 정보를 탐색.
일반적으로 숨겨진 파일, 주석, 또는 JavaScript 변수에 플래그가 포함되어 있을 가능성이 높음.
플래그 획득
