브라우저를 눌렀을때 발생하는 일

브라우저를 눌렀을때 발생하는 일

현재 우리는 여러 Application(Google Chrome, FireFox 등등) 을 통해서, 웹 싸이트를 쉽고 간단하게 돌아다닐 수 있다. 우리가 주소창에 www.google.com 을 입력했을때, 과연 어떤 일이 일어나게 될까?

기저 기반의 지식

해당 Process 를 이해하기 위해서는 우리가 알고있으면 좋은 여러가지 OSI 7 Layer, IP, MAC Address 등등 알면 좋은 컴퓨터 과학 지식들이 존재한다. 일단 이를 먼져 공부하고 알아보자.

MAC Address

우리의 전자기기 장치에는 MAC Address 라는 고유한 ID 가 부여되어 있다. 이러한 고유한 ID 를 부여한 이유는 무엇일까? OSI 7 Layer 의 Data Link Layer 에서는 Physical Layer 에서 받은 신호가 알맞은 Node 로 전달되도록 도와주기 위해서는 각 Node 를 구별하는 고유한 값이 필요하다. 이를 위해 MAC Address 를 이용하여, 알맞은 Node 를 식별한다.

보통 L2 Switch 에서 이를 이용하는데, 전송받은 Frame 을 어디로 보내야 하는지 알기 위해, MAC Address Table 을 이용(Look-up)해, 알맞은 Node 로 전송한다. 만약 알맞은 노드를 모른다면 Flooding 하게 된다.

IP (Internet Protocol)

우리가 자주듣고, 많이 듣는 IP 란 무엇일까? Wikipedia 에 적혀있는 설명은 아래와 같다.

컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다.

이렇게 설명만 듣게 되면 위의 MAC Address 와 별 차이가 나지 않아보인다. 하지만 비슷하지만 다른 차이점에 존재한다.

보통 IP Address 는 Internet Service 를 Provide 하는 업체에서 제공하는 Logical-Address 이고, Mac Address 는 NIC 를 만드는 업체에서 제공하게 되는 Physical-address 이다.

 

우리는 Data Link Layer 에서 MAC Address 를 통해 Frame 을 Routing 한다는 지식을 깨달았다.

IP 는 3 Layer 에 해당하는 Network Layer 에서의 Routing 을 위해 사용된다.

Network Layer 부터는 현재 LAN 에서 다른 LAN 와 통신하는 역할을 다룬다. 라고 생각하면 쉽다.

더 궁금하면 ARP 에 관한 이야기를 찾아봐도 좋다. 읽어보면 LAN 의 범위가 무엇일까? 에 대한 고민을 하게 될 것이다.

 

조금 더 쉽게 설명하기 위해 예시를 들자면, 우리가 A Switch 를 이용하고 있는데 B Switch 에 정보를 보내고 싶다면, A Switch -> A Router -> B Router -> B Switch 를 통해 정보가 전달되게 된다. 왜 우리는 Router 를 통해 통신하게 될까? Router 에는 Switch 의 Mac-address-table 과 같이, Routing Table 이라는 것이 존재한다. Routing Table 이란, 아래 사진과 같이, 특정 네트워크에 대한 경로 정보가 담겨있다. 이를 통해 Optimal 된 Route 로 빠르게 보낼 수 있다.

MAC 에서 IP Table

URL 분석

우리가 입력하는 URL Scheme 에 대해서 알아보자.

Protocol

https://www.naver.com 을 입력했을때 우리가 사용할 통신 Protocol 은 HTTPS 이다. 이는 URL Scheme 의 앞부분인, https 부분에 명시되어 있다. FTP Protocol 을 이용할 경우 ftp:// 을 이용하면 된다.

Domain

우리는 보통 www.naver.com 과 같은 부분을 Domain 이라고 한다. 우리가 위에서 봤듯이, 다른 네트워크로 정보를 전송하기 위해서는 Unique 한 정보가 필요한데, Domain 도 위와 비슷하게 이용된다. DNS Server 에 우리가 www.naver.com 을 보내게 되면, Domain에 해당 하는 IP Address 를 반환해주게 된다.

실제로 Ping 을 Domain 에 날려보면 Domain 에 해당하는 IP 가 적혀있음을 알 수 있다. 이렇게 Domain 에 해당하는 IP 는 DNS Server 가 어떻게 알 고 있을까?

