[Dreamhack] Web Hacking STAGE 2

STAGE 2. Background: HTTP/HTTPS

인코딩 표준
1) 아스키
- 알파벳과 특수 문자 등을 표현함 ex) 1000001을 아스키로 변환하면 A가 됨
2) 유니코드
- 모든 언어의 문자를 하나의 표준에 담겠다는 목표로 제정되었음
- 한 문자는 최대 32비트로 표현되어 약 42억개를 표현 가능함
- 최근에는 각종 이모지들도 유니코드에 포함되고 있음

프로토콜
- 규격화된 상호작용에 적용되는 약속
- 각 통신 주체가 교환하는 데이터를 명확히 해석할 수 있도록 문법(syntax)을 포함함
- 표준 통신 프로토콜의 예) TCP/IP, HTTP, FTP 등

HTTP(Hyper Text Transfer Protocol)
- 서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜
- 웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시키는데, 이 포트는 보통 TCP/80 또는 TCP/8080
- 네트워크 포트 : 네트워크에서 서버와 클라이언트가 정보를 교환하는 추상화된 장소를 의미
- 포트로 데이터를 교환하는 방식은 전송 계층의 프로토콜을 따름. 대표적으로 TCP와 UDP

- 헤드 : 메시지에 대한 정보. 헤드의 끝에는 CRLF가 한 줄 있음
- 바디 : 전송하려는 데이터가 담김

HTTP 요청

시작 줄은 메소드, 요청 URI, HTTP 버전으로 구성됨
- 메소드 : URI가 가리키는 리소스를 대상으로, 서버가 수행하길 바라는 동작을 나타냄
- GET : 리소스를 가져오라는 메소드
- POST : 리소스로 데이터를 보내라는 메소드. 전송할 데이터는 HTTP 바디에 포함됨. ex) 로그인할 때 입력하는 ID와 비밀번호, 게시판에 작성하는 글 등

HTTP 응답

상태 코드	설명
1xx	요청을 제대로 받았고, 처리가 진행 중임
2xx	요청이 제대로 처리됨	200 : 성공
3xx	요청을 처리하려면, 클라이언트가 추가 동작을 취해야 함	302 : 다른 URL로 갈 것
4xx	클라이언트가 잘못된 요청을 보내어 처리에 실패	400 : 요청이 문법에 맞지 않음 403 : 클라이언트가 리소스에 요청할 권한이 없음 404 : 리소스가 없음
5xx	클라이언트의 요청은 유효하지만, 서버에 에러가 발생하여 처리에 실패	500 : 요청을 처리하다가 에러가 발생함 503 : 서버가 과부하로 인해 요청을 처리할 수 없음

 

HTTPS

- TLS(Transport Layer Security)를 이용하여 HTTP의 약점을 보완함 프로토콜

 

---

 

STAGE 2. Background: Web

 

웹

- HTTP를 이용하여 정보를 공유하는 서비스

- 프론트엔드 : 이용자의 요청을 받는 부분으로, 이용자에게 직접 보여지는 부분. 웹 리소스로 구성됨

- 백엔드 : 요청을 처리하는 부분

 

웹 리소스

- HTML : 웹 문서의 뼈와 살을 담당, 태그와 속성을 통한 구조화된 문서 작성을 지원함

- CSS : 웹 문서의 생김새를 지정함

- JavaScript : 웹 문서의 동작을 정의함

 

---

 

STAGE 2. Background: Web Browser

 

웹 브라우저

- HTTP/S로 이용자와 웹 서버의 통신을 중개하며, 서버로부터 전달받은 다양한 웹 리소스들을 가공해 이용자에게 효과적으로 전달함. 이용자가 다양한 프로토콜들을 알지 못해도 쉽게 웹을 사용할 수 있도록 도와줌 

대표적인 웹 브라우저들

 

URL (Uniform Resource Locator)

- 웹에 있는 리소스의 위치를 표현하는 문자열

Domain Name
- IP 주소는 사람이 외우기 어려우므로 일반적으로 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용함
- 브라우저는 DNS에 Domain Name을 질의하고, DNS가 응답한 IP 주소를 사용함
- DNS (Domain Name Server) : Host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환함
- nslookup 명령어

웹 렌더링 (Web Rendering)
- 웹 브라우저가 서버로부터 받은 리소스를 이용자에게 시각화하는 행위
- 웹 렌더링 엔진에 의해 이루어짐 ex) 사파리 - 웹킷 / 크롬 - 블링크 / 파이어폭스 - 개코

---

STAGE 2. Tools: Browser DevTools

브라우저 개발자 도구(Devtools)
- 웹 페이지 진단, 웹 해킹 등에 사용됨
- HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있음
- 자바스크립트 코드를 대상으로 디버거를 제공함
- 서버와 오가는 HTTP 패킷을 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견 가능
- F12

- 요소 검사 : 특정 요소의 개괄적인 정보를 파악하고, 관련 코드를 쉽게 찾을 수 있음
- 디바이스 툴바 : 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경 가능
- Elements : HTML 읽기와 수정 가능 (코드 선택 상태로 F2 또는 더블 클릭)
- console.log : Console 탭에서 특정 변수의 값을 콘솔 화면에 출력할 때 사용하는 함수

페이지 소스 보기
- Windows/Linux : Ctrl + U

Secret browsing mode
- 새로운 브라우저 세션이 생성되며, 브라우저를 종료했을 때 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한이 저장되지 않음
- Windows/Linux : Ctrl + Shift + N

---

STAGE 2. devtools-sources

개발자 도구의 Sources 탭 기능을 활용한 워게임
다운받은 project.html에서 ctrl + f 기능으로 플래그를 찾을 수 있음