[SISS/웹해킹 스터디] 2학기 1주차 스터디

2학기 1주차 스터디

수강 인증 화면 캡쳐

1주차 09/02 ~ 09/08 [드림핵] Background - Web

 

* 편집 및 사진 파일 문제 9/9(월) 중으로 수정 예정

→ 수정 완료

 

웹

---

• 인터넷 기반 서비스 → HTTP를 이용하여 정보 공유
• 정보
  • 정보 제공하는 → 웹 서버
  • 정보 제공받는 → 웹 클라이언트
• 웹 보안
  • 다양한 분야에서 이용되는 서비스가 됨 → 웹에서 처리하는 정보 자산이 많아지며 안전한 보관 및 처리의 중요성 증가
• 서비스 구조
  • 프론트엔드 → 이용자의 요청을 받음
    • 웹 리소스로 구성
  • 백엔드 → 요청을 처리함

 

웹 리소스

---

• 웹의 정보 자산
• 구성
  • URI(Uniform Resource Identifier) → 웹 리소스의 식별자(이름) → (예시) dreamhack.io
    • URL은 “식별자+위치” → http://dreamhack.io/index.html
  • HTML(Hyper Text Markup Language) → 태그와 속성을 통해 문서 작성
  • CSS(Cascading Style Sheets) → 웹 문서의 생김새를 지정(글자 크기, 서체, 위치 등)
  • JS(JavaScript) → 웹 문서의 동작을 정의

 

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

---

• 통신 과정
  1. (클라이언트) 브라우저를 이용해 웹 서버에 접속
  2. (클라이언트) 브라우저가 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스 요청
  3. (서버) HTTP로 전달된 이용자의 요청을 해석
  4. (서버) 요청에 따른 동작 수행 → 리소스 요청, 입금 등
  5. (서버) HTTP 형식으로 리소스를 이용자에게 전달
  6. (클라이언트) 브라우저가 서버로부터 받은 웹 리소스(HTML, CSS, JS 등)를 시각화하여 이용자에게 보여줌통신 과정

 

인코딩(Encoding)

---

• 기계어와 문자 간의 대응 규칙
• 인코딩 표준
  • 아스키(Ascii) → 7비트 데이터
  • 유니코드(Unicode) → 최대 32비트

 

통신 프로토콜

---

• 통신
  • 요청과 응답으로 구성
• 프로토콜
  • 규격화된 상호작용에 적용되는 약속(문법 포함)
• 표준 통신 프로토콜 종류 → TCP/IP(), HTTP, FTP

 

HTTP

---

• Hyper Text Transfer Protocol → 서버와 클라이언트의 데이터 교환을 “요청”과 “응답” 형식으로 정의
  1. 웹 서버가 HTTP 서버를 HTTP 서비스 포트에 대기시킴(일반적으로 TCP/80 혹은 TCP/8080)
  2. 클라이언트가 서비스 포트에 HTTP 요청을 전송
  3. 적절한 응답 반환

 

• 참고
  • 네트워크 포트 → 서버와 클라이언트가 정보를 교환하는 추상화된 장소
  • 서비스 포트 → 네트워크 포트 중 특정 서비스가 점유하고 있는 포트
  • 0~1023번 포트 → 유명한 서비스 등록 (22번 → SSH, 80번 → HTTP, 443번 → HTTPS)
  • 전송 계층 (Transport Layer) → 포트로 데이터를 교환할 때 전송 계층의 프로토콜(TCP, UDP)을 따름

 

HTTP 메시지

---

• 종류 → HTTP 요청, HTTP 응답 (HTTP 헤더와 바디로 구성)
• HTTP 헤더 (Headers)
  • 시작 줄(첫 줄) + 헤더(Header/나머지 줄)로 구성
  • CRLF로 각 줄을 구분
  • 필드, 값으로 구성(HTTP 메세지 혹은 바디의 속성을 나타냄)
  • 하나의 HTTP 메시지에는 0개 이상의 헤더가 존재
• HTTP 바디 → 데이터가 있음

 