DNS Record

DNS Record 에는 IP - Domain Name 이 Mapping 되어 있다.
만약 Map Data Strcuture 로 되어 있다고 생각해보면 아래와 같은 구조일 것이다.

www.naver.com : 223.130.195.95
www.google.com : 223.131.196.96
www.roach.com : 223.121.195.86

위와 같은 구조로 되어 있고, 대부분의 최소한의 Network Latency 를 위해 Caching 되어 있다.

TCP Connection

웹 브라우저 요청 패킷은 일반적으로 TCP/IP 전송제어 프로토콜을 이용합니다. TCP/IP 전송제어 프로토콜은 4계층에서 사용됩니다.

TCP/IP 연결을 맺기 위해서, 3-Way-Handshake 가 이뤄지게 됩니다. 이때 이뤄지는 과정은 아래와 같습니다.

1. Client 에서 Server 를 향해 SYN 을 보냄
2. Server 에서 Client 를 향해 SYN + ACK 를 보냄
3. Client 가 잘 받았다는 의미로 ACK 전송

위와 같은 과정 후 TCP Connection 이 맺어지게 되며, HTTPS 를 이용하게 되는 경우 예를 들면 아래와 같은 과정으로 TLS Handshake 가 발생하게 됩니다.

1. Client 가 "Hello" 메세지 전송: 이 메세지에는 클라이언트가 지원하는 TLS 버전, 지원되는 암호 제품군, "클라이언트 무작위" 라고 하는 무작이 바이트 문자열이 포함됩니다.
2. Server 가 "Hello" 메세지 전송: 이 메세지에는 서버의 SSL 인증서, 서버에서 선택한 암호 제품군, 서버에서 생상한 무작위 바이트 배열 전송.
3. 인증: 클라이언트가 서버의 SSL 인증서를 인증서 발행기관을 통해 검증. 이때 Domain 소유가자 정확한지, 인증서에 등록되어 있는지 확인
4. 예비 마스터 암호: 클라이언트가 "예비 마스터 암호" 라고 하는 무작위 바이트 문자열 전송. 예비 마스터 암호는 공개키로 암호화 되어 있으며, 서버가 개인키로만 해독 가능함.
5. 서버가 개인키를 사용하여 예비 마스터 암호 해독
6. 클라이언트가 세션 키로 암호화된 "완료" 메세지 전송
7. 서버가 세션 키로 암호화된 "완료" 메세지 전송
8. TLS HandShake 가 완료되고, 세션키를 이용해 통신 지속됨.브라우저를 통해 확인여기까지 모든 과정을 크롬 브라우저의 개발자 도구에서 아래와 같이 확인 가능하다.
   HTTP 요청 전송이제 TCP/IP Connection 까지 잘 맺어지게 됬다. 우리는 서버에 요청을 전송하기 위해서 HTTP 평문을 서버로 전송한다. (HTTP Message Structure 까지 적으면 너무 길어질 것 같으니, 검색해서 보는걸 추천한다.)

HTTP 는 7 Layer 에서 이용되는 Protocol 중 하나로 자세한 명세는 아래 Mozila 를 읽어보면 좋다
https://developer.mozilla.org/ko/docs/Web/HTTP

GET /background.png HTTP/1.0 와 같이 Client 에서 Server 에 "HTTP/1.0 으로 통신하고, /bakground.png 데이터를 받기를 원해" 라고 요청한다.

HTTP 요청 처리

HTTP 요청은 여러 Hop 들을 지나 Server 에 들어오게 되고, 각 서버에서 요청을 처리하는 Logic 으로 처리된 뒤, HTTP 요청 폼을 통해 응답을 받게 된다.

받은 응답을 브라우저에서는 Content-Type 별로 처리하게 된다.

정리하며

최대한 OSI 7 Layer 와 엮어서 내용을 정리하려고 했다. 이 내용을 정리하면서 나도 다시, 우리가 사용하고 있는 주변 장치들이나, Infra Structure 에 대해서 다시 생각해보게 됬다.

Reference

• https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
• https://m.blog.naver.com/goduck2/220142854627
• https://aws.amazon.com/ko/route53/what-is-dns/
• https://www.cloudflare.com/ko-kr/learning/ssl/what-happens-in-a-tls-handshake/