DreamHack Web Hacking Stage 1, 2

Stage 2 - Background : Web

웹

• 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스 
• 웹 서버 (Web Server) : 정보를 제공하는 주체 
• 웹 클라이언트 (Web Client) : 정보를 받는 이용자 
• 프론트엔드 (Front-end) : 이용자의 요청을 받는 부분
• 백엔드 (Back-end) : 요청을 처리하는 부분 
• 웹 리소스 : 웹 서버가 제공하는 정보 자원 
• 웹 서비스 : 웹 상에서 제공되는 서비스 

 

웹 리소스 

• 고유의 URI (Uniform Resource Indicator)를 가지며 이를 이용하여 식별된다. 
• 웹의 프론트엔드를 구성하는 대표적인 웹 리소스 : HTML, CSS, JS 등 

 

웹 클라이언트와 서버의 통신 과정 

1. 클라이언트 : 이용자가 브라우저를 이용하여 웹 서버에 접속한다. 
2. 클라이언트 : 브라우저는 이용자의 요청을 해석(URL 분석 후 해당하는 주소 탐색 > DNS 요청)하여 HTTP 형식으로 웹 서버에 리소스를 요청한다. 
3. 서버 : HTTP로 전달된 이용자의 요청을 해석한다. 
4. 서버 : 해석한 이용자의 요청에 따라 적절한 동작을 한다. 리소스를 요청하는 것이라면, 이를 탐색한다. 
5. 서버 : 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달한다. 
6. 클라이언트 : 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화(렌더링)하여 이용자에게 보여준다. 

 

Background : Web Browser

웹 브라우저 

• 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 보여준다. 
• 뛰어난 이용자 경험 (User eXperience, UX)을 제공하는 소프트웨어 중 하나 

 

URL (Uniform Resource Locator)

• 웹에 있는 리소스의 위치를 표현하는 문자열 
• 브라우저로 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에게 요청한다. 
• 구성 요소 : Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등 

Scheme	웹 서버와 어떤 프로토콜로 통신할지 나타낸다. ex) http, https, mailto, tel 등
Host	Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보를 가짐 ex) 도메인, IP Address
Port	Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보를 가지고 있다.
Path	접근할 웹 서버의 리소스 경로를 '/'로 구분된다. > 웹 브라우저가 연결하려고 하는 리소스에 대한 경로
Query	웹 브라우저가 웹 서버에 전달하는 파라미터이며 URL에서 '?' 뒤에 위치한다.
Fragment	웹 브라우저만 가지고 있는 데이터로, 메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보를 담고 있다.  '#' 문자 뒤에 위치한다.

 

Domain Name 

• IP Address : 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소 
• 숫자로 이루어진 IP Address는 외우기 어려우므로, 일반적으로 문자인 Domain Name을 사용한다. 

Domain Name을 Host 값으로 이용 

1. 브라우저 > Domain Name Server(DNS)에 Domain Name 질의 
2. DNS > 그에 맞는 IP Address로 응답하여 사용 

 

 

 

Domain Name에 대한 정보 > nsloopup 명령어 사용 

$ nslookup _____.com
Server:		8.8.8.8
Address:	8.8.8.8#53

Non-authoritative answer:
Name:	_____.com
Address: 93.184.216.34

 

웹 렌더링 (Web Rendering)

• 서버로부터 받은 리소스를 이용자에게 시각화하는 행위 
• 웹 렌더링 엔진에 이루어지며 브라우저별로 서로 다른 엔진을 사용한다. (사파리 > 웹킷, 크롬 > 블링크, 파이어폭스 > 개코)
• 이용자의 요청이 들어오면 서버는 웹 리소스들로 응답하고, 웹 브라우저는 이용자가 볼 수 있는 형태로 가공하여 화면에 출력한다. 

 

Background:HTTP/HTTPS

인코딩 (Encoding)

• 컴퓨터에서 문자를 0과 1로 표현하는 것
• 종류 : 아스키(ASCII), 유니코드(Unicode)
• 유니코드에서 한 문자는 최대 32개의 비트로 표현됨.
  32비트로 표현할 수 있는 정보의 개수 : 2(32), 대략 42억
