[Web Hacking] Background - Web

해당 게시물은 DreamHack Web Hacking 강의를 토대로 작성하였습니다.

---

웹 (Web) : HTTP를 이용하여 정보를 공유하는 서비스

* HTTP : 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙

 

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

 

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

 

웹 보안의 중요성

• 웹에서 처리하는 정보 자산들이 많아져 이를 안전하게 보관하고 처리해야 할 필요성 증가
• ex) 고객 정보가 웹 통해 서버로 전달, 안전하게 보호되지 않으면 고객에게 피해 야기
• 웹을 통한 정보의 교환 과정에서 이러한 민감 정보들이 유출되거나 악용되지 않도록 보호해야 함

 

프론트엔드 (Front-end)

• 이용자의 요청을 받는 부분
• 이용자에게 직접 보여지는 부분 (UI, User Interface), 웹 리소스 (Web Resource)로 구성
• ex) 글, 글자 색, 모양, 배경 색, 이미지 크기 등이 관련 언어로 적혀있음

웹 리소스 (Web Resource)

• 웹에 갖춰진 정보 자산을 의미
• ex) http://aaaa.io/index.html 주소 입력 → aaaa.io에 존재하는 /index.html 경로의 리소스를 가져오라는 의미
• 모든 웹 리소스는 고유의 URI (Uniform Resource Idnetifier)를 가지고 이를 이용해 식별됨

프론트엔드 구성하는 대표적 웹 리소스

• HTML (Hyper Text Markup Language) : 웹 문서 뼈와 살 담당, 태그와 속성 통환 구조화된 문서 작성 지원
• CSS (Cascading Style Sheets) : 생김새 지정, 웹 리소스 시각화 방법을 기재한 스타일 시트, 글자 색, 모양, 크기, 위치 등 지정
• JS (JavaScript) : 웹 문서 동작을 정의, JS는 이용자의 브라우저에서 실행, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부름
• 그 외 :문서, 이미지, 동여상, 폰트 등

백엔드 (Back-end)

• 요청을 처리하는 부분
• 서버나 데이터베이스를 관리하는 기술

---

웹 브라우저

• UX (User eXperience) 을 제공하는 소프트웨어 중 하나
• 웹은 인터넷이라는 글로벌 네트워크 위에 구현되어 있으며 정해진 프로토콜 기반으로 통신
• 개발자가 아닌 일반 이용자가 이러한 규칙 이해하고 인터넷 사용하기 매우 어려움
• 서버와 HTTP 통신 대신 해주고 수신한 리소스 시각화하여 위와 같은 문제를 해결
• 이용자는 브라우저 이용해 쉽게 정보 검색, 동영상 보기, 파일 받기 등 할 수 있지만 내부에서 어떠한 연산이 일어나는지 전혀 알지 못함

 

 

웹 브라우저 기본 동작 방식

   ex) 이용자가 주소창에 aaaa.io 입력 시 웹 브라우저가 하게되는 기본적인 동작

 

웹 브라우저 기본 동작

1.  URL 분석, 웹 브라우저의 주소창에 입력된 주소 (aaaa.io) 해석
2. DNS 요청, aaaa.io에 해당하는 주소 탐색
3. HTTP 통해 aaaa.io에 요청
4. aaaa.io의 HTTP 응답 수신
5. 리소스 다운로드 및 웹 렌더링(HTML, CSS, Javascript)

 

URL, Uniform Resource Locator

• 웹에 있는 리소스의 위치를 표현하는 문자열
• 브라우저로 특정 웹 리소스 접근할 때 URL 사용하여 이를 서버에 요청
• Scheme, Authority(Userinfo, Host, Port), Path, Query, Fragment 등으로 구성

URL 구성

 

