[Web Hacking] STAGE 2

STAGE 2

1) 웹 기본 상식

 

* Web

 

웹 (Web)

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

 

- 웹 서버 (Web Server): 정보를 제공하는 주체

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

 

 

프론트엔드 (Front-end)

- 이용자의 요청을 받는 부분

- 이용자에게 직접 보여짐

* 웹 리소스 로 구성됨

 

 

백엔드 (Back-end)

- 요청을 처리하는 부분

 

 

웹 리소스 (Web Resource)

- 웹에 갖춰진 정보 자산

- 웹 리소스는 고유의 URI(Uniform Resource Indicator)를 가짐 → 식별에 이용됨

* HTML, CSS, JS 로 구성

 

 

HTML (Hyper Text Markup Language)

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

 

 

CSS (Cascading Style Sheets)

- 웹 리소스들의 시각화 방법을 기재한 스타일 시트

 

 

JS (JavaScript)

- 웹 문서의 동작 정의- 이용자의 브라우저에서 실행됨- 클라이언트가 실행하는 코드라는 의미에서 Client-Slide Script라고도 불림

 

 

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

1. 이용자가 브라우저를 이용하여 웹 서버에 접속2. 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스 요청3. HTTP로 전달된 이용자의 요청을 해석4. 해석한 이용자의 요청에 따른 적절한 동작5. 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달6. 브라우저는 서버에게 응답받은 웹 리소스를 시각화하여 이용자에게 표시

 

 

 

 

1. 다음 중 다양한 웹 리소스들의 스타일을 지정하는 것은?

→ CSS

 

[풀이] CSS는 Cascading Style Sheets의 약자로 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다.

 

 

 

 

2. 다음 중 태그와 속성 등을 통해 웹 문서의 뼈대를 작성하는 언어는?

→ HTML

 

[풀이] HTML은 Hyper Text Markup Language의 약자로 태그와 속성을 통한 구조화된 문서 작성을 지원하는 웹 리소스이다.

 

 

 

 

3. Javascript로 작성된 웹 리소스는 서버에서 실행되고, 그 결과가 클라이언트 웹 리소스에 반영된다.

→ X

 

[풀이] Javascript는 이용자의 브라우저에서 실행된다.

 

 

 

 

4. 브라우저는 이용자의 요청을 해석하여 웹 서버에 HTML 형식으로 전달한다.

→ X

 

[풀이] 브라우저는 이용자의 요청을 해석하여 웹 서버에 HTTP 형식으로 리소스를 요청한다.

 

 

 

 

5. 프론트엔드는 웹 리소스로 구성된다.

→ O

 

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

 

 

 

 

6. 다음 중 작성된 웹 리소스 중 프론트엔드를 조작할 수 있는 것은?

→ Javascript

 

[풀이] Javascript는 웹 문서의 동작을 정의하는 웹 리소스이다.

 

 

 

 

7. URI는 Uniform Resource Identifier의 약자로 웹 리소스의 식별에 사용된다.

→ O

 

 

 

 

 

* HTTP / HTTPS

 

HTTP (Hyper Text Transfer Protocol)

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

- 클라이언트가 서버에게 요청하면 서버가 응답하는 메커니즘

- HTTP 서버는 HTTP 서비스 포트에 대기 (웹 서버에 의해) → TCP/80 or TCP/8080

 

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

 

 

네트워크 포트와 서비스 포트

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

- 서비스 포트 (Service Port): 네트워크 포트 중에서 특정 서비스가 점유하고 있는 포트

- 포트로 데이터를 교환하는 방식: 전송 계층(Transport Layer)의 프로토콜을 따름

 

 

HTTP 메시지

- HTTP 요청, HTTP 응답으로 구분 → HTTP 헤드, 바디로 구성됨

 

 

HTTP 요청

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

- 시작 줄: 메소드 (Method), 요청 URI (Request-URI), HTTP 버전으로 구성 → 띄어쓰기로 구분

 

- 메소드: URI가 가리키는 리소스를 대상으로 서버가 수행하기를 바라는 동작을 나타냄

