심심한잉여의 잡동사니

브라우저(크롬)에 URL을 입력하면 어떤일이 벌어지나요? 본문

코딩일기/네트워크

브라우저(크롬)에 URL을 입력하면 어떤일이 벌어지나요?

심심한잉여 2022. 8. 22. 21:10
반응형

브라우저(크롬)에 URL을 입력하면 어떤일이 벌어지나요?
최근에 많이 질문받는 면접 질문이라고 생각되어 포스팅을 한번 해보려고 한다.

"브라우저에 google.com을 입력하면 어떤일이 벌어지나요?"와 같은 질문을 받을 수도 있다.

간단하게 정리를 해보면
1. 브라우저 주소창에 google.com을 입력
2. 브라우저가 google.com의 IP주소를 찾기 위해 캐시에서 DNS 기록을 확인
3. 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버가 DNS 쿼리로 google.com을 호스팅하는 서버의 IP주소를 찾는다.
4. 브라우저가 해당 서버와 TCP 연결을 시작한다.
5. 브라우저가 웹 서버에 HTTP 요청을 보낸다.
6. 서버가 요청을 처리하고 응답을 보낸다.
7. 서버가 HTTP 응답을 보낸다. 
8. 브라우저가 HTML 컨텐츠를 보여준다.

2. 브라우저가 google.com의 IP주소를 찾기 위해 캐시에서 DNS 기록을 확인

DNS는 인터넷 주소록과 같다. DNS는 웹 사이트의 IP 주소와 도메인 주소를 연결해주는 시스템이다.
인터넷의 모든 URL에는 고유한 IP주소가 할당되어 있으며, IP주소는 액세스 요청 웹사이트의 서버를 호스트하는 컴퓨터에 속한다. 예를 들어 네이버나 구글의 URL에 123.456.789 라는 IP주소가 있다면 https://123.456.789 로 브라우저에 입력을 한다하면 네이버나 구글에 대한 값이 나온다는 것을 알 수 있다. 

TIP) cmd 창에 nslookup naver.com 혹은 nslookup google.com 을 검색하면 해당 DNS들의 IP주소를 알아낼 수 있다.

DNS 기록을 찾기 위해 브라우저는 네 개의 캐시를 확인한다.
 - 브라우저 캐시 : 웹 사이트의 DNS 기록을 일정기간동한 저장한다.
 - OS캐시 : 브라우저 캐시에 원하는 DNS 레코드가 없다면 내 컴퓨터 OS에 시스템 호출을 통해 DNS 기록을 가져온다. 
 - 라우터 캐시 : 컴퓨터에도 원하는 DNS 레코드가 없다면 브라우저는 라우터에서 DNS 기록을 저장한 캐시를 확인한다.
 - ISP 캐시 : 브라우저는 ISP에서 DNS 기록을 찾는다. ISP는 DNS 서버를 가지고 있는데 해당 서버에서 DNS 기록 캐시를 검색할 수 있다.

3. 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버가 DNS 쿼리로 google.com을 호스팅하는 서버의 IP주소를 찾는다.

 

DNS 쿼리의 목적은 웹 사이트에 대한 올바른 IP 주소를 찾을 때까지 인터넷에서 여러 DNS 서버를 검색하는 것이다.
필요한 IP 주소를 찾거나 찾을 수 없다는 오류 응답을 반환할 때 까지 한 DNS 서버에서 다른 DNS 서버로 검색이 반복적으로 계속 되기 때문에 이 유형의 검색을 재귀적 질의(Recursive Query)라고도 한다.
이런 상황에 우린 ISP의 DNS 서버를 DNS 리커서라고 부르는데 DNS 리커서는 인터넷의 다른 DNS서버에 답변을 요청하여 의도된 도메인 이름의 적절한 IP 주소를 찾는 일을 담당한다. 다른 DNS 서버는 웹 사이트 도메인 이름의 도메인 아키텍쳐를 기반으로 DNS 검색을 수행하므로 네임 서버라고도 한다.

DNS 서버에서 인터넷 도메인 이름을 사용해 인터넷 주소를 알아내는 과정을 DNS 룩업이라 한다.

DNS리커서가 루트 네임서버에 연결한다. 루트 네임 서버는 리커서를 .com 도메인 네임 서버로 리다이렉션한다.
.com 네임 서버는 google.com로 리다이렉션을 하여 일치하는 IP주소를 찾아 DNS 리커서로 반환하고 리커서는 이를 브라우저로 다시 내보낸다.

위와 같은 요청은 내용 및 IP 주소와 같은 정보를 작은 데이터 패킷에 담겨 전송된다. 이 패킷은 올바른 DNS 서버에 도달하기 전에 클라이언트와 서버 사이의 여러 네트워크 장비를 통해 이동한다. 

이 장비는 라우팅 테이블을 사용하여 패킷이 목적지에 도달할 수 있는 가장 빠른 방법을 알아낸다. 만약 이동 도중에 패킷이 손실되면 요청 실패 오류가 발생한다. 그렇지 않으면 올바른 DNS 서버를 도달하여 IP주소를 가져온 후 브라우저로 돌아간다. 

