AnbyMata의 해킹 노트

[THM] How Websites Work - EP.1 (Task 1~3) 본문

TryHackMe/Web & Networks 기초

[THM] How Websites Work - EP.1 (Task 1~3)

AnbyMata 2026. 2. 19. 22:00

TryHackMe - "How Websites Work". Task 1~3. Write-up + Extra Study!

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

 

How Websites Work

To exploit a website, you first need to know how they are created.

tryhackme.com

 

[1]  How websites work

Web(웹) = Client-Server 구조

- Client = Browser (Safari, Google Chrome, 네이버 Whale 등..)

→ 웹사이트에 접속하면, 브라우저가 웹 서버에 해당 페이지 정보를 request(요청)함

- Web Server = 요청을 처리하는 서버 컴퓨터

→ 웹 서버는 브라우저가 페이지를 표시할 수 있도록 데이터를 response(응답)함

 

 

[1-1] Websites 동작 과정

- 1. Client (사용자)가 URL 입력

- 2. Browser가 HTTP Request(요청) 전송

- 3. HTTP Request는 Internet을 통해 Server로 전달

- 4. Server가 데이터 처리

- 5. Server가 HTTP Response(응답) 전송

- 6. HTTP Response는 Internet을 통해 Browser로 전달

- 7. Browser가 화면에 응답받은 페이지 출력

 

 

 

[2]  HTML

Website의 주요 구성 요소

- HTML : 웹사이트를 만들고 그 구조를 정의

- CSS : 스타일을 추가하여 웹사이트의 외관을 이쁘게 함

- JavaScript : 웹페이지에 복잡한 기능을 구현

 

 

HTML (HyperText Markup Lanuage)

- 웹페이지의 기본 구조를 정의하는 언어

- 프로그래밍 언어가 아닌 Markup Lanuage

- Elements (Tags) = HTML 페이지의 구성 요소로, 브라우저에게 콘텐츠의 표시 방법을 알려줌

- 즉, 콘텐츠의 의미와 구조를 표시

 

 

[2-1] HTML 예시

HTML 구성 요소를 예시를 통해 정리해봅시다.

HTML 예시

<!DOCTYPE html>

- 해당 페이지가 HTML5 문서임을 정의함

- 서로 다른 브라우저 간 표준화를 도움

- 브라우저가 HTML5 방식으로 페이지를 해석하도록 함

 

<html> </html>

- HTML 페이지의 root 요소 (= 문서의 최상위 element)

- 모든 다른 element(요소)는 이 element(요소) 안에 위치함

 

<head> </head>

- 페이지에 대한 메타데이터 (정보)를 포함 (ex. 페이지 제목)

- 화면에 직접 표시되지 않음

- <title>, <meta>, <link>, <script> 등의 내용을 포함함

 

<body> </body>

- HTML 문서의 본문을 정의함

- body 내부의 내용만 브라우저에 표시됨

 

<h1> </h1>

- 가장 큰 제목을 정의함

- <h2> <h3> 등의 소제목들이 존재하고, 숫자가 클수록 작은 제목임

 

<p> </p>

- 문단을 정의함

- 일반 텍스트 문단을 의미함

 

<a href="..."> </a>

- 다른 페이지나 사이트로 이동하는 링크를 생성

- `href` 속성에 이동할 URL 지정

 

<img src="..." alt="...">

- 웹페이지에 이미지를 표시

- 닫는 tag가 없음

- `src` 속성에 이미지 파일 경로를 지정

- `alt` 속성에 이미지 설명을 적음

 

 

Attributes (속성)

- Tag (Element)는 attribute(속성)을 가질 수 있음

- Attributes를 통해 tag 안에 추가 정보를 제공함

- 위의 예시에서 <a>의 `href`, <img>의 `src` 등이 속성

 

- `class` = 그룹 식별을 위해 사용되는 속성

 + 여러 요소가 같은 `class` 사용 가능

 + 그룹 스타일링에 사용됨

 + ex. <p class="bold-text">

 

- `id` = 고유 식별을 위해 사용되는 속성

 + 문서 내에서 유일해야됨 (= 하나의 id 값은 문서 내에서 하나의 요소에만 사용 가능)

 + JavaScript에서 `id` 기반으로 요소를 선택해 값 조작 가능

 + ex. <p id="example">

 

 

 

[2-2] HTML 실습

아래 내용을 보기 전, TryHackMe 사이트에서 실습해보세요!

 

1)  현재 HTML 코드의 문제점

 - HTML 코드를 보면, <img>가 2개 있습니다.

 → 즉, 이 코드는 2장의 사진을 출력하는 코드입니다.

 = 2장 중 1장이 깨지면서 정상적으로 출력이 안된 모습입니다.

 

 

 

2)  두 번째 고양이 사진 출력하기

 - 이미지는 반드시 파일 확장자가 필요합니다.

 - 파일 확장자는 `.pdf`, `.png`, `.hwp`, `.jpg` 와 같이 파일 뒤에 붙는 부분으로 파일의 종류를 표시합니다.

 - <img src='img/cat-1.jpg'> 의 경우, `.jpg`라는 파일 확장자까지 있어 정상적으로 출력됐습니다.

 - <img src'=img/cat-2.'> 의 경우, 파일 확장자가 생략되어 있습니다.

 - 파일 확장자를 추가해준다면, 다음과 같이 정상적으로 출력됩니다.

 

 

 

3)  강아지 사진 추가하기

 - <img> 태그를 사용하여 `img/dog-1.png` 경로의 PNG 파일을 출력하는 코드를 추가합니다.

 - <img src='img/cat-1.jpg'> 를 참고한다면, 쉽게 추가할 수 있습니다.

