Post

브라우저에 URL을 입력했을 때 벌어지는 일

Posted
By your_full_name 8 min read

본 글은 <What happens when you type a URL into your browser?>를 바탕으로 작성되었다.

1. URL을 입력하고 엔터를 누른다.

URL은 https://jennapederson.dev/the-path-to/hello-world으로 가정

URL 구조

Scheme

  • https://, ftp://, mailto://, file:// 등
  • 브라우저가 사용할 프로토콜을 결정
  • https://는 브라우저가 TLS(Transport Layer Security)를 사용해 서버와 연결하도록 지시
    • 전송 계층 보안(TLS): 개인 정보 보호 및 안전한 전송을 위해 이메일을 암호화하는 표준 인터넷 프로토콜
    • 브라우저와 서버간 교환되는 데이터는 암호화됨

Domain

  • jennapederson.dev
  • 특정 IP 주소를 가르키는 기억하기 쉬운 주소

Path

  • the-path-to
  • 요청한 리소스가 있는 서버의 경로

Resource

  • hello-world
  • 원하는 리소스의 이름
  • .html이 붙어있다면 정적 파일

2. 브라우저는 도메인의 IP 주소를 찾는다.

  • DNS는 복잡하고 매우 빠르기 때문에 DNS 데이터는 여러 레이어에 걸쳐 캐싱된다.
    • 브라우저는 브라우저 캐시, 운영체제 캐시, 라우터의 로컬 네트워크 캐시, ISP(internet service provider)의 DNS 서버 캐시를 확인하며 IP 주소를 찾는다.

DNS가 캐시를 확인하는 과정

  1. 브라우저 캐시를 확인한다.
    1. 브라우저는 이전에 방문했던 웹사이트에 대한 DNS 기록을 얼마간 보관하고 있다.
  2. 그래도 찾지 못했다면 운영체제 캐시를 확인한다.
    1. 운영체제 또한 DNS 기록을 보관하고 있기 때문에 브라우저는 시스템 호출을 해 이를 확인한다.
  3. 그래도 찾지 못했다면 라우터 캐시를 확인한다.
    1. 라우터 또한 자체로 DNS 기록을 보관하고 있다.
  4. 그래도 찾지 못했다면 ISP 캐시를 확인한다.
    1. ISP는 그 자체만의 DNS 서버를 가지고 있으며 이는 DNS 기록 캐시를 보관하고 있다.

만약 그래도 찾지 못했다면

  • ISP에서 recursive DNS 검색 진행
  • URL은 일반적으로 3단계의 도메인으로 나누어져 있고 각 레벨마다 고유의 이름 서버가 있다.

    maps.google.com이라는 도메인을 가정

    1. DNS recursor는 루트 이름 서버에 연결된다.
    2. 루트 이름 서버는 .com 도메인 이름 서버로 리다이렉트 시킨다.
    3. .com 이름 서버는 google.com 이름 서버로 리다이렉트 시킨다.
    4. google.com 이름 서버는 일치하는 IP 주소를 찾아내고 이를 DNS recursor에 보내준다. 이는 브라우저로 전달된다.

3. 브라우저는 서버와 TCP 연결을 시작한다.

  • 브라우저가 서버를 찾으면 서버와 TCP 연결을 한다.
    • 이는 TCP/IP three-way handshake를 사용한다.
    • 만약 HTTPS응 사용한다면 보안을 위해 TLS handshake를 사용한다.

TCP/IP three-way handshake

  1. 클라이언트는 SYN(synchronize) 패킷을 서버에 보내 새 연결이 가능한지 요청
  2. 서버에 새 연결이 가능한 열린 포트가 있으면 SYN/ACK(acknowledge) 패킷을 이용해 SYN 패킷을 승인
  3. 클라이언트는 서버에서 SYN/ACK 패킷을 받고 ACK 패킷을 보내 이를 승인

4. 브라우저는 서버에 HTTP 요청을 보낸다.

HTTP 요청의 구성 요소

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

GET /hello-world/ HTTP/1.1
Host: jennapederson.dev
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: <https://jennapederson.dev/>
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
dnt: 1
sec-gpc: 1

request lines

  • 클라이언트가 무엇을 원하는지에 대한 정보
    • GET /hello-world HTTP/1.1
  • 구성
    • 요청 메서드
      • GET, POST, PUT, PATCH, DELETE
    • 경로
    • HTTP 버전

headers

  • 요청에 대한 추가 정보
    1
2
3

    Host: jennapederson.dev
User-Agent: curl/7.64.1
Accept: */*
  • 키-값 쌍으로 구성

body

  • 일반적으로 GET 요청에선 비어있지만 이외 요청에 대해서는 추가하거나 수정하고자 하는 데이터를 담음
  • request header의 Content-Type를 바탕으로 서버는 포맷을 해석함

5. 서버는 요청을 처리하고 응답을 보낸다.

응답의 구성 요소

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked

<!DOCTYPE html>
<html lang="en">
<head>
    THE REST OF THE HTML

status line

  • 응답의 상태를 알림
  • HTTP 버전을 포함

response headers

  • 브라우저에게 응답을 어떻게 처리할 지 알림

요청한 리소스

  • HTML, CSS, JavaScript, 이미지 등

6. 브라우저는 컨텐츠를 렌더링한다.

  • 브라우저는 response headers를 보고 어떻게 응답받은 리소스를 처리할지 결정한다.

요약

  1. URL을 입력하고 엔터를 누른다.
  2. 브라우저는 도메인의 IP 주소를 찾는다.
    1. DNS는 캐시를 확인하며 IP 주소를 찾아 브라우저에게 전달한다.
  3. 브라우저는 서버와 TCP 연결을 시작한다.
    1. 일반적으로 HTTP 연결은 TCP/IP three-way handshake를 사용한다.
  4. 브라우저는 서버에 HTTP 요청을 보낸다.
    1. HTTP 요청에는 requests lines, headers, body가 존재한다.
  5. 서버는 요청을 처리하고 응답을 보낸다.
    1. 응답에는 응답 상태와 헤더, 요청한 리소스가 존재한다.
  6. 브라우저는 컨텐츠를 렌더링한다.

참고 자료

TIL
Web
This post is licensed under CC BY 4.0 by the author.