웹 해킹 Stage 2

Background: HTTP/HTTPS

인코딩(Encoding) 표준 : 컴퓨터의 모든 데이터는 0과1로 구성된다.

 

1. 아스키(Ascii)

7비트 데이터에 대한 인코딩 표준 

알파벳과 특수 문자 등 표현

'A' = 1000001

 

2. 유니코드

컴퓨터 개발 초기 - 각 문자권마다 고유의 인코딩 표준 사용 -> 영어 = 아스키, 한글 = CP-949, EUC-KR

국제 소프트웨어 개발 어려움. -> 모든 언어의 문자를 하나의 표준에 담겠다는 목표로 유니코드 제정.

한 문자 = 최대 32비트(약 42억개) -> 전 세계의 문자를 표현하다고 남는 넓은 공간

이모지(Emoji)들도 유니코드에 포함되고 있음.

 

통신 프로토콜

웹 서버에 있는 리소스를 얻기 위해 클라이언트는 웹에게 특정 리소스를 지정하여 제공해달라고 요청해야 함.

서버가 해당 요청 이해하고, 대응되는 동작을 통해 클라이언트에게 리소스를 반환함.

 

클라이언트 - 요청(Request)

서버 - 응답(Response)

 

프로토콜(protocol) : 규격화된 상호작용에 적용되는 약속.

- 각 통신 주체가 교환하는 데이터를 명확히 이해할 수 있도록 문법(syntax) 포함함.

-> 문법에 어긋나는 메시지는 무시

 

현재 표준 통신 프로토콜 

- TCP/IP : 네트워크 통신의 기초

- HTTP : 애플리케이션이 사용

- FTP : 파일 주고받을 때 사용

 

HTTP

Hyper Text Transfer Protocol

서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜.

 

기본 메커니즘 : 클라이언트가 서버에게 요청하면, 서버가 응답.

 

웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기 시킴.

포트 = TCP/80 or TCP/8080

 

네트워크 포트(Network Port)

서버와 클라이언트가 정보를 교환하는 추상화된 장소.

클라이언트가 서버의 포트에 접근하여 데이터를 내려놓고, 서버가 클라이언트에 보낼 데이터를 실어서 돌려보내는 것

 

서비스 포트(Service Port)

네트워크 포트 중 특정 서비스가 점유하고 있는 포트. 

HTTP가 80번 포트 점유 -> HTTP의 서비스 포트 : 80번 포트

데이터 교환 방식 : 전송계층 프로토콜 -> TCP, UDP

두 프로토콜을 함께 사용할 수는 없음. 그래서 서비스 포트를 표기할 때는 서비스가 사용하는 전송 계층 프로토콜을 같이 표기하기도 함.

 

HTTP 서비스 포트 = TCP/80 : HTTP 서비스를 80번 포트에서 TCP로 제공하고 있다.

 

포트 개수 : 0번~65535번 -> 총 65536개