• 참고
  • CRLF
    • Carriage Return (커서를 줄의 맨 앞으로 이동시키는 문자 + Line Feed (커서를 다음 줄로 이동시키는 문자)
    • 유닉스 계열에서는 LF만을 사용

 

HTTP 요청

---

• 표준 문서 링크 → https://www.rfc-editor.org/rfc/rfc2616.html#section-5
• 서버에게 특정 동작을 요구하는 메시지

 

• 시작 줄 → 메소드 + 요청 대상 + HTTP 버전 (띄어쓰기로 구분)
  • 메소드 → 서버가 수행할 동작 (8개)
    • GET → 리소스를 가져옴
    • POST → 데이터를 보냄 (HTTP 바디에 데이터를 포함시킴)
  • 요청 URI → 메소드의 대상
  • HTTP 버전 → 클라이언트가 사용하는 HTTP 프로토콜의 버전
• 헤더와 바디
  • 앞의 설명과 동일

 

HTTP 응답

---

• HTTP 요청 결과 반환
• 상태 정보(수행 여부, 미수행 이유) + 전송할 리소스

 

• 시작 줄
  • HTTP 버전 + 상태 코드 + 처리 사유 (띄어쓰기로 구분)
  • 상태 코드상태 코드 설명 대표 예시

    상태 코드	설명	대표 예시
    1xx	요청을 제대로 받아 처리 중
    2xx	요청이 제대로 처리됨	• 200(OK): 성공
    3xx	요청을 처리하기 위해 클라이언트의 추가 동작이 필요	• 302(Found): 다른 URL로
    4xx	클라이언트가 잘못된 요청으로 처리 실패	• 400(Bad Request): 요청이 문법에 맞지 않음 • 401(Unauthorized): 클라이언트가 요청한 리소스에 대한 인증 실패 • 403(Forbidden): 클라이언트가 리소스를 요청할 권한이 없음 • 404(Not Found): 리소스 없음
    5xx	요청은 유효하지만, 서버에 에러가 발생하여 처리 실패	• 500(Internal Server Error): 서버가 요청을 처리하다가 에러가 발생 • 503(Service Unavailable): 서버의 과부하로 인해 요청 처리 불가

 

HTTPS

---

• HTTP의 보안 문제로 TLS를 도입하여 새로 만든 프로토콜
• TLS
  • 모든 HTTP 메시지를 암호화 (공개키 및 대칭키 암호를 이용)
  • 표준 RFC 문서 → https://www.rfc-editor.org/rfc/rfc5246.html

 

퀴즈 1

---

퀴즈 1

 

퀴즈 2

---

퀴즈 2

 

웹 브라우저

---

• 서버와 HTTP 통신을 대신하여 수신한 리소스를 시각화
• UX (User eXperience) 제공
• 기본 동작
  1. URL 분석
  2. DNS 요청 (주소 탐색)
  3. HTTP를 이용하여 주소에 요청
  4. 서버의 HTTP 응답 수신
  5. 리로스 다운로드 및 웹 렌더링 (HTML, CSS, JS)

 

URL

---

• Uniform Resource Locator → 웹에 있는 리소스의 위치 → 더 많은 정보는 RFC 3986 참고

요소	설명
Scheme	웹 서버와 통신 시 이용할 프로토콜
Host	접속할 웹 서버의 주소에 대한 정보 (Authority의 일부)
Port	접속할 웹 서버의 포트에 대한 정보 (Authority의 일부)
Path	접근할 웹 서버의 리소스 경로 ('/'로 구분)
Query	웹 서버에 전달하는 파라미터 (URL의 '?' 뒤 값)
Fragment	메인 리소스에 존재하는 서브 리소스에 접근 시 식별하기 위한 정보 ('#' 문자 뒤 위치)

URL

 

도메인 네임

---

• IP 주소 → 네트워크에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소
• 도메인 네임 → IP 주소는 외우기 어려우므로 이에 대응하는 이름을 정의 → DNS (Domain Name Server)에 질의하여 IP 주소를 응답받음
  • nslookup → 도메인 네임에 대한 정보를 확인할 수 있는 명령어
    • $ nslookup example.com

 

웹 렌더링

---

• 서버로부터 받은 리소스를 시각화
• 브라우저 별로 다른 웹 렌더링 엔진을 사용 (렌더링 순서, 속도가 다름) → 웹킷(사파리), 블링크(크롬), 개코(파이어폭스)

 

개발자 도구 (크롬)

---

• 결과 즉시 확인 및 디버깅 편의 기능(패킷 정보 등) 제공
• 실행 → 브라우저에서 F12를 누름

개발자 도구 실행 (크롬)

🔴 빨간색	요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)
🟠 주황색	기능을 선택하는 패널 (강의에서는 굵게처리된 기능만 다룸) • Elements: 페이지를 구성 HTML 검사 • Console: 자바스크립트를 실행 및 결과 확인 • Sources: HTML, CSS, JS 등의 리소스 확인 및 디버깅 • Network: 서버 및 오가는 데이터를 확인 • Performance • Memory • Application: 쿠키를 포함한 웹 어플리케이션과 관련된 데이터를 확인 • Security • Lighthouse
🟡 노란색	현재 페이지에서 발생한 에러 및 경고 메시지
🟢 녹색	개발자 도구 설정

 

