Web
웹이란?
인터넷을 기반으로 구현된 서비스 중 HTTP를 이용해 정보를 공유하는 서비스를 말한다. HTTP는 웹상에서 서로 통신하기 위해 정해둔 일종의 규칙이라고 할 수 있다.
정보를 제공하는 주체는 웹 서버 (Web Server), 정보를 받는 이용자를 웹 클라이언트 (Web Client) 라고 한다.
프론트엔드와 백엔드
웹 서비스는 이용자의 요청을 기반으로 필요한 정보와 기능을 제공하는 능동형 서비스이다.
프론트엔드 (Front-end)는 이용자의 요청을 받는 부분, 즉 이용자에게 직접 보여지는 부분이다. 프론트엔드는 웹 리소스로 이루어져 있다. 모든 웹 리소스는 고유의 URI (Uniform Resource Identifier)를 가지고 있고 이 리소스를 이용해 식별된다.
대표적인 웹 리소스들은 문서의 뼈와 살을 담당하는 HTML, 생김새를 지정하는 CSS, 동작을 구현하는 JS 등이 있다.
백엔드 (Back-end)는 프론트엔드에서 받은 이용자의 요청을 처리하는 부분이다.
웹 서비스의 통신 과정
- 클라이언트 - 이용자가 브라우저를 이용해 웹 서버에 접속한다.
- 클라이언트 - 브라우저가 이용자의 요청을 해석해 HTTP 형식으로 웹 서버에 리소스를 요청한다.
- 서버 - HTTP로 전달된 이용자의 요청을 해석한다.
- 서버 - 해석한 이용자의 요청에 따라 적절한 동작을 한다.
- 서버 - 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달한다.
- 클라이언트 - 브라우저는 서버에게 응답받은 웹 리소스를 시각화해 이용자에게 보여 준다.
HTTP
HTTP란?
Hyper Text Transfer Protocol, 서버와 클라이언트의 데이터 교환을 요청과 응답 형식으로 정의한 프로토콜이다. 대표적인 포트 번호는 80이다.
HTTP의 기본 메커니즘은 클라이언트가 서버에게 요청하면, 서버가 응답하는 것이다.
HTTP 메시지
HTTP 메시지에는 클라이언트가 전송하는 HTTP 요청과 서버가 반환하는 HTTP 응답이 있다.
HTTP 헤드와 바디로 구성된다는 공통점이 있다.
HTTP 헤드
HTTP 헤드의 각 줄은 CRLF로 구분되고, 첫 줄은 시작 줄 (Start-line), 나머지 줄은 (Header)라고 부른다.
CRLF는 CR (Carriage Return)과 LF (Line Feed)의 조합으로, 커서를 현재 줄의 맨 앞으로 이동시키는 문자와 커서를 다음 줄로 이동시키는 문자의 조합이다. 주로 텍스트 파일에서 줄 바꿈을 나타내는 데 사용되는 제어 문자열이다.
헤더는 필드와 값으로 구성되고, HTTP 메시지 또는 바디의 속성을 나타낸다. 하나의 HTTP 메시지에는 0개 이상의 헤더가 있을 수 있다.
HTTP 바디
HTTP 바디는 헤드의 끝을 나타내는 CRLF 뒤, 모든 줄을 말한다. 클라이언트나 서버에게 전송하려는 데이터가 포함되어 있다.
HTTP 요청
서버에게 특정 동작을 요구하는 메시지이다. 서버는 해당 동작이 실현 가능한지, 클라이언트가 동작을 요청한 권한이 있는지 등을 검토한 후, 적절할 때만 이를 처리한다.
시작 줄
HTTP 요청의 시작 줄은 메소드 (Method), 요청 URI (Request-URI), 그리고 HTTP 버전으로 구성된다.
- 메소드: URI가 가리키는 리소스를 대상으로, 서버가 수행하길 바라는 동작 (GET, POST 등)
- 요청 URI: 메소드의 대상
- HTTP 버전: 프로토콜의 버전
예시
GET /index.html HTTP/1.1
Host: dreamhack.io
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
HTTP 응답
HTTP 요청에 대한 결과를 반환하는 메시지이다. 요청을 수행했는지, 하지 않았는지, 안 했다면 이유는 무엇인지와 같은 상태 정보 (Status)와 클라이언트에게 전송할 리소스가 포함된다.
시작 줄
HTTP 응답의 시작 줄은 HTTP 버전, 상태 코드 (Status Code), 그리고 처리 사유 (Reason Phrase)로 구성된다.
- HTTP 버전: 프로토콜의 버전
- 상태 코드: 처리 결과를 세 자릿수로, HTTP 표준인 RFC2616이 정의한 상태 코드 사용
- 처리 사유: 상태 코드가 발생한 이유 짧게 기술
예시
HTTP/1.1 200 OK
Server: Apache/2.4.29 (Ubuntu)
Content-Length: 61
Connection: Keep-Alive
Content-Type: text/html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>HTTPS
HTTP는 응답과 요청을 평문으로 전달한다. 만약 누군가 이를 가로챈다면 중요한 정보가 유출될 가능성이 있다.
HTTPS란?
HTTP over Secure socket layer의 약자로, TLS (Transport Layer Security) 프로토콜을 도입해 HTTP의 문제점을 보완한다. 대표적인 포트 번호는 443이다.
TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화한다. 공격자가 중간에 메시지를 탈취하더라도 해석이 불가능하기 때문에 HTTP 통신이 도청과 변조로부터 보호된다.
웹 서버의 URL이 http://로 시작되면 HTTP, https://로 시작되면 HTTPS 프로토콜을 사용한다는 뜻이다.
웹 브라우저
웹 브라우저
웹 브라우저는 서버와 HTTP 통신을 대신해 주고, 수신한 리소스를 시각화하여 이용자들이 쉽게 정보를 검색하고, 동영상을 보는 등 쉽게 인터넷을 사용할 수 있도록 해 준다. 뛰어난 이용자 경험 (User eXeperience, UX)을 제공하는 소프트웨어 중 하나다.
URL
Uniform Resource Locator, 웹에 있는 리소스의 위치를 표현하는 문자열이다. 브라우저로 특정 웹 리소스에 접근할 때, URL을 사용하여 이를 서버에게 요청한다.
URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성된다.
- Scheme: 웹 서버와 어떤 프로토콜로 통신할지 나타냄
- Host: Authority의 일부, 접속할 웹 서버의 주소에 대한 정보를 가지고 있음
- Port: Authority의 일부, 접속할 웹 서버의 포트에 대한 정보를 가지고 있음
- Path: 접근할 웹 서버의 리소스 경로로 '/'로 구분됨
- Query: 웹 서버에 전달하는 파라미터, URL에서 '?' 뒤에 위치함
- Fragment: 메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보, '#' 뒤에 위치함
Domain Name
URL 구성 요소 중 Host는 Domain Name, IP Address의 값을 가진다. IP Address는 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소다. 일반적으로는 도메인의 특성을 담은 이름을 정의해 IP 대신 사용한다.
Domain Name을 Host 값으로 이용하게 되면, DNS (Domain Name Server)에 Domain Name을 질의하고, DNS가 응답한 IP Adress를 사용한다.
웹 렌더링
웹 렌더링 (Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위이다.
서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여준다.
웹 렌더링은 웹 렌더링 엔진에 의해 이뤄지며, 브라우저별로 서로 다른 엔진을 사용한다.
사파리는 웹킷 (Webkit), 크롬은 블링크 (Blink), 파이어폭스는 개코 (Gaeko) 엔진을 사용한다.
개발자 도구 Devtools
개발자 도구는 HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인하게 도와주며, 자바스크립트 코드를 대상으로 디버거도 제공한다. 또한, 서버와 오가는 HTTP 패킷도 상세히 보여주기 때문에 프로토콜 상에서 발생하는 문제도 쉽게 발견 가능하다.
웹 서비스를 진단하는 도구인 만큼, 웹 취약점을 이용하려는 공격자에게도 유용하게 사용될 수 있다.
개발자 도구
브라우저에서 F12를 누르면 실행할 수 있다.
- Elements: 페이지를 구성하는 HTML 검사
- Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음
- Source: HTML, CSS, JS 등 페이지를 구성하는 리소스 확인하고 디버깅할 수 있음
- Network: 서버와 오가는 데이터를 확인할 수 있음
- Performance
- Memory
- Application: 쿠키를 포함해 웹 어플리케이션과 관련된 데이터 확인할 수 있음
- Security
- Lighthouse
요소 검사
특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있다.
요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면 대상의 정보가 출력되고, 그 상태에서 클릭하면 그와 관련된 HTML 코드가 하이라이팅 된다.
디바이스 툴바
현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있다.
Elements
HTML 읽기
현재 페이지 구성 HTML 코드를 읽을 수 있다.
HTML 수정
코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면, 이를 수정할 수 있다. 요소 검사 기능을 같이 활용하면 수정할 코드를 빠르게 선택할 수 있다.
Console
프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드도 실행해 주는 도구이다.
Windows/Linux는 Ctrl + Shift + J, macOS는 Option(⌥) +Cmd(⌘) + J을 누르면 콘솔을 사용해 브라우저에서 자바스크립트를 실행하고 결과를 확인할 수 있다.
Sources
현재 페이지를 구성하는 웹 리소스들을 확인할 수 있다.
Network
서버와 오가는 데이터를 확인할 수 있다.
- Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않는다.
- Disable cache: 이미 캐시된 리소스도 서버에 요청한다.
원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있다.
Network - Copy
로그를 우클릭하고, Copy에서 원하는 형태로 복사할 수 있다.
Copy as fetch로 HTTP Request를 복사하고 콘솔 패널에 붙여 실행하면, 동일한 요청을 서버에 재전송할 수 있다.
Application
쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다.
Console Drawer
개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있다. ESC 를 눌러 사용할 수 있다.