0번 ~ `1023번 포트 : 잘 알려진 포트(Well-known port), 특권 포트(Privileged port)

ex)

22번 포트 : SSH, 80번 포트 : HTTP, 443번 포트 : HTTPS

 

HTTP 메시지 

- HTTP 요청 : 클라이언트가 전송

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

해당 동작이 실현 가능한지, 클라이언트가 동작을 요청할 권한이 있는지 등을 검토 및 처리.

 

시작 줄 : 메소드(Method), 요청 URI(Requset-URI), HTTP 버전

 

메소드 

URI가 가리키는 리소스 대상, 서버가 수행하길 바라는 동작을 나타냄.

 

GET : 리소스를 가져와라.

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

 

POST : 리소스로 데이터를 보내라.

HTTP 바디에 포함된 전송할 데이터. 로그인할 때 입력하는 정보, 게시글 등이 POST로 서버에 보내짐.

 

요청 URI : 메소드의 대상

HTTP 버전 : 클라이언트가 사용하는 버전

 

- HTTP 응답 : 서버가 반환

요청에 대한 결과를 반환

요청 수행 여부, 상태 정보(Status), 클라이언트에게 전송할 리소스.

 

시작 줄 :  HTTP 버전, 상태 코드(Status Code), 처리 사유(Reason Phrase)

 

HTTP 버전 : 서버에서 사용하는 HTTP 프로토콜의 버전을 나타냄

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

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

 

 

공통점 : 응답과 요청 모두 HTTP 헤드와 바디로 구성됨

 

HTTP 헤드

각 줄은 CRLF로 구분

첫 줄 = 시작 줄(Start-line)

나머지 줄 = 헤더(Header)

헤드의 끝 = CRLF 한 줄로 나타냄

 

헤더는 필드와 값으로 구성됨 -> HTTP 메시지 또는 바디의 속성을 나타냄.

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

 

HTTP 바디

헤드의 끝을 나타내는 CRLF 뒤, 모든 줄.

클라이언트나 서버에게 전송하려는 데이터가 바디에 담김.

 

HTTP 메시지

 

HTTPS(HTTP over Secure socket layer)

HTTP의 응답과 요청은 평문으로 전달됨. -> 만약 누군가 가로채면 정보 유출 가능성 ex) POST 요청을 가로채면 로그인 정보 탈취당할 수 있음.

 

TLS(Transport Layer Security) 프로토콜 : 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화함.

-> HTTP 통신이 도청과 변조로부터 보호됨.

 

 

Background : Web

웹

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

웹 서버(Web Server) : 정보 제공 주체

웹 클라이언트(Web Client) : 정보를 받는 이용자

 

백엔드(Back-end) : 요청을 처리하는 부분

 

프론트엔드(Front-end) : 이용자의 요청을 받는 부분

이용자에게 직접 보여지는 부분으로, 웹 리소스(Web Resource)라는 것으로 구성됨.

 

웹 리소스 - 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등. 페이지가 보여주고 있는 정보

 

웹에 갖춰진 정보 자산http://dreamhack.io/index.html 

-> dreamhack.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미/

 

Uniform Resource Indicator(URI) : 모든 웹 리소스는 이를 통해 식별됨.

 

- Hyper Text Markup Languge(HTML)

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

 

- Cascading Style Sheets(CSS)

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

-> 글자의 색깔, 모양, 배경 색상, 이미지의 크기 및 위치.

이를 참고하여 웹 문서 시각화.

 

- JavaScript(JS)

웹 문서의 동작 정의. 

이용자의 브라우저에서 실행됨. 

Client-Side Script -> 클라이언트가 실행하는 코드.

 

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

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

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

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

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

4. (서버) 해석한 이용자의 요청에 따른 적절한 동작.

리소스 요청 시 - > 탐색

계좌 송금, 입금 같은 복잡한 동작 요청 -> 내부적으로 필요한 연산 처리.

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

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

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

웹 클라이언트 : 웹에서 정보 요구 주체

웹 서버 : 웹에서 정보 제공 주체

웹 리소스 : 웹 서버가 제공하는 정보 자원 (ex. HTML, CSS. JS)

웹 서비스 : 웹 상에서 제공되는 서비스 (ex. SNS, 온라인 쇼핑몰 등)

 

Background : Web Browser

웹 브라우저

뛰어난 UX 제공 소프트웨어. 내부에서 어떤 연산이 일어나는지 이용자는 알지 못함.

 

주소창에 dreamhck.io 입력 시 웹 브라우저 기본 동작.

1. 입력된 주소 해석(URL 분석)

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

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

4. dreamhack.io의 HTTP 응답 수신

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

 

 

URL (Uniform Resource Locator)

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

URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성됨.

요소	설명
Scheme	웹 서버와 어떤 프로토콜로 통신할지 보통 http/https 사용/ mailto, tel 등 -> 메일 클라이언트 or 연락처 프로그램
Host	Authority의 일부, 접속할 웹 서버의 주소에 대한 정보를 가지고 있음. 웹 브라우저가 어디에 연결할지 정함. 도메인 or IP Address
Port	Authority의 일부, 접속할 웹 서버의 포트에 대한 정보를 가지고 있음.
Path	접근할 웹 서버의 리소스 경로. '/'로 구분함.
Query	웹 서버에 전달하는 파라미터. URL에서 '?' 뒤에 위치함.
Fragment	메인 리소스에 존재하는 서브 리소스 접근 시 이를 식별하기 위한 정보를 담고 있음. '#' 문자 뒤에 위치함. 웹 브라우저만 가지고 있는 데이터.

 

 

 

Domain Name

IP Address : 네트워크 상에서 통신 시 장치 식별용 주소 -> 불규칙한 숫자는 사람이 외우기 어려워서 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용함.

 

Domain Name Server(DNS) 

도메인 네임을 호스트 값으로 이용 시, 브라우저는 DNS에 질의하고, DNS가 응답한 IP 주소를 사용함.

이에 대한 정보는 nslookup 명령어로 확인 가능함.

 

웹 렌더링(Web Rendering)

서버로부터 받은 리소스를 이용자에게 시각화하는 행위.

ex) HTML과 CSS를 받으면 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줌.

 

웹 렌더링 엔진에 의해 이뤄짐. 브라우저 별로 다름.

- 사파리 = 웹킷(Webkit)

- 크롬 = 블링크(Blink)

- 파이어폭스 = 개코(Gecko) 엔진

 

이용자 요청 -> 서버 웹리소스로 응답 -> 이용자가 볼 수 있는 형태로 가공 및 출력(브라우저)

 

 

Tools : Browser DevTools

웹 개발 시 프론트엔드이 자바스크립트나 백엔드 API 버그 발생 or CSS 적용이 맘에 안 들 때 코드 에디터와 브라우저를 오가면서 수정하기 까다로움 -> 브라우저 개발자 도구(DevTools 사용)

 

-브라우저 수정 및 결과 바로 확인

- JS 코드 대상 디버거 제공

- 서버와 오가는 HTTP 패킷 상세히 보여줌 -> 프로토콜 상 문제 쉽게 발견 가능

빨간색 박스 : 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)

노란색 박스 : 기능을 선택하는 패널

- Elements : 페이지를 구성하는 HTML 검사

- Console : 자바 스크립트를 실행하고 결과 확인 가능

- Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅 가능

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

- Performance

- Memory

- Application : 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터 확인 가능

- Security

- Lighthouse

 

녹색 박스 : 현재 페이지에서 발생한 에러 및 경고 메시지

파란색 박스 : 개발자 도구 설정

 

 

1. 요소 검사

요소 검사를 누르고 웹 페이지의 원하는 요소에 마우스를 올리면, 대상의 정보가 출력됨. 클릭하면 이와 관련된 HTML 코드가 하이라이팅됨.

 

2. 디바이스 툴바 

현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경 가능함.

개발자 본인이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검 가능.

디바이스 기종에 따른 화면 미리보기 가능.

 

3. Elements

- HTML 읽기

현재 페이지를 구성하는 HTML의 코드를 읽을 수 있음.

- HTML 수정

코드 선택한 상태 F2/더블 클릭

요소 검사 기능 같이 활용 시 수정할 코드를 빨리 선택할 수 있음.

 

4. Console

프론트엔드의 자바스크립트 코드에서 발생한 각종 메시지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행도 해주는 도구임.

JS로 웹 개발 시, console 오브젝트에는 개발자 도구의 콘솔에 접근할 수 있는 함수가 정의돼있음. 

코드 작성 시 어떤 변수의 값을 중간에 출력해보고 싶다면, console.log 등을 유용하게 사용 가능함.

NodeJS의 console 오브젝트

// "hello" 문자열을 출력하는 alert 함수를 실행합니다.
alert("hello");


// prompt는 popup box로 이용자 입력을 받는 함수입니다.
// 이용자가 입력한 데이터는 return value로 설정됩니다.
var value = prompt('input')

// confirm 는 확인/취소(yes/no)를 확인하는 이용자로부터 입력 받는 함수입니다.
// 이용자의 선택에 따라 Boolean(true/false)타입의 return value를 가집니다.
var true_false = confirm('yes or no ?');

// document.body를 변경합니다.
document.body.innerHTML = '<h1>Refresh!</h1>';

// document.body에 새로운 html 코드를 추가합니다.
document.body.innerHTML += '<h1>HI!</h1>';

alert("hello");

var value = prompt ( 'input' )

HTML 코드 작성가능

document.body 변경

새로운 HTML코드 추가

 

5. Sources

 

 

왼쪽부터 순서대로

 

- 현재 페이지의 리소스 파일 트리, 파일 시스템

- 선택한 리소스 상세 보기

- 디버깅 정보

Watch : 원하는 자바스크립트 식 입력 -> 코드 실행 과정에서 해당 식의 값 변화 확인 가능.

Call Stack : 함수들의 호출 순서를 스택 형태로 보여줌.

실행 순서 : A -B - C

스택 순서 : 최상단 = C, 최하단 = A

Scope : 정의된 모든 변수들의 값 확인

Breakpoints : 브레이크 포인트들을 확인하고, 각각 활성화 또는 비활성화 가능.

 

20라인에 브레이크포인트를 걸고 데이터를 입력함. 20 라인에 bp 설정해놨기 때문에 제대로 된 데이터를 입력했어도 congratulations! 라는 메시지가 나오지 않음. 

Scope에서 현재 할당된 변수들을 확인하고 값을 변경할 수 있음.

 

6. Network

 

로깅 중지 및 로그 전체 삭제

로그 필터링 및 검색

옵션

- Preserve log : 새로운 페이지로 이동해도 로그를 삭제하지 않음.

- Disable cache : 이미 캐시된 리소스도 서버에 요청.

네트워크 로그

네트워크 로그 요약 정보

원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있다.

 

Network : Copy

로그 우클릭 -> 원하는 형태로 복사 가능.

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

 

 

7. Application

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

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

 

 

8. Console Drawer

개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높임.

ESC키를 눌러 네트워크 패널과 콘솔 패널을 동시에 사용할 수 있음.

 

페이지 소스 보기

페이지와 관련된 모든 소스 코드 확인

Ctrl + U

Secret browsing mode

시크릿 모드. Ctrl + Shift + N

새로운 브라우저 세션 생성. 브라우저 종료 시 다음 항목이 저장되지 않음.

 

- 방문 기록

- 쿠키 및 사이트 데이터

- 양식에 입력한 정보

- 웹사이트에 부여된 권한

 

시크릿 모드로 생성한 탭은 쿠키 공유 X.

같은 사이트를 여러 세션으로 사용 가능함. -> 다수의 계정으로 서비스 점검 시 유용.

 

devtools-sources 워게임

DH{2ed07940b6fd9b0731ef698a5f0c065be9398f7fa00f03ed9da586c3ed1d54d5}