[THM] Web Application Basics - EP.1 (Task 1~4)

TryHackMe - "Web Application Basics". Task 1~4. Write-up + Extra Study!

출처: https://tryhackme.com/room/webapplicationbasics

Web Application Basics

 

[1]  Introduction

이 룸에서는 Web Application의 기초에 대해 학습합니다.

Web Application의 핵심 요소들인 URL, HTTP Request(요청), HTTP Response(응답) 등을 살펴봅니다.

 

배우는 내용들:

- Web Application 이란?

- Web Browser에서 어떻게 동작하는가?

- URL의 구성 요소와 URL의 사용 방법

- HTTP 요청(request)과 응답(response)

- HTTP 요청 method(메서드)의 종류들

- HTTP의 응답 코드들

- HTTP Header의 작동 방식과 보안에서 가지는 의미

 

 

---

[2]  Web Application Overview

Web Application = Frontend (프론트엔드) + Backend (백엔드) 로 구성됨

 

[2-1] Front End (프론트엔드)

- 사용자가 실제로 보게되는 겉모습

- 사용자가 직접 상호작용하며 사용하는 부분

- 프론트엔드의 구성 요소 = HTML + CSS + JS (JavaScript)

 

1. HTML (Hypertext Markup Lanuage)

 - Web Application의 기본을 담당하는 마크업 언어

 - 웹 브라우저에 표시할 내용과 표시 방법을 지시하는 코드

 - 즉, HTML 만으로 간단한 웹 페이지를 만들 수 있음

 

2. CSS (Cascading Style Sheets)

 - Web Application의 미적 외관을 담당하는 스타일링 언어

 - 색상, 텍스트 디자인, 레이아웃 등으로 웹 페이지를 이쁘게 만드는 역할

 

3. JS (JavaScript)

 - 웹 브라우저에 더 복잡한 동작 및 기능들을 추가해주는 프로그래밍 언어

 - HTML은 간단한 기능, CSS는 디자인을 담당하기에, JS가 없다면 우리가 사용하는 다재다능한 웹 페이지를 만들 수 없음

[보충 설명] 마크업 언어 = 구조와 의미 표시 마크업 언어는 tag를 사용해서 문서의 구조와 의미를 표현합니다. 즉, 어떤 동작을 하는 것이 아니라 이 텍스트가 무엇인지 알려주는 역할입니다. ex) <h1>제목</h1> = <h1> 태그의 경우 제목이라는 뜻이고, <p>내용</p> = <p> 태크의 경우 문단이라는 뜻입니다. 스타일링 언어 = 외형과 표현 지정 스타일링 언어는 이미 정의된 구조에 대해 시각적 표현 방식을 지정합니다. 즉, 이미 완성된 구조를 변경하지 않고 외형의 디자인만을 담당합니다. 프로그래밍 언어 = 동작과 로직 구현 프로그래밍 언어는 컴퓨터가 수행할 동작을 작성합니다. 즉, 무엇을 언제 어떤 조건에서 어떻게 할지를 표현합니다. 우리가 흔히 아는 파이썬, C, C+, JavaScript, Java 등이 이에 해당됩니다. 코딩을 공부한다고 했을 때, 배우는 친구들을 생각하면 쉽습니다. 즉, HTML은 마크업 언어, CSS는 스타일링 언어이기 때문에, 둘은 프로그래밍 언어가 아닙니다. 이 점은 명확하게 구분하셔야 됩니다.

*JavaScript = 프로그래밍 언어 / HTML, CSS = 프로그래밍 언어 아님!

 

 

 

[2-2] Back End (백엔드)

- 사용자가 웹 브라우저에서 직접 볼 수 없는 영역
- 서버(Server)에서 실행되는 영역

- 프론트엔드가 외관이라면, 백엔드는 신체 내부의 중요기관 (뇌, 장기, 뼈 같은 역할)

- 즉, Web Application이 작동하는 데 중요한 역할을 담당 (핵심 로직과 데이터 처리)

- 백엔드의 구성 요소 = Web Server + Application Server + DB + WAF + 여러 인프라 등등

[보충 설명] 백엔드는 서버 측 구성 요소들과 데이터 그리고 이를 지원하는 인프라들로 구성이 되어있습니다. 서버 측 구성 요소들은 백엔드의 핵심 기능을 직접 수행합니다. Web Server, Application Server (WAS), API 등이 있습니다. 데이터는 백엔드가 관리 및 처리하는 정보입니다. 사용자 정보, 댓글, 서비스 설정 값, 로그, 게시글 등으로 Database (DB)에 저장됩니다. 지원 인프라들은 백엔드를 보호하는 보안 요소들과 안정적인 운영을 위한 보조 요소들입니다. WAF (방화벽), Load Balancer, Cache Server, Logging과 Monitoring 등이 있습니다.

 

Database (DB = 데이터베이스)

- 정보를 저장, 수정, 검색하는 곳

- 인터넷은 저장된 정보를 사용하기 위해 존재하기에, DB가 없다면 Web Application의 존재 이유가 사라짐 (극단적으로 말하면)

 