• 인코딩을 이용하면 우리가 쓰는 문장을 컴퓨터에 저장하고 표현할 수 있으며 네트워크를 이용하여 인코딩한 정보를 다른 사람들과 쉽게 교환할 수 있다. 

 

통신 프로토콜 (Protocol)

• 클라이언트의 행위 > 요청(request), 서버의 행위 > (response)
• 많은 컴퓨터 통신 프로토콜은 각 통신 주체가 교환하는 데이터(메시지)를 명확히 이해할 수 있도록 문법(Syntax)을 포함한다. 문법에 어긋나는 메시지는 잘못 전송된 것으로 취급하여 무시된다.
• 종류 : TCP/IP (네트워크 통신), HTTP (웹 애플리케이션), TCP (파일을 주고 받을 때) 등

 

HTTP (Hyper Text Transfer Protocol)

• 서버와 클라이언트의 데이터 교환을 요청(request)과 응답(response) 형식으로 정의한 프로토콜
• 웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시킨다. 일반적으로 TCP/80 또는 TCP/8080이다. 
• 클라이언트가 서비스 포트에 HTTP 요청을 전송하면 이를 해석하여 적절한 응답을 반환한다.

* 네트워크 포트 (Network Port) : 네트워크에서 서버와 클라이언트가 정보를 교환하는 추상화된 장소

* 서비스 포트 (Service Port) : 네트워크 포트 중에서 특정 서비스가 점유하고 있는 포트

ex) HTTP의 서비스 포트가 TCP/80이라고 하면, HTTP 서비스를 80번 포트에서 TCP로 제공하고 있다는 뜻

- 포트로 데이터를 교환하는 방식은 OSI 7계층 중 전송 계층(Transport Layer)의 프로토콜을 따르며 대표적으로는 TCP와 UDP가 있다. TCP로 데이터를 전송하려는 서비스에 UDP 클라이언트가 접근하면 데이터가 교환되지 않는다. (반대도 마찬가지) 그래서 서비스 포트를 표기할 때는 서비스가 사용하는 전송 계층 프로토콜을 같이 표기하기도 한다.

- 포트 0-1023번 포트는 잘 알려진 포트(Well-known port) 또는 특권 포트(Privlleged port)라고 한다. 각 포트 번호에 유명한 서비스가 등록되어 있으며 해당 포트의 서비스를 실행하려면 관리자 권한이 필요하다. 따라서 클라이언트는 이 대역에서 실행 중인 서비스들은 관리자의 것이라고 신뢰할 수 있다.

 

HTTP 메시지

• 클라이언트가 전송하는 HTTP 요청, 서버가 반환하는 HTTP 응답을 말하며 HTTP 헤드와 바디로 구성된다. 

HTTP 헤드

• 각 줄은 CRLF로 구분되며 첫 줄은 시작 줄(Start-line), 나머지 줄은 헤더(Header)라고 부른다. 헤드의 끝은 CRLF 한 줄로 나타낸다.
• 헤더 : 필드, 값으로 구성

HTTP 바디

• 헤드의 끝을 나타내는 CRLF 뒤. 모든 줄을 의미함. 클라이언트나 서버에게 전송하려는 데이터가 담김

ex) HTTP 메시지

HTTP 헤드	시작줄	POST /login HTTP/1.1
	헤더	Connection : Keep-alive User-Agent : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebkit/537.36(KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 content-length:67 content-type : application/json
빈줄
HTTP 바디	{email : kim@dreamhack.io, password:"dreamhack"}

 

HTTP 요청

• 서버에게 특정 동작을 요구하는 메시지
• 시작줄 > 메소드(Method), 요청 URI(Request-URI), HTTP 버전으로 구성
• 메소드 : URI가 가리키는 리소스 대상. 서버가 수행하길 바라는 동작

GET	리소스를 가져오라는 메소드. 이용자가 브라우저에 웹 서버의 주소를 입력하면 새로운 페이지를 렌더링하기 위해 리소스가 필요하다. 이때 브라우저는 GET 요청을 서버에 전송하여 리소스를 받아온다.
POST	리소스로 데이터를 보내라는 메소드. 전송할 데이터는 보통 HTTP 바디에 포함된다. ex) 로그인할 때 입력하는 ID, 비밀번호 등이 POST로 서버에 보내진다.