4. 브라우저가 해당 서버와 TCP 연결을 시작한다.

브라우저가 올바른 IP 주소를 응답받게 되면 IP 주소와 일치하는 서버에 연결해 정보를 전송한다.
브라우저는 인터넷 프로토콜을 사용하여 이러한 연결을 구축한다. 사용할 수 있는 여러가지 인터넷 프로토콜이 있지만 일반적으로 HTTP 요청에서는 TCP라는 전송 제어 프로토콜을 사용한다. 

인터넷 프로토콜 패킷 교환 네트워크에서 정보를 주고 받는데 사용하는 정보 위주의 규약이며 OSI 네트워크 계층에서 호스트의 주소 지정과 패킷 분할 및 조립 기능을 담당한다. 줄여서 IP라고도 한다.

내 컴퓨터와 서버 간에 데이터 패킷을 전송하려면 TCP 연결을 해야한다. 이 연결은 TCP/IP 3-way handshake라는 연결 과정을 통해 이뤄진다. 클라이언트와 서버가 연결 요청 및 승인 메세지를 교환하여 연결을 설정하는 3단계 프로세스 이다.

1. 클라이언트가 인터넷을 통해 서버에 SYN 패킷을 보내 새 연결이 가능한지 여부를 묻는다.
2. 서버에 새 연결을 수락할 수 있는 열린 포트가 있는 경우 SYN/ACK 패킷을 사용하여 SYN 패킷의 ACK으로 응답한다.
3. 클라이언트는 서버로부터 SYN/ACK 패킷을 수신하고 ACK 패킷을 전송하여 승인한다.

 

5. 브라우저가 웹 서버에 HTTP 요청을 보낸다.

TCP 연결이 설정되면 데이터 전송이 시작된다. 브라우저는 google.com 웹 페이지를 요청하는 GET 요청을 보낼 것이다.
만약 자격 증명을 입력하거나 form을 제출하는 경우 POST 요청을 사용할 수 있다. 이 요청에는 브라우저 식별, 수락할 요청 유형 및 추가 요청을 위해 TCP 연결을 유지하라는 연결 헤더와 같은 추가 정보도 포함된다.
또한 브라우저가 이 도메인에 대해 저장한 쿠키에서 가져온 정보도 전달한다.
GET 요청은 아래와 같다.

6. 서버가 요청(Req)을 받고 적절한 응답(Resp)을 보낸다.

서버에는 웹 서버(아파치 등)가 포함되어 있는데 이는 브라우저로부터 요청을 받고 해당 내용을 Request handler에 전달하여 응답을 읽고 생성하는 역할을 한다.
Request handler는 요청, 요청의 헤더 및 쿠키를 읽고 필요한 경우 서버의 정보를 업데이트하는 프로그램이다. 그런 다음 응답을 특정 포맷(JSON, XML, HTML)으로 작정한다.

7. 서버가 HTTP 응답을 보낸다.

서버 응답에는 요청한 웹 페이지와ㅣ 함께 상태코드, 압축 유형 페이지 캐싱 방법, 설정할 쿠키, 개인 정보 등이 포함된다.
Status Code 헤더에 상태 코드가 숫자로 표시된다. 이것은 우리에게 response의 상태를 알려주기 때문에 매우 중요하다.
숫자 코드를 사용하여 HTTP 응답 결과를 다섯가지 상태로 나타낸다.


1xx : 정보 메세지만 나타내며 서버가 요청을 받았으며 서버에 연결된 클라이언트는 계속 작업하라는 것

2xx : 서버에 요청이 성공했음을 나타냄

3xx :  요청 완료를 위해 추가 작업 조치가 필요함을 뜻함

4xx : 클라이언트의 요청에 에러가 있음

5xx : 서버 측의 오류로 요청을 수행할 수 없음

따라서 오류가 발생한다면 HTTP 응답을 확인하여 수신 상태를 확인할 수 있다.

8. 브라우저가 HTML 컨텐츠를 보여준다.

브라우저는 HTTP를 통해 응답받은 HTML을 화면에 단계별로 표시한다. 첫째, HTML 골격을 렌더링한다. 그런 다음 HTML 태그를 확인하고 이미지, CSS 스타일 시트, 자바 스크립트 파일 등과 같은 웹 페이지의 추가 요소에 대한GET 요청을 보낸다. 

 

따라서, 브라우저에 도메인을 입력하게 되면
URL에 대해 캐시로부터 확인을 하고 캐시에 URL에 대한 정보가 없다면 DNS 서버에서 DNS쿼리로 URL의 IP를 찾는다.
IP를 찾았다면 브라우저가 해당 IP주소에 있는 서버에 TCP 연결을 시도하며 연결이 되면 브라우저가 웹서버에  HTTP 요청을 보낸다.
요청받은 서버는 그에 맞는 로직을 돌고 다시 클라이언트 측으로 응답을 보내주며 이 응답을 받은 브라우저는 HTML을 통해 화면을 보여준다.

반응형