WAF (Web Application Firewall)

- 방화벽으로 많이 불림

- 보안을 위해 필수적인 요소

- 웹 서버에 오는 위험한 요청들을 필터링하여 Web Application을 보호함

 

여러 인프라 오소들

- Web Server

- Application Server

- Storage (저장소)

- 다양한 네트워크 장치들과 소프트웨어

 

 

---

[3]  URL (Uniform Resource Locator)

URL 예시

 

Scheme (프로토콜)  = http = 녹색 부분

- 브라우저가 웹사이트에 접근할 때 사용됨

- 대표 프로토콜: HTTP, HTTPS, FTP 등

- HTTPS가 HTTP보다 보안성이 뛰어남

 

User (사용자, 인증 정보) = anbymata:pw1234 = 주황색 부분

- URL은 사용자 이름과 비빌번호를 포함할 수 있음

- 보안 문제로 인해 요즘엔 거의 사용되지 않음

 

HOST / DOMAIN (호스트 / 도메인) = anbyhacking.com = 보라색 부분

- 접근할 서버의 도메인 이름이나  IP 주소를 나타냄

 

Port (포트번호) = 80 = 하늘색 부분

- HTTP : 80 / HTTPS : 443 / FTP : 21 을 각각 기본 포트로 가짐

- 보통 기본 포트들은 생략이 가능하지만, 프로토콜들에 따라 생략이 불가능할 수 있음

 

Path (경로) = mainpage = 빨간색 부분

- 접근할 서버에서 내가 사용하길 원하는 특정 페이지를 가리킴

 

Query String (퀴리 문자열) = ?id=00 = 파란색 부분

- '?' 로 시작하는 부분

- 서버에 추가적으로 전달할 정보들을 입력하는 부분

- 이 퀴리 문자열의 경우 사용자가 수정할 수 있기 때문에 Injection 공격에 많이 활용됨

 

Fragment (프래그먼트, 앵커태크) = #case6 = 갈색 부분

- '#'으로 시작하는 부분

- 페이지 내 특정 section(섹션)으로 이동하기 위해 사용

 

 

---

[4]  HTTP Messages

- HTTP = HyperText Transfer Protocol의 줄임말

- HTTP는 웹에서 문서를 주고받기 위한 응용 계층 (Application Layer)의 통신 프로토콜임

- 즉, HTTP Message는 사용자와 웹 서버가 서로 소통하기 위해 교환하는 data packet(패킷)

 

[4-1] HTTP Message 타입

HTTP Message에는 두 가지 타입이 존재합니다.

 

1. HTTP Request (요청)

 - 사용자가 Web Application을 사용하기 위해 웹 서버에 보내는 메시지

 - 즉, User → Web server 방향의 메시지

 

2. HTTP Response (응답)

 - 사용자의 요청에 따라 웹 서버에서 사용자가에 보내는 메시지

 - 즉, Web server → User 방향의 메시지

[보충 설명] 유튜브 예시를 들어보겠습니다. 1. 사용자가 YouTube에서 영상을 클릭합니다. (원하는 영상 클릭) 2. 브라우저가 서버로 HTTP Request 전송합니다. (우리 이 영상을 보고 싶어요) 3. 서버가 요청을 처리합니다. 4. 영상 정보와 스트리밍 데이터를 HTTP Response로 반환합니다. 5. 브라우저가 응답을 해석하여 영상 재생 화면을 사용자에게 표시해줍니다. 6. 사용자는 해당 페이지에서 영상을 시청할 수 있게됩니다.

 

 

[4-2] HTTP Message 형식

예시를 통해 알아봅시다.

HTTP Response 예시

1~3 줄은 시작선, 4~6 줄은 Header, 7 줄은 비워져 있고, 그 이후의 내용들을 Body 입니다.

- 시작선 : 메시지의 도입부. 어떤 메시지가 전송되고 있는지 알려주며, 그 메시지의 처리 방식을 알려줌

- Header : 메시지에 대한 추가 정보. key(키)와 value(값)의 한 쌍으로 구성됨

- 빈 선 : Header 와 Body 사이에 한 줄을 비워둬워 둘을 구분함

- Body : 메시지의 본체. 실질적으로 데이터가 저장된 곳

[보충 설명] HTTP Response 예시를 자세히 뜯어보자면, - HTTP 1.1 버전으로 요청을 처리함 - 200 OK = 요청이 정상적으로 성공함 - Server = 요청을 처리한 웹 서버는 nginx 1.15.8 버전 - Date = 응답이 생성된 서버 기준 시간 (GMT)은 2025.03.03 월요일 20시 50분 56초  - Content-Type = 데이터의 형식은 HTML 문서 - Content-Length = response(본문)의 크기는 31 byte - <html>과 </html> 사이의 내용이 HTML 문서 내용임

 

 

---

[TryHackMe] Web Application Basics - EP.1 (Task 1~4). END.

 

[TryHackMe] Web Application Basics - EP.2 (Task 5~6). Continue...

https://anbymata.tistory.com/43

[THM] Web Application Basics - EP.2 (Task 5~6)