[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 Work

 

[4]  Sensitive Data Exposure

Sensitive Data Exposure(민감 정보 노출)

- 서버가 아닌 Client (Browser) 쪽에서 민감 정보가 노출되는 취약점

- 암호화되지 않은 평문 (원본) 데이터가 그대로 노출됨

- 주로 HTML 또는 JS 소스 코드 내부에 존재

- "View Page Source" (페이지 소스 보기)로 확인 가능

 

 

Sensitivie Data Exposure 발생 이유

- Browser는 모든 Frontend 코드를 사용자에게 제공함

- 숨겼다 생각한 정보도 소스 코드(HTML, JavaScript)에서 노출될 가능성 있음

- 흔히 발생하는 노출 정보들

 + login credentials (로그인 자격 증명) (= 하드 코딩된 아이디와 비밀번호)

 + 숨겨진 링크 (관리자 페이지 URL 등)

 + 기타 민감한 데이터들

- 단순히 "View Page Source" 로 공격자도 정보 수집 가능

 

 

Sensitive Data Exposure가 위험한 이유

- 노출된 정보가 Privilege Escalation(권한 상승) 공격에 활용될 수 있음

- HTML 주석( <!--  --> )도 브라우저에서 확인 가능

- 임시 계정이나 텍스트 계정이 주석으로 그대로 남아 있을 수 있음

→ 관리자 페이지 접근, 내부 시스템 (백엔드) 접근, DB나 서버 설정 정보 노출 등으로 이어질 수 있음

 

 

보안 점검 시 기본 절차

- 웹 모의해킹의 기본 정보 수집 단계에서 많이 활용됨

- "View Page Source"와 개발자 도구를 활용해 Sensitive Data Exposure가 없는지 확인함

- 숨겨진 관리자 계정이나 테스트용 계정, API Key 등이 없는지 확인함

- 매우 쉽지만 효과적인 탐색 기법

 

 

[4-1] Sensitive Data Exposure 실습

1)  웹 페이지 열기

 - 문제 부분에 있는 "this link"를 눌러서 실습 페이지를 열어줍니다.

 = 성공적으로 실습 웹 페이지로 이동했습니다.

this link

 

 

 

2)  `Ctrl` + `U` 키를 눌러서 현재 페이지의 HTML 소스 코드 (View Page Source) 열기

 - `Ctrl + U`를 통해 페이지에 전달된 HTML 코드를 확인할 수 있습니다.

 - 네트워크 요청이나 동적으로 변경되는 HTML 코드는 `F12`를 통해 개발자 도구에서 확인할 수 있습니다.

 = 주석 부분에 굉장히 민감한 정보가 남아있는 것을 확인할 수 있습니다.

 

 

 

---

[5]  HTML Injection

HTML Injection

- 필터링되지 않은 사용자 입력이 페이지에 그대로 표시될 때 발생하는 취약점

- 입력값이 그대로 화면에 노출 → 공격자가 HTML 태그 삽입 가능

- 이 공격으로 공격자가 페이지의 외형과 기능을 제어할 수 있음

 

Input Sanitisation (입력값 정화(필터링))

- 사용자가 입력한 정보는 frontend, backend 등 여러 기능에 재사용됨

→ 일반적으로 보안을 위해 사용자 입력을 절대 신뢰하지 않음

- 악의적 입력 방지를 위해 사용자가 입력한 모든 내용을 JS 함수에서 사용하기 전에 sanitise(정화) 해야 됨

- sanitise 방법 = HTML 태그를 제거 및 특수 문자 변환

- 즉, 출력 전 검증을 해야 안전함

 

 

[5-1] HTML Injection 흐름

1)  실습 웹페이지

  = "What's your name?" 부분에 사용자 입력값을 넣을 수 있습니다.

 

 

 

2)  JavaScript 코드

 - 실습 웹사이트의 JavaScript 코드는 다음과 같습니다.

 = 'name' 이란 변수에 사용자의 입력값을 받습니다

 = 받은 입력값 앞에 "Welcome "을 추가하여 `innerHTML`로 페이지에 출력합니다.

 → 즉, 입력값이 그대로 HTML에 삽입됩니다.

 

 

 

3)  입력값 넣어보기

 - "AnbyMata"를 입력하고, "SayHi" 버튼을 눌러보면,

AnbyMata

 = 웹 페이지에 "Welcome AnbyMata"가 출력됩니다.

 

 

 

4)  이 웹페이지의 문제점

 - 입력값이 santisied 되지 않습니다. (= 입력값이 출력에 그대로 반영됨)

 → 공격자가 자신의 HTML 또는 JavaScript 코드를 작성하여 페이지에 그대로 적용시킬 수 있습니다.

 = 즉, HTML Injection 취약점이 존재합니다.

 

 

 

[5-2] HTML Injection 실습

1)  <p> 태그를 사용한 HTML 코드 주입

 - "Hacked by AnbyMata"를 출력하는 코드를 넣어보겠습니다.

`<p>Hacked by AnbyMata</p>`

 = <p> 태그에 있는 기능인 자동 줄바꿈이 적용된 채로 "Hacked by AnbyMata" 문장이 출력되었습니다.

 → 즉, 사용자가 입력한 코드의 기능이 웹페이지에 그대로 적용됨을 알 수 있습니다.

[보충 설명] 본래라면 입력값이 그대로 문자열로 처리되어 "Welcome <p>Hacked by AnbyMata</p>"가 출력되어야 합니다. 하지만, 위의 결과를 보면 <p> 태그가 텍스트가 아닌 HTML 요소로 해석되었습니다. "<p>"와 "</p>"가 화면에 출력되지 않고, <p> 태그의 기능인 자동 줄바꿈이 적용되었습니다.

 

 

 

2)  제목 넣어보기

 - <h1> 태그 = 가장 큰 크기의 제목을 표시

 - "AnbyMata's Note!" 제목을 출력하는 코드를 넣어보면,

`<h1>AnbyMata's Note!</h1>`

 = 줄바꿈이 포함된 거대한 "AnbyMata's Note!" 문장이 출력되었습니다.

 

 

 

3)  링크 넣어보기

 - <a> 태그 = 다른 페이지나 URL로 이동하는 하이퍼링크 생성

 - `href` 속성 = 이동할 주소 지정

 - "https://anbymata.tistory.com"로 이동하는 링크로 연결되는 코드를 넣어보면,

`<a href="https://anbymata.tistory.com">Click!</a>`

 = "Click!" 하이퍼링크를 클릭하면, 제 블로그로 이동합니다.

이게 되네?

 

 

 

4)  존재하지 않는 이미지 넣어보기

 - <img> 태그 = 이미지를 화면에 표시

 - `src` 속성 = 표시할 이미지 경로 지정

 - 존재하지 않는 이미지인 "image.jpg"를 출력하는 코드를 넣어보면,

`<img src="image.jpg">`

 = "image.jpg"라는 파일은 존재하지 않기 때문에 이미지 아이콘이 표시되는 모습입니다.

 

 

 

5)  버튼 넣어보기

 - <button> 태그 = 클릭 가능한 버튼을 생성

 - "AnbyMata"라는 버튼을 추가하는 코드를 넣어보면,

`<button>AnbyMata</button>`

 = "AnbyMata" 버튼이 추가되었습니다.

 

 

 

---

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

 

[TryHackMe] How Websites Work. Finish!