1️⃣ HTTP
1) HTTP
: Hyper Text Transfer Protocol
: 서버와 클라이언트의 데이터 교환을 요청(Request)과 응답(Response) 형식으로 정의한 프로토콜
클라이언트가 서비스 포트에 HTTP 요청 전송 → 서버 해석, 검토 → 응답 반환
⦁ 네트워크 포트 : 네트워크에서 서버와 클라이언트가 정보를 교환하는 추상화된 장소
⦁ 서비스 포트 : 네트워크 포트 중에서 특정 서비스가 점유하고 있는 포트
⦁ 포트 데이터 교환 방식 : 전송계층의 프로토콜 (ex. TCP, UDP) / 같은 방식 사용해야!
HTTP의 서비스포트가 TCP/80 이다 → HTTP 서비스를 80번 포트에서 TCP로 제공!
특권포트 -> SSH : 22번 | HTTP : 80번 | HTTPS : 443
2) HTTP 메시지
📌 시작줄
1. HTTP 요청
: 메소드, 요청 URL, HTTP 버전 / 띄어쓰기 구분
- 메소드 : URI가 가리키는 리소스 대상, 서버가 수행 바라는 동작 표현
⦁ GET : 리소스를 가져올 때 (ex.하이퍼링크 클릭)
⦁ POST : 리소스로 데이터를 내보낼 때 (ex.게시판 글 작성)
- 요청 URI : 메소드의 대상
- HTTP 버전 : 클라이언트가 사용하는 HTTP 프로토콜의 버전
2. HTTP 응답
: HTTP 버전, 상태코드, 처리 사유 / 띄어쓰기 구분
- HTTP 버전 : 서버에서 사용하는 HTTP 프로토콜의 버전
- 상태코드 : 요청에 대한 처리 결과를 세 자릿수로
| 상태코드 | 설명 | 대표 예 |
| 1xx | 요청을 제대로 받았고, 처리가 진행 중 | |
| 2xx | 요청이 제대로 처리됨 | 200: 성공 |
| 3xx | 요청을 처리 위해 클라이언트 추가 동작 필요 | 302: 다른 URL로 갈 것 |
| 4xx | 클라이언트가 잘못된 요청을 보내 처리 실패 | 400: 요청이 문법에 맞지 않음 404: 리소스가 없음 |
| 5xx | 클라이언트 요청 유효, But 서버 에러가 발생 → 처리 실패 | 500: 요청을 처리하다가 에러가 발생함 |
- 처리 사유 : 상태코드 발생 이유
📌 헤더 : 필드와 값으로 구성 / HTTP 메시지 or 바디의 속성 나타냄 / 0개일수도 있음
📌 바디 : 클라이언트 or 서버에게 전송하려는 데이터로 구성
2️⃣ HTTPS
: TLS 프로토콜을 도입하여 암호화 → 정보 유출 취약점 보완
공격자에 의해 메세지가 탈취되어도 해석이 불가하여 안전
3️⃣ 웹 브라우저
📌이용자가 주소창에 ’dreamhack.io’를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작
- 웹 브라우저의 주소창에 입력된 주소(dreamhack.io)를 해석 (URL 분석)
- dreamhack.io에 해당하는 주소 탐색 (DNS 요청)
- HTTP를 통해 dreamhack.io에 요청
- dreamhack.io의 HTTP 응답 수신
- 리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)
1) URL
: 웹에 있는 리소스의 위치 표현
| 요소 | 설명 |
| Scheme | 웹 서버와 어떤 프로토콜로 통신할 것인지 |
| Host | Authority의 일부. 접속할 웹 서버의 주소에 대한 정보 |
| Port | Authority의 일부. 접속할 웹 서버의 포트에 대한 정보 |
| Path | 접근할 웹 서버의 리소스 경로. '/'로 구분 |
| Query | 웹 서버에 전달하는 파라미터. URL에서 '?' 뒤에 위치 |
| Fragment | 메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보. '#' 문자 뒤에 위치 |
2) 도메인 이름
URL 구성 요소 중 Host는 도메인 이름, IP 주소의 값 가질 수 O
IP 주소 : 네트워크 상에서 통신 이루어질 때 장치 식별에 사용
→ 사람이 사용하기 어려움 → 도메인 이름 사용
3) 웹 렌더링
: 서버로부터 받은 리소스를 이용자에게 시각화하는 행위
웹 렌더링 엔진에 이해 이뤄짐. / 사파리 : 웹킷, 크롬 : 블링크, 파이어폭스 : 개코
4️⃣ 개발자 도구
| 🔴 빨간색 | 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar) |
| 🟠 주황색 | 기능을 선택하는 패널. ⦁ Elements: 페이지 구성하는 HTML 검사 ⦁ Console: 자바 스크립트 실행&결과 확인 ⦁ Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인&디버깅 ⦁ Network: 서버와 오가는 데이터를 확인 ⦁ PerformanceMemoryApplication: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인 ⦁ Security ⦁ Lighthouse |
| 🟡 노란색 | 현재 페이지에서 발생한 에러 및 경고 메시지 |
| 🟢 녹색 | 개발자 도구 설정 |
1) 요소 검사
: 특정 요소의 개괄적 정보 파악&관련 코드 편리하게 찾을 수 O
2) 디바이스 툴바
/*자세히 몰랐던 부분만 정리했어용*/
1. Sources : 현재 페이지 구성하는 웹 리소스 확인&디버깅
🔴현재 페이지의 리소스 파일 트리, 파일 시스템
🟠선택한 리소스 상세 보기
🟢디버깅 정보
⦁ Watch: 원하는 자바스크립트 식을 입력 → 코드 실행 과정에서 해당 식의 값 변화를 확인
⦁ Call Stack: 함수들의 호출 순서를 스택 형태로 표시.
ex. A → B → C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치
⦁ Scope: 정의된 모든 변수들의 값을 확인
⦁ Breakpoints: 브레이크포인트들을 확인, 각각을 활성화 또는 비활성화
2. NETWORK : 서버와 오가는 데이터 확인
🔴 로깅 중지 및 로그 전체 삭제
🟠 로그 필터링 및 검색
🟡 네트워크 로그
🟢 옵션
⦁ Preserve log: 새로운 페이지로 이동해도 로그 삭제X
⦁ Disable cache: 이미 캐시된 리소스도 서버에 요청
🔵 네트워크 로그 요약 정보
5️⃣ 적용문제
문제 링크 : https://dreamhack.io/wargame/challenges/267
devtools-sources
개발자 도구의 Sources 탭 기능을 활용해 플래그를 찾아보세요. 플래그 형식은 DH{...} 입니다. Reference Tools: Browser DevTools
dreamhack.io
아놔 너무 간단해서 해설을 쓸 것도 없었다
개발자도구에서 FLAG 형식을 검색하면 된다