- 요청 URI: 메소드의 대상을 나타냄

- HTTP 버전: 클라이언트가 사용하는 HTTP 프로토콜의 버전을 나타냄

 

 

HTTP 응답

- HTTP 요청에 대한 결과를 반환하는 메시지

- 시작 줄: HTTP 버전, 상태 코드 (Status Code), 처리 사유(Reason Phrase)로 구성 → 띄어쓰기로 구분

 

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

- 상태 코드: 요청에 대한 처리 결과를 세 자릿수로 나타냄 (ex. 404 → 요청이 문법에 맞지 않음을 의미)

- 처리 사유: 상태 코드가 발생한 이유를 짧게 기술한 것

 

 

HTTP 헤드

- 각 줄은 CRLF로 구분

- 첫 줄: 시작 줄 (Start-line) / 나머지 줄: 헤더 (Header)

- 헤드의 끝은 CRLF 한 줄로 나타냄

- 필드와 값으로 구성 / HTTP 메시지 또는 바디의 속성을 나타냄

- 하나의 HTTP 메시지에는 0개 이상의 헤더

 

 

HTTP 바디

- 헤드의 끝을 나타내는 CRLF 뒤의 모든 줄- 클라이언트나 서버에게 전송하려는 데이터가 담김

 

 

HTTPS (HTTP over Secure socket layer)

- TLS (Transport Layer Security) 프로토콜 도입하여 HTTP의 문제점 보완  → TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화- 제정 초기에는 민감한 데이터를 취급하는 웹 서비스 위주였으나 현재는 규모에 상관없이 HTTPS를 사용하는 추세

 

 

 

 

1. 다음 중 기본 HTTPS 포트 번호는?

→ 443

 

 

 

 

2. 다음 중 기본 HTTP 포트 번호는?

→ 80

 

 

 

 

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

→ HTTP Header

 

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

 

 

 

 

 

2) 웹 브라우저

 

* Web Browser

 

웹 브라우저

- 뛰어난 이용자 경험 (User eXperience, UX)을 제공하는 소프트웨어 중 하나

 

 

주소창에 주소를 입력했을 때 웹 브라우저의 동작

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

2. 주소 탐색 (DNS 요청)

3. HTTP를 통해 주소에 요청

4. 주소의 HTTP 응답 수신

5. 리소스 다운로드 및 웹 렌더링

 

 

URL (Uniform Resource Locator)

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

- 브라우저로 특정 웹 리소스에 접근할 때는 URL을 사용하여 서버에게 요청

 

https://yooniia.tistory.com/category/Dreamhack

https://    >>  Scheme

yooniia.tistory.com    >>  Host

/category/Dreamhack    >>  Path

 

++)

Query: '?' 뒤에 위치

Fragment: '#' 뒤에 위치

 

 

Domain Name

- URL의 구성 요소 중 Host는 Domain Name, IP Address의 값을 가질 수 있음- Domain Name Server (DNS)에 Domain Name을 질의, 응답한 IP Address를 사용

 

 

IP Address

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

 

 

웹 렌더링 (Web Rendering)

- 서버로부터 받은 리소스를 이용자에게 시각화하는 행위- 웹 렌더링 엔진에 의해 이루어짐 → 브라우저별로 서로 다른 엔진 사용- 사파리: 웹킷 / 크롬: 블링크 / 파이어폭스: 개코- 각 엔진에 따라 렌더링 과정, 순서, 속도에 차이는 있으나 HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 동일

 

 

 

 

1. Host로는 Domain Name만 사용할 수 있다.

→ X

 

[풀이] Host는 Domain Name, IP Address의 값을 가질 수 있다.

 

 

 

 

2. 다음 중 웹을 서핑하기 위해 사용하는 프로그램은?

→ 웹 브라우저

 

[풀이] 웹 브라우저는 뛰어난 UX를 제공하는 소프트웨어 중 하나로, 이를 이용하여 정보를 쉽게 검색하는 등의 동작을 할 수 있다.

 

 

 

 

 