• 요소 검사 → 특정 요소의 정보 파악 및 관련 코드 탐색 용이
  • 요소 검사 버튼을 누른 후 원하는 요소에 마우스를 올림 (클릭 시 관련 HTML 코드 하이라이팅)

 

• 디바이스 툴바 → 브라우저 화면 비율, User-Agent를 원하는 값으로 수정

 

• Elements
  • HTML 읽기 
  • HTML 수정 → 코드를 선택한 상태에서 F2를 누르거나 더블 클릭 (요소 검사 기능과 함께 사용 시 편리)

 

• console → 자바스크립트에서 발생한 각종 메시지 출력 → 이용자가 입력한 자바스크립트 코드 실행
  • console 오브젝트 → 콘솔에 출력 → alert(), promt(), confirm() 등 사용 가능 
  • 단축키 (콘솔 열기)

Windows/Linux	Ctrl + Shift + J
macOS	Option(⌥) +Cmd(⌘) + J

// alert -> 문자열 출력

alert("hello");

 

// prompt -> popup box로 이용자 입력을 받음

// 이용자가 입력한 데이터는 return value로 설정

var value = prompt('input')

 

// confirm -> 확인/취소(yes/no)를 확인 (이용자로부터 입력 받음)

// 이용자의 선택에 따라 불 값을 반환

var true_false = confirm('yes or no ?');

 

// document.body를 변경

document.body.innerHTML = '<h1>Refresh!</h1>';

 

// document.body에 새로운 html 코드 추가

document.body.innerHTML += '<h1>HI!</h1>';

 

• Sources → 현재 페이지 구성 웹 리소스 확인
  • 디버깅
    • 이용자가 입력한 name, num에 따라 다른 실행을 하는 아래의 코드에서 브레이크 포인트를 설정하여 디버깅 가능

개발자 도구 - Sources

🔴 → 현재 페이지의 리소스 파일 트리, 파일 시스템

🟠 → 선택한 리소스 상세 보기

🟢 → 디버깅 정보

• Watch: 자바스크립트 식을 입력 시 코드 실행 과정에서 해당 식의 값 변화 확인
• Call Stack: 함수들의 호출 순서를 스택 형태로 보여줌 (A → B → C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있을 경우, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치)
• Scope: 정의된 모든 변수들의 값 확인
• Breakpoints: 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화

 

• Network → 서버와 오가는 데이터 확인 (원하는 항목을 선택하여 해당 요청 및 응답 데이터를 확인)
  • Copy → 로그를 우클릭하여 [Copy]를 통해 원하는 현태로 복사 가능 → [Copy as fetch]를 통해 HTTP 요청을 복사하고 콘솔 패널에 붙여 실행하면 동일 요청 재전송 가능

🔴 로깅 중지 및 로그 전체 삭제

🟠 로그 필터링 및 검색

🟢 옵션

• Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않음
• Disable cache: 이미 캐시된 리소스도 서버에 요청함

🟡 네트워크 로그

🔵 네트워크 로그 요약 정보

 

• Application → 쿠키, 캐시, 이미지, 폰트, 스타일시트 등의 웹 애플리케이션 리소스 조회 가능
  • cookies → 브라우저에 저장된 쿠키 정보 확인 및 수정 가능

 

• Console Drawer → 새 콘솔창
  • 단축키 → ESC

 

• 기타
  • 페이지 소스 보기 → 페이지와 관련된 소스 코드 모두 확인 가능
  • Secret browsing mode → 새로운 브라우저 세션 생성
    • 저장되지 않는 항목
      • 방문 기록
      • 쿠키 및 사이트 데이터
      • 양식에 입력한 정보
      • 웹사이트에 부여된 권한

(페이지 소스 보기 단축키)
Windows/Linux	Ctrl + U
macOS	Cmd(⌘) + Opt(⌥) + U

(시크릿 모드 단축키)
Windows/Linux	Ctrl + Shift + N
macOS	Cmd(⌘) + shift(⇧) + N

 

퀴즈 1

---

퀴즈 1

 

퀴즈 2

---

퀴즈 2

 

실습 - devtools-sources

---

• 검색 단축키(맥) → Command + Option + F
• 문제의 첨부 파일을 다운로드 받은 후 브라우저의 개발자 도구에서 DH를 검색하면 됨

실습 - devtools-sources