• 요청 URI : 메소드의 대상
• HTTP 버전 : 클라이언트가 사용하는 HTTP 프로토콜의 버전을 나타낸다.

 

HTTP 응답

• HTTP 요청에 대한 결과를 반환하는 메시지. 클라이언트에게 전송할 리소스가 응답에 포함된다.
• HTTP 버전 : 서버에서 사용하는 HTTP 프로토콜의 버전을 나타낸다.
• 상태 코드 : 요청에 대한 처리 결과를 세 자릿수로 나타낸다.
• 처리 사유 : 상태 코드가 발생한 이유를 짧게 기술한 것

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

 

HTTPS (HTTP over Secure socket Layer)

• HTTP 응답과 요청은 평문으로 전달되어 누군가 중간에 가로챈다면 중요한 정보가 유출될 수 있다. > HTTPS는 TLS(Transport Layer Security) 프로토콜을 도입하여 문제점을 보완한다.
• TLS : 서버와 클라이언트 사이에 오가는 HTTP 메시지 암호화 > 메시지 해석이 불가능하며 도청과 변조로부터 보호된다.
• 웹 서버의 URL이 http://로 시작되면 HTTP, https://로 시작되면 HTTPS 프로토콜을 사용한다는 뜻이다. 

 

Background: Web Broswer

웹 브라우저 : 서버와 HTTP 통신을 대신 해주고, 수신한 리소스를 시각화함.

ex) 이용자가 주소창에 dreamhack.io를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작

1. 웹 브라우저의 주소창에 입력된 주소를 해석 (URL 분석)

2. dreamhack.io에 해당하는 주소 탐색 (DNS 요청)

3. HTTP를 통해 dreamhack.io에 요청

4. dreamhack.io의 HTTP 응답 수신

5. 리소스 다운로드 및 웹 렌더링(HTML, CSS, JS)

---

Tools : Browser DevTools

크롬에서 개발자 도구 실행 단축키 : F12

Elements	페이지를 구성하는 HTMl 검사 코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면 수정할 수 있다. 요소 검사 기능을 같이 활용하면 수정할 코드를 빠르게 선택할 수 있다.
Console	프론트엔드의 자바스크립트 코드에서 발생한 각종 메시지를 출력하고 이용자가 입력한 자바스크립트 코드를 실행해주는 도구 코드를 작성하면서 출력해보고 싶다면 console.log 등을 유용하게 사용할 수 있다.
Sources	HTML, CSS, JS 등 현재 페이지를 구성하는 웹 리소스 확인, 디버깅 가능
Sources 레이아웃	왼쪽 - 현재 페이지의 리소스 파일 트리, 파일 시스템 가운데 - 선택한 리소스 상세보기 오른쪽 - 디버깅 정보
	Watch : 원하는 자바 스크립트 식을 입력하면 코드 실행 과정에서 해당 식의 값의 변화 확인 가능 Call Stack : 함수들의 호출 순서를 스택 형태로 보여줌 ex) A-> B-> C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치한다. Scope : 정의된 모든 변수들의 값을 확인할 수 있다. Breakpoints : 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할수 있다.
Network	서버와 오가는 데이터 확인, 로그 필터링 및 검색 활용 가능
Network 옵션	Perserve log : 새로운 페이지로 이동해도 로그를 삭제하지 않는다. Disable cache : 이미 캐시된 리소스도 서버에 요청한다. 원하는 항목을 선택하면 해당 오쳥 및 응답 데이터를 확인할 수 있다. 로그를 우크릭하여 Copy해서 원하는 형태로 복사 가능 Copy as fetch로 HTTP Request를 복사하고, Console 패널에 붙여서 실행하면 동일한 요청을 서버에 재전송할 수 있다.
Performance
Memory
Application	쿠키를 포함하여 웹 애플리케이션과 관련된 리소스 확인
	Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고 수정할 수 있다.
Security
Lighthouse

 

페이지 소스 보기 : 페이지와 관련된 소스 코드들을 모두 확인할 수 있다. (Ctrl+U)

시크릿 모드 : 방문기록/쿠키 및 데이터 등을 공유하지 않는다. (Ctrl+Shift+N)