웹해킹트랙 4주차 과제 - 드림핵 웹해킹1 #Background - Web

https://dreamhack.io/

해커들의 놀이터, Dreamhack

 

드림핵 웹해킹1 올클

 

 

STAGE 2 Background - Web

 

-Background: HTTP/HTTPS

 

인코딩 표준 : 0과 1로 우리의 문자를 표현하는 것에 대한 약속

 

아스키(Ascii) : 7비트 데이터에 대한 인코딩 표준으로 알파벳과 특수 문자 등을 표현할 수 있으나 호환성 문제로 유니코드가 새로 만들어졌다.

 

유니코드(Unicode)  : 모든 언어의 문자를 하나의 표준에 담았다. 최대 32개의 비트로 표현되는데,  

이는 표현가능한 정보의 가짓수가 2^32, 대략 42억개로 전세계 문자 외에 각종 이모지도 유니코드에 포함되고 있다.

 

통신프로토콜 : 규격화된 상호작용에 적용되는 약속

각 통신 주체가 교환하는 데이터를 명확히 해석할 수 있도록 문법을 포함한다.

문법에 어긋나는 메세지는 잘못 전송된 것으로 취급하여 무시된다.

네트워크 통신의 기초(TCP/IP), 웹어플리케이션이 사용하는 HTTP, 파일을 주고받을때 사용하는 FTP 등이 있다.

 

HTTP(Hyper Text Transfer Protocol) : 웹 서버와 클라이언트가 리소스를 교환하기 위해 사용하는 프로토콜

웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시키고 클라이언트가 서비스 포트에 HTTP 요청을 전송하면, 이를 해석하여 적절한 응답을 반환한다.

 

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

 

서비스포트: 네트워크 포트 중에서 특정 서비스가 점유하고 있는 포트를 의미

-> HTTP가 80번 포트를 점유하고 있다면 HTTP의 서비스 포트는 80번 포트이다.

 

포트로 데이터를 교환하는 방식은 전송계층(Transport Layer)의 프로토콜을 따른다.

대표적으로 TCP, UDP가 있다.

다른 전송계층끼리는 데이터 교환할 수 없기 때문에 서비스 포트를 표기할 때는 서비스가 사용하는 전송계층 프로토콜을 같이 표기한다.

 

0~1023번 포트 : 잘 알려진 포트(Well-known port) 또는 특권포트(Privileged port)라고 하며, 각 포트번호에 유명한 서비스가 등록되어 있다.

->22-SSH, 80-HTTP, 443-HTTPS

 

HTTP 메시지 : HTTP 서버와 클라이언트가 교환하는 데이터

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

 

HTTP 헤드 : 메시지에 대한 정보

첫줄은 시작 줄(Start-line), 나머지 줄은 헤더(Header)라고 부른다.

시작줄의 역할은 요청과 응답에서 큰 차이가 있다. 

헤더는 필드와 값으로 구성되며 HTTP 메시지 또는 바디의 속성을 나타낸다.

서버에 추가 정보를 전달하는 데이터 부분으로, 이용자가 입력한 데이터를 전달하기 위함 보다는 이용자와 서버가 상호작용하기 위한 정보를 담기 위해 사용된다.

하나의 HTTP 메시지에는 0개 이상의 헤더가 있을 수 있다.

 

HTTP 바디 : 헤드의 끝을 나타내는 CRLF 뒤로 오는 모든 줄로, 클라이언트나 서버에게 전송하려는 데이터가 담긴다.

HTTP 메시지

HTTP 요청 : 서버에게 특정 동작을 요구하는 메시지

서버는 해당 동작이 실현 가능한지, 클라이언트가 그러한 동작을 요청할 권한이 있는지 등 검토하고 적절할 때만 이를 처리

HTTP 요청의 시작줄은 메소드(Method), 요청 URI(Request-URI), 그리고 HTTP 버전으로 구성

메소드는 요청 URI가 가리키는 리소스에 대해 서버가 수행했으면 하는 동작을 나타내며, 대표적으로 GET과 POST가 있다.

 

GET : 리소스를 가져오라는 메소드

이용자가 브라우저에 웹 서버의 주소를 입력하거나 하이퍼링크를 클릭하면, 새로운 페이지를 렌더링하기 위해 리소스가 필요하다. 이때 브라우저는 GET 요청을 서버에 전송하여 리소스를 받아온다.

 

POST : 리소스로 데이터를 보내라는 메소드

전송할 데이터는 보통 HTTP 바디에 포함되며 ID와 비밀번호, 게시판 글 등이 POST로 서버에 보내진다.

 

이외에 요청 URI는 메소드의 대상이 되는 리소스를 지정, HTTP 버전은 클라이언트가 사용하는 HTTP 프로토콜의 버전을 나타낸다.

 

HTTP 응답: HTTP 요청을 처리한 결과 및 이유, 클라이언트에게 전송할 웹 리소스를 포함하는 메시지

시작줄은 HTTP 버전, 상태 코드(Status Code), 그리고 처리 사유(Reason Phrase)로 구성된다.

 

HTTP 버전은 서버에서 사용하는 HTTP 프로토콜의 버전을 나타낸다.

상태 코드는 요청에 대한 처리 결과를 세 자릿수로 나타낸다.

처리사유는 상태코드가 발생한 이유를 나타낸다.

 

 

