*해당 모든 글은 Dreamhack.io (드림핵) 에 올라와 있는 자료를 토대로 정리한 것.
이번 코스에서는 개발자 도구와 각 구성 요소에 대해 배운다. 코스에서 배우는 핵심 개념은 다음과 같다.
• 개발자 도구(DevTools)
개발자 도구 ( DevTools )
웹 개발을 할 때는 프론트엔드의 자바스크립트나 백엔드 API에서 버그가 발생하는 경우가 잦고, 적용한 CSS가 맘에 들지 않을 때도 많다. 이런 경우에는 코드 에디터로 원하는 부분을 수정하고 브라우저로 결과를 확인해야 하는데, 만족스럽지 않으면 에디터와 브라우저를 오가며 수정을 반복해야 한다. 특히 CSS는 변경 결과가 어떻게 반영될 지 쉽게 예상이 되지 않아서 수정 과정이 더욱 번거로워지기도 한다.
브라우저 개발자 도구(Devtools)는 이러한 불편함을 대폭 감소시켜준다. HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공한다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있다.
개발자 도구가 웹 서비스를 진단하는데 도구인 만큼, 웹 취약점을 이용하려는 공격자에게도 유용하게 사용될 수 있다. 앞으로의 코스에서도 자주 등장할 것이므로, 이번 코스에서는 웹 해킹에 자주 사용되는 개발자 도구의 기능에 대해 배우고, 간단한 실습으로 사용법을 익혀보겠다.
개발자 도구 사용법은 브라우저를 열고 F12 를 누른다.
Figure 1. 개발자 도구 레이아웃
🔴 빨간색
요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)
🟠 주황색
기능을 선택하는 패널. 코스에서는 굵게처리된 기능들만을 다룹니다.
- Elements: 페이지를 구성하는 HTML 검사
- Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음
- Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음
- Network: 서버와 오가는 데이터를 확인할 수 있음
- Performance : 웹 페이지의 성능을 측정하고 관련 정보를 제공합니다. 로딩 시간, 자원 사용량, 이벤트 처리 속도 등을 확인하여 성능 개선에 도움을 준다.
- Memory : 웹 페이지의 메모리 사용에 관련된 정보를 표시합니다. 메모리 양, 누수 여부, 할당 및 해제 시점 등을 확인하여 메모리 관리에 도움을 준다.
- Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음
- Security :
- Lighthouse
🟡 노란색
현재 페이지에서 발생한 에러 및 경고 메시지
🟢 녹색
개발자 도구 설정
요소 검사
빨간색 동그라미 친 부분을 누르고 웹 페이지에서 원하는 부분에 마우스를 올리면
대상의 정보가 출력된다. 그 상태에서 클릭하면 이와 관련된 HTML 코드가 하이라이팅 된다.
디바이스 툴바
디바이스 툴바(Device Toolbar)를 활용하면 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있다.
현대에는 웹에 접속하는 장치가 데스크톱, 태블릿, 스마트폰, 노트북 등으로 다양해지고 있으며, 웹 페이지가 렌더링되어야 할 화면 비율도 가지각색으로 많아지고 있다.
개발자는 모든 이용자에게 좋은 웹 경험을 줘야하므로, 자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검해봐야 한다.
디바이스 툴바를 이용하면 이러한 점검을 쉽게 진행할 수 있다.
Elements
현재 페이지를 구성하는 HTML 을 읽을 수 있고
코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면, 수정할 수 있다.
Console
콘솔(Console)은 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고,
이용자가 입력한 자바스크립트 코드를 실행도 해주는 도구이다.
F12로 개발자 도구를 키고 Console 칸에 들어가서 alert("hello"); 를 입력해 현재 사이트에서 hellow 라는 알람을
띄워보자.
hello라는 알람이 잘 띄워지는 모습.
Sources
현재 페이지를 구성하는 웹 리소스들을 확인 할 수 있다.
Figure 4. Sources 레이아웃
| 🔴현재 페이지의 리소스 파일 트리, 파일 시스템 |
| 🟠선택한 리소스 상세 보기 |
🟢디버깅 정보
|
Sources: Debug
Source 탭에서는 원하는 자바스크립트를 디버깅 할 수 도 있다.
https://dreamhack-lecture.s3.ap-northeast-2.amazonaws.com/uploads/web-devtools/debug.html
JS Debug
dreamhack-lecture.s3.ap-northeast-2.amazonaws.com
드림 핵에서 제공해주는 디버깅 실습 사이트이다. name 과 num칸에 넣는 입력값에 따라 실행 코드가 바뀌는 간단한 사이트이다.
먼저 F12를 눌러 개발자 도구를 열어 source 칸에 들어간다.
해당 html 구조를 보니
만약 name 이 'dreamhack' 이고 num이 31337이면
congratulations! 라는 알람을 띄우게 한다.
먼저 원하는 라인에 숫자를 눌러 브레이크 포인트를 걸어놓고 실행후
Scope 칸에서 name과 num을 dreamhack, 31337 로 바꾸어준다
Network
서버와 오가는 네트워크를 확인할 수 있습니다.
| 🔴 로깅 중지 및 로그 전체 삭제 |
| 🟠 로그 필터링 및 검색 |
🟢 옵션
|
| 🟡 네트워크 로그 |
| 🔵 네트워크 로그 요약 정보 |
Application
쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있습니다.
Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있습니다.
'드림핵 정리' 카테고리의 다른 글
| 무작위 비밀번호 생성 코드 (1) | 2023.11.04 |
|---|---|
| 드림 핵 - 웹 해킹 - cookie session ( Background: Cookie & Session ) (2) | 2023.07.01 |
| 드림 핵 - 웹 해킹 - 웹 브라우저 ( Background : Web Browser ) (0) | 2023.06.27 |
| 드림 핵 - 웹 해킹 - 웹 기본 상식 ( Background: HTTP/HTTPS ) (0) | 2023.06.26 |
| 드림 핵 - 웹 해킹 - 웹 기본 상식 ( Background: Web ) (0) | 2023.06.25 |