[보충 설명]
<!--Add dog image here --> 부분에 강아지 사진을 출력하는 코드를 적으면 됩니다.
<!--   --> 는 HTML의 주석 문법입니다.
주석은 아시다시피 코드 내부에 설명을 남길 때 사용하는 것으로, 브라우저에서 실행되지 않습니다.

 

 

 

[3]  JavaScript

- JavaScript는 가장 인기 있는 프로그래밍 언어 중 하나

- 웹페이지의 동작 담당. 웹페이지의 기능을 제어하는 데 사용됨

- JavaScript가 없다면, 페이지는 상호작용을 못하는 static(정적)인 상태

- JS로 페이지를 실시간으로 업데이트하여, 애니메이션 표시나 버튼을 클릭하면 화면이 변경되는 등의 기능이 가능해짐

 

 

[3-1] JavaScript를 HTML에 포함하는 방법

1. <script> 태그 내부에 직접 작성 (Inline 방식)

 - HTML 파일 안에 직접 코드를 작성

 - 간단한 기능 구현 시 사용

 

 

2. `src` 속성을 이용해 외부 파일을 불러오기

 - JavaScript 코드를 별도의 파일로 관리

 - 유지 보수에 유리

 - 실제 서비스에서 일반적으로 사용하는 방법

 

 

[3-2] HTML 요소 조작 방법

1)  특정 요소 선택

 - id가 "demo" 인 요소를 선택합니다.

 


2)  요소 내용 변경

 - id가 "demo"인 요소의 내부 내용을 변경합니다.

 = `id="demo"`인 요소의 내용이 "AnbyMata's Note"로 변경되었습니다.

 - 페이지를 동적으로 업데이트 가능합니다. (동적으로 = 새로고침을 하지 않아도)

 

 

[3-3] Event(이벤트) 처리 방법

HTML 요소는 이벤트를 가질 수 있고,

이벤트가 발생하면 JavaScript가 실행됩니다.

(Event = 버튼 클릭, 마우스 드래그 등등..)

 

1. HTML 태그 내부에 직접 작성

 - 버튼 클릭 시 텍스트가 "Welcome!"으로 변경됩니다.

[보충 설명]
`document` = 현재 웹 페이지 전체(HTML 문서)를 의미. 즉, 페이지 전체에 접근합니다.
`getElementById("demo")` = id가 "demo"인 HTML 요소를 선택
`innerHTML` = 선택한 요소의 내부 HTML 내용을 가져오가너 변경

 

 

2. JavaSciprt 내부에서 정의하기 (권장)

 - 구조와 동작을 분리하는 방식입니다.

 - 유지보수에 더 적합합니다.

 - 버튼 클릭 시 텍스트가 "Welcome!"으로 변경됩니다.

[보충 설명]
`onclick` = 클릭 이벤트가 발생했을 때, 실행될 코드를 지정하는 속성
`function()` = `onclick` 속성에 함수를 할당합니다.

 

 

 

[3-4] JavaScript 실습

아래 내용을 보기 전, TryHackMe 사이트에서 실습해보세요!

 

1)  HTML 코드 분석

 = <div> 태그를 통해 "Hi there!" 이라는 텍스트를 출력하는 HTML 코드입니다.

 = JavaScript 코드 부분이 있지만, 아직은 아무 내용도 없는 상태입니다.

 

 

 

2)  출력되는 텍스트 변경해보기

 - "AnbyMata's Note!"가 출력되도록 코드를 변경해보겠습니다.

 - <div> 태그에 의미 자체는 거의 없습니다. 다만, 자동 줄바꿈 기능을 가지고 있습니다.

 - 단순 구조를 나타내기 위한 태그로 생각하면 됩니다.

 = "AnbyMata's Note!"가 출력된 모습입니다.

 

 

 

3)  텍스트를 바꾸는 버튼 추가하기

 - <button> 태그를 사용하면 버튼을 추가할 수 있습니다.

 - [3-3] Event 처리 방법 부분을 참고하면 됩니다.

 - 정석적으로 <body> 태그 안, <script> 태그 밖에 버튼을 생성하는 코드를 적겠습니다.

 - 버튼을 눌렀을 때, 작동되는 코드는 <script> 태그 안에 넣어 JavaScript 내부에서 정의하겠습니다.

[3-3] 에서 2. JavaScript 내부에서 정의하기 참고!

 - 이러면 "Click Here!" 이란 버튼이 생성됩니다.

 

 - 버튼을 누르면,

 = "Button Clicked"로 JavaScript 내부에 정의한 텍스트로 바뀌게 됩니다.

 

 

 

[TryHackMe] How Websites Work - EP.1 (Task 1~3). END.

 

[TryHackMe] How Websites Work - EP.2 (Task 4~5) 完. Continue...

https://anbymata.tistory.com/56

 

[THM] How Websites Work - EP.2 (Task 4~5). 完

TryHackMe - "How Websites Work". Task 4~5. Write-up + Extra Study!출처: https://tryhackme.com/room/howwebsiteswork How Websites WorkTo exploit a website, you first need to know how they are created.tryhackme.com [4] Sensitive Data ExposureSensitive Data

anbymata.tistory.com

'TryHackMe > Web & Networks 기초' 카테고리의 다른 글

[THM] How Websites Work - EP.2 (Task 4~5). 完  (0) 2026.02.23
[THM] Web Application Basics - EP.4 (Task 9~11). 完  (0) 2026.01.23
[THM] Web Application Basics - EP.3 (Task 7~8)  (0) 2026.01.22
[THM] Web Application Basics - EP.2 (Task 5~6)  (1) 2026.01.21
[THM] Web Application Basics - EP.1 (Task 1~4)  (1) 2026.01.20
'TryHackMe/Web & Networks 기초' Related Articles more