HTTPS(HTTP over Secure socket layer) : TLS(Transport Layer Security)를 이용하여 HTTP의 약점을 보완한 프로토콜

HTTP의 응답과 요청은 평문으로 전달되어, 누군가 이를 가로챈다면 중요한 정보가 유출될 수 있다. 

TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화 한다.

공격자가 중간에 메시지를 탈취하더라도 이를 해석하는 것은 불가능하여 HTTP 통신이 도청과 변조로부터 보호된다.

웹 서버의 URL이 http://로 시작되면 HTTP, https://로 시작되면 HTTPS 프로토콜을 사용

 

HTTP - 읽기쉬움

HTTPS - 해석할 수 없음

 

-Background:  Web

 

웹 : 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

정보를 제공하는 주체를 웹 서버, 정보를 받는 이용자를 웹 클라이언트라고 한다.

이용자의 요청을 받는 부분을 프론트엔드(Front-end), 요청을 처리하는 부분을 백엔드 (Back-end)라고 부른다.

프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스(Web Resource)로 구성된다.

 

웹 리소스 : 웹 서버가 제공하는 정보 자원

모든 웹 리소스는 고유의 Uniform Resource Indicator(URI)를 가지며, 이를 이용하여 식별된다.

 

웹의 프론트엔드를 구성하는 대표적인 웹 리소스

-Hyper Text Markup Language (HTML)

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

-Cascading Style Sheets (CSS)

웹 문서의 생김새를 지정, 웹 리소스들의 시각화 방법을 기재한 스타일 시트 

글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정하면, 브라우저는 이를 참고하여 웹 문서를 시각화한다.

-JavaScript (JS)

웹 문서의 동작을 정의하여 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현 

JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부른다.

-그 외

문서, 이미지, 동영상, 폰트 등

 

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

1. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속

2. (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청

3. (서버) HTTP로 전달된 이용자의 요청을 해석

4. (서버) 해석한 이용자의 요청에 따라 적절한 동작을 한다. 리소스를 요청하는 것이라면, 이를 탐색. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리

5. (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달

6. (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여준다.

 

-Background: Web Browser

 

웹 브라우저(Web Browser) : HTTP/S로 이용자와 웹 서버의 통신을 중개하며, 서버로부터 전달받은 다양한 웹 리소스들을 가공해 이용자에게 효과적으로 전달

 

웹 브라우저의 기본 동작

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

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

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

4. dreamhack.io의 HTTP 응답 수신

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

 

*DNS(Domain Name Server): Host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환

 

URL( Uniform Resource Locator) : 웹의 리소스 위치를 나타내는 문자열

브라우저는 이를 사용하여 서버에 특정 리소스를 요청

 

URL 구성 요소

Domain Name

URL구성 요소 중 Host는 웹 브라우저가 접속할 때 웹 서버의 주소를 나타내는데, Host는 Domin Name, IP Address의 값을 가질 수 있다.

IP Address는 네트워크 상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소이고, 이는 사람이 외우기 어려우므로 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용

Domin Name을 Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용

 

웹 렌더링(Web Rendering): 서버로부터 받은 리소스를 이용자에게 시각화하는 행위

서버의 응답을 받은 웹 브라우저가 리소스의 타입을 확인하고 적절한 방식으로 이용자에게 전달한다.

->서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여준다.

 

 

-Tools: Browser DevTools

 

개발자 도구(Devtools) : 웹페이지를 진단할 때 사용하는 브라우저 도구

HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공한다.

서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있다. 그만큼 웹 취약점을 이용하려는 공격자에게도 유용하게 사용된다.

단축키 : F12

개발자 도구 레이아웃

요소  검사 : 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 찾을 수 있다.

 

디바이스 툴바 : 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있다.

개발한 웹 서비스가 데스크톱, 태블릿, 스마트폰 등 다른 장치에서도 잘 작동하는지 점검 할 수 있다.

 

Elements : 현재 페이지를 구성하는 HTML 코드를 읽을 수 있다.

코드를 선택한 상태로 F2를 누르거나 더블클릭하면 이를 수정할 수 있다.

 

Console : 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행도 해주는 도구로 브라우저에서 자바스크립트를 실행하고 결과를 확인할 수 있다.

단축키 : Ctrl+ Shift + J

 

Sources : 현재 페이지를 구성하는 웹 리소스들을 확인하고, 원하는 자바스크립트를 디버깅할 수도 있다.

Sources 레이아웃

Network : 서버와 오가는 데이터를 확인할 수 있다.

원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있으며, 로그 우클릭 - Copy에서 원하는 형태로 복사할 수 있다.

Copy as fetch로 HTTP Request를 복사하고 Console 패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있다.

Network 레이아웃

 

Application : 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다.

Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있다.

 

Console Drawer :개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있다. 네트워크 패널과 콘솔 패널을 동시에 사용할 수 있다.

단축키 : ESC

 

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

단축키 : Ctrl + U

 

Secret browsing mode :시크릿 모드에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료했을 때 다음 항목이 저장되지 않는다.

-방문 기록

-쿠키 및 사이트 데이터

-양식에 입력한 정보

-웹사이트에 부여된 권한

이를 이용하면 같은 사이트를 여러 세션으로 사용할 수 있어서 다수의 계정으로 서비스를 점검할 때 유용하다.

단축키 : Ctrl + Shift + N