Scheme : 웹 서버와 어떤 프로토콜로 통신할 지 나타냄 (http://)

Host : Authority의 일부, 접속할 웹 서버 주소 대한 정보 (example.com)

Port : Authority 일부, 접속할 웹 서버의 포트에 대한 정보 (:8042)

Path : 접근할 웹 서버의 리소스 경로, '/'로 구분 (/over/there)

Query : 웹 서버에 전달하는 파라미터, URL에서 '?' 뒤에 위치 (?name=ferret)

Fragment : 메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보를 담고 있다. '#' 문자 뒤에 위치 (#nose)

 

 

Host (URL 구성요소)

• URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버 주소 나타냄
• Host는 Domain Name, IP Address 값 가질 수 있다.
• IP Address는 네트워크상에서 통신 이루어질 때 장치 식별하기 위해 사용되는 주소
• IP Address는 사람이 외우기 어려워 일반적으로 도메인의 특성을 담은 이름 정의하여 IP 대신 사용

Domain Name

• Domain Name을 Host 값으로 이용할 때 브라우저는 DNS(Domain Name Server)에 Domain Name 질의하고 DNS가 응답한 IP Address를 사용
• ex) http://aaaa.com 접속 시 DNNS에 질의해 얻은 aaaa.com의 IP와 통신
• Domain Name에 대한 정보는 nslookup 명령어 사용해 확인 가능

 

웹 렌더링 (Web Rendering)

• 서버로부터 받은 리소스를 이용자에게 시각화하는 행위
• 서버 응답 받은 웹 브라우저는 리소스의 타입 확인하고 적절한 방식으로 이용자에게 전달
• ex) 서버로부터 HTML, CSS 받으면 브라우저는 HTML 파싱하고 CSS 적용해 이용자에게 보여줌
• 브라우저 별 서로 다른 웹 렌더링 엔진 사용 (사파리 : 웹킷, 크롭 : 블링크, 파이어폭스 : 개코)

---

개발자 도구 (크롬)

• 브라우저에서 F12 눌러서 확인 가능 

개발자 도구 창

요소 (Elements) : 페이지 구성하는 HTML 검사

콘솔 (Console) : 자바 스크립트 실행하고 결과 확인할 수 있음

소스 (Sources) : HTML, CSS, JS 등 페이지 구성하는 리소스를 확인하고 디버깅할 수 있음

네트워크 (Network) : 서버와 오가는 데이터 확인할 수 있음

애플리케이션 (Application) : 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터 확인할 수 있음

 

콘솔 (Console)

개발자 도구 콘솔에서 자바스크립트 실행

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

※ 단축키 : Windows/Linux - Ctrl + Shift + J , macOS - Option + Cmd + J

 

 

소스 (Sources)

소스 창

• 현재 페이지 구성하는 웹 리소스들 확인
• 자바스크립트를 디버깅 할 수 있음

디버깅 정보 (젤 오른쪽)

• 감시 (Watch) : 원하는 자바스크립트 식 입력하면 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있다.
• 호출 스택 (Call Stack) : 함수들의 호출 순서를 스택 형태로 보여줌
• 범위 (Scope) : 정의된 모든 변수들의 값 확인할 수 있다.
• 중단점 (Breakpoints) : 브레이크포인트들 확인하고 각각을 활성화 또는 비활성화 할 수 있다.

 

소스 (Sources) 창에서 자바스크립트 디버깅

1. 원하는 코드 라인 클릭하여 해당 라인에 브레이크포인트 설정
2. 임의 데이터 입력하면 해당 브레이크포인트에서 실행 멈춤
3. Scope에서 현재 할당된 변수들 확인하고 값 변경할 수 있음

ex) 예시 코드 name == 'dreamhack' , num == 31337 이면 콘솔 로그에 congratulation 출력, 아니면 No ! 출력

디버깅 예시

• 20번째 줄 (if (name == ~~)에 브레이크포인트 설정
• 실습 페이지에서 1111, 2222 입력
• 브레이크포인트에서 실행 멈추고 범위 (Scope)에서 입력 값 확인 가능

Scope에서 값 변경

• name : dreamhack , num : 31337로 값 변경하고 실행 재개

출력

• congratulation 출력 확인

 

네트워크 (Network)

네트워크 창

• 로그 우클릭해서 복사 버튼 누르면 원하는 형태로 복사 가능
• fetch 로 복사 (Copy as fetch)로 HTTP Request를 복사하고 Console 패널에 붙여서 실행하면 동일한 요청 서버에 재전송 가능

 

애플리케이션 (Application)

애플리케이션 창

• 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션 관련된 리소스 조회 가능
• 쿠키에서는 브라우저에 저장된 쿠키 정보 확인하고 수정할 수 있음

 

시크릿 모드 (Secert Browsing Mode)

• 시크릿 모드에서는 새로운 브라우저 세션 생성, 브라우저 종료 시 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한이 저장되지 얺음
• 일반적으로 브라우저 탭들은 쿠키 공유, 시크릿 모드로 생성된 탭은 쿠키 공유하지 않음
• 시크릿 모드 사용하면 같은 사이트를 여러 세션으로 사용할 수 있어 다수 계정으로 서비스 점검할 때 유용