* Browser DevTools

 

개발자 도구

- 브라우저를 열고 F12 단축키

- Figure1에서 개발자 도구의 간단한 레이아웃 정보 확인 가능

 

 

디바이스 툴바 (Device Toolbar)

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

 

 

Elements

- HTML 읽기: 현재 페이지를 구성하는 HTML의 코드 읽기 가능

- HTML 수정: 코드를 선택한 상태로 F2 단축키를 누르거나 더블 클릭하면 수정 가능

 

 

Console

- 프론트엔드의 Javascript 코드에서 발생한 각종 메시지 출력 / 이용자가 입력한 Javascript 코드를 실행

- console 오브젝트: 개발자 도구의 콘솔에 접근할 수 있는 함수 정의

- 코드 작성 중간의 변수의 값을 출력해보고 싶을 때 console.log 사용 가능

 

- Console Drawer: 개발자 도구에 새로운 콘솔 창을 열어 가시성, 효율성 높일 수 있음

 

 

Sources

- 현재 페이지를 구성하는 웹 리소스 확인 가능- Debug: Source 탭에서 원하는 Javascript를 디버깅할 수 있음

 

 

Network

- 서버와 오가는 데이터 확인 가능- 원하는 항목 선택 시 해당 요청 및 응답 데이터 확인 가능

 

 

Application

- 웹 애플리케이션과 관련된 리소스 조회 가능- Cookies: 브라우저에 저장된 쿠키 정보 확인 및 수정 가능

 

 

기타 브라우저 기능

- 페이지 소스 보기: 페이지와 관련된 소스 코드 모두 확인 가능- Secret browsing mode: 새로운 브라우저 세션 생성으로 브라우저를 종료했을 때 기록이나 데이터가 저장되지 않음  → 브라우저의 탭은 일반적으로 쿠키를 공유 / 시크릿 모드는 쿠키 공유 X  → 같은 사이트를 여러 세션으로 사용할 수 있어 다수의 계정으로 서비스 점검 시 유용

 

 

 

 

1. 개발자 도구에서는 HTML이나 JavaScript는 수정할 수 있지만 CSS는 수정할 수 없다.

→ X

 

[풀이] 개발자 도구에서 HTML, JavaScript, CSS 모두 수정이 가능하다.

 

 

 

 

2. 개발자 도구의 Console 탭에서 특정 변수의 값을 콘솔 화면에 출력될 때 사용하는 함수는?

→ console.log

 

[풀이] console.log를 통해 특정 변수의 값을 콘솔 화면에 출력할 수 있다.

 

 

 

 

3. 개발자 도구의 Sources 탭에서 원하는 자바스크립트를 디버깅할 수 있다.

→ O

 

 

 

 

4. 브라우저의 특정 모드로써 브라우저를 종료할 때 방문 기록, 쿠키 및 사이트 데이터, 양식 입력 값 등의 정보가 저장되는 않는 모드는?

→ 시크릿 모드

 

[풀이] 시크릿 모드에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료했을 때 정보가 저장되지 않는다.

일반적으로 브라우저의 탭들은 쿠키를 공유하는데, 시크릿 모드로 생성한 탭은 쿠키를 공유하지 않는다.

 

 

 

 

 

[Flag 찾기] devtools-sources

해당 문제는 개발자 도구의 Sources 탭 기능을 활용해 플래그를 찾는 문제이다.

 

 

 

1. 주어진 문제 파일에서 웹사이트 접속

 

 

 

 

 

2. F12 단축키로 개발자 도구 열기

 

 

 

 

 

3. Sources 탭 열기

 

 

 

 

 

4. Flag 찾기

나는 해당 웹 사이트의 css 파일의 4146번째 줄에서 Flag를 찾았다.

 

 

 

 

 

5. Flag: DH{2ed...4d5}

 

 

정답 입력....되고 정답이라고 출력된 화면을 분명히 캡처를 했는데...

사진 파일이 없다...

 

 

 

풀긴 풀었음!

이미 제출한 문제입니다!

 

 

 

 

STAGE2 완성~