[CS 기본 - 웹의 시작 ] 1. 브라우저에서 도메인을 입력하고 웹사이트에 접속하는 과정

0. 선요약 : 도메인을 입력하면, 브라우저는 DNS 해석(도메인 -> IP주소)로 변환하는 과정 을 거칩니다. 첫째로 브라우저는 캐시를 확인하여 캐시에 IP주소가 있다면 바로 사용합니다. 브라우저  캐시  > 운영체제 캐시 > 로컬 DNS 서버 확인을 해서 없으면, ISP의 DNS 서버에 질의하여, 계정적 구조를 통해 도메인 해석을 하여 IP 주소를 반환합니다.

웹사이크가 HTTPS를 사용한다고 하면, SSL/TLS 통신이 필요로 한다. 

 

그 이후로 TCP 통신으로 3 핸드쉐이크로 브라우저는 웹서버와 연결한다.

HTTPS라면 SSL 핸드 쉐이크를 통해서 브라우저(클라이언트)는 SSL 연결 요청을 보내고, 서버는 인증서를 브라우저로 보냅니다. 3. 브라우저는 서버가 보낸 인증서를 검증하는데, 어떤 CA, 어떤 root 인증 기관에서 보냈는지를 확인하고자 내장된 인증기관 중에 있는 기관인지를 확인하고 검증합니다. 검증 방법으로는 CA 인증기관의 공개키들을 내장하고 있는데, 그 인증기관의 공개키로 복호화했을 때, 성공하면 검증된 인증기관으로 판단하여, 대칭키를 서버와 공유하여 데이터들을 주고 받습니다.  

 

 

 

--- 상세내용 ---

 

브라우저에서 도메인을 입력하고 웹사이트에 접속하는 과정은 여러 단계를 거치며, 이 과정은 도메인 이름 해석, 서버와의 연결, 데이터 전송 등을 포함합니다. 각 단계의 주요 흐름을 설명하겠습니다.

1. 도메인 입력

사용자가 브라우저 주소창에 www.example.com 같은 도메인을 입력하면, 브라우저는 이를 처리하여 웹사이트에 접속하기 위한 준비를 시작합니다.

2. DNS(Domain Name System) 해석

도메인 이름을 IP 주소로 변환하는 과정입니다. 컴퓨터는 도메인 이름 대신 IP 주소를 사용하여 웹 서버에 접속하므로, DNS를 통해 도메인 이름을 IP 주소로 해석해야 합니다.

2.1. 캐시 확인

브라우저는 먼저 캐시에 저장된 DNS 정보를 확인합니다. 캐시에 IP 주소가 있으면 바로 사용합니다. 캐시는 다음 순서로 확인됩니다:

• 브라우저 캐시
• 운영 체제 캐시
• 로컬 네트워크의 DNS 서버

2.2. DNS 서버 조회

캐시에 IP 주소가 없으면, 브라우저는 ISP(인터넷 서비스 제공자)의 DNS 서버에 질의합니다. DNS 서버는 계층적 구조를 통해 도메인을 해석하며, 최종적으로 해당 도메인의 IP 주소를 반환합니다.

3. TCP 연결 설정 (3-way handshake)

IP 주소를 얻은 후, 브라우저는 웹 서버와 연결하기 위해 TCP 연결을 설정합니다. 이는 3-way handshake라는 과정을 거칩니다:

1. SYN: 브라우저가 서버에 연결 요청(SYN)을 보냅니다.
2. SYN-ACK: 서버가 연결 요청을 승인하고 응답(SYN-ACK)을 보냅니다.
3. ACK: 브라우저가 최종 승인(ACK)을 보내면 연결이 설정됩니다.

4. HTTPS 핸드셰이크 (SSL/TLS)

웹사이트가 HTTPS를 사용한다면, 추가로 SSL/TLS 핸드셰이크가 수행됩니다. 이 과정에서 브라우저와 서버는 보안 연결을 설정하기 위해 암호화 키를 교환합니다.

1. 브라우저는 서버에게 SSL/TLS 연결을 시작하겠다고 요청합니다.
2. 서버는 SSL 인증서를 브라우저에게 보냅니다.
3. 브라우저는 인증서를 검사하여 신뢰할 수 있는지 확인하고, 대칭 키를 생성하여 서버에 전달합니다.
4. 서버와 브라우저는 이제 이 대칭 키를 사용하여 암호화된 데이터 통신을 시작합니다.

5. HTTP 요청 전송

연결이 설정되면, 브라우저는 웹 서버에 HTTP 요청을 전송합니다. 일반적으로 브라우저는 GET 요청을 통해 웹 페이지의 리소스를 요청하게 됩니다. 요청에는 다음과 같은 정보가 포함됩니다:

• HTTP 메서드: GET, POST 등
• URL 경로: /index.html 같은 경로
• 헤더: 사용자 에이전트 정보, 쿠키 등
• 본문 (POST 요청의 경우): 전송할 데이터

6. 서버의 응답

웹 서버는 요청을 처리하고, 그에 대한 HTTP 응답을 브라우저에 반환합니다. 응답은 다음과 같은 요소로 구성됩니다:

• 상태 코드: 요청이 성공했는지 여부를 나타냅니다 (예: 200 OK, 404 Not Found).
• 응답 헤더: 응답에 대한 메타데이터 (콘텐츠 유형, 캐시 제어 등).
• 본문: 요청된 리소스의 데이터(HTML, JSON, 이미지 등).

7. 브라우저의 렌더링 과정

브라우저는 받은 HTML, CSS, JavaScript 파일을 렌더링하여 웹 페이지를 표시합니다. 이 과정은 여러 단계를 포함합니다:

1. HTML 파싱: HTML 파일을 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
2. CSS 파싱: CSS 파일을 파싱하여 스타일을 적용합니다.
3. JavaScript 실행: JavaScript 코드가 포함된 경우 이를 실행하여 페이지에 동적인 기능을 추가합니다.
4. 레이아웃 계산 및 페인팅: 요소의 위치와 크기를 계산하고, 화면에 그립니다.

8. 추가 리소스 요청

초기 HTML 문서에는 이미지, 스타일시트, 스크립트 등의 추가 리소스가 포함될 수 있습니다. 브라우저는 이를 확인하고 서버에 추가 요청을 보내 다운로드합니다.

9. 캐싱 및 최적화

브라우저는 리소스를 캐싱하여 이후 요청 시 빠르게 로드할 수 있도록 최적화합니다. 이를 통해 페이지 로딩 시간을 단축할 수 있습니다.

10. 최종적으로 웹 페이지가 표시

모든 리소스가 로드되고 렌더링이 완료되면, 사용자는 웹사이트를 완전히 탐색할 수 있게 됩니다.

요약

1. 도메인 입력: 사용자가 브라우저에 도메인 이름을 입력합니다.
2. DNS 해석: 도메인 이름이 IP 주소로 변환됩니다.
3. TCP 연결 설정: 웹 서버와 TCP 연결을 설정합니다.
4. HTTPS 핸드셰이크(보안 연결일 경우): SSL/TLS를 통해 보안 연결을 설정합니다.
5. HTTP 요청 전송: 브라우저가 서버에 HTTP 요청을 보냅니다.
6. 서버의 응답: 서버가 요청된 리소스를 응답합니다.
7. 브라우저의 렌더링: 브라우저가 받은 데이터를 해석하여 화면에 표시합니다.
8. 추가 리소스 요청: 필요한 추가 리소스를 다운로드하여 표시합니다.

이러한 과정을 통해 브라우저는 웹사이트를 사용자에게 표시합니다.