브라우저가 화면을 표시하는 과정1 : Navigation

목적: 브라우저가 화면을 띄우는 과정을 다시 한번 정리한다.

이 글은 https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid

과 https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work 을 종합해서 번역했습니다.

url 주소바에 방문하고자 하는 웹사이트의 url을 입력하면 필요한 데이터를 웹서버로부터 전달받아서 화면에 표시합니다.

예를 들면 www.naver.com을 입력하면 브라우저가 네이버가 가지고 있는 서버에게 첫 화면을 구성하는 파일을 요청합니다.

그리고 네이버의 웹서버는 네이버 첫 화면을 구성하는 html, css, js파일(프론트엔드를 구성하는 파일)을 응답하고 브라우저가 이것들을 해석해서 우리 눈에 보이는 화면이 그려지게 됩니다.

 

이 지나치게 단순화된 과정을 디테일하게 살펴보겠습니다.

과정의 구분은 

1. Navigation

2. Fetching Data

3. parsing the HTML

4. parsing the CSS

5. executing the Javascript

6. creating the accessibility tree 

7. the Render Tree

로 할 수 있습니다.

 

첫번째 구분인 Navigation(이하 내비게이션) 단계를 살펴보겠습니다.

내비게이션은 유저가 주소창에 url을 입력하거나 링크를 클릭하거나 폼을 제출했을 때 웹사이트를 로딩하는 첫 단계입니다.

내비게이션의 첫 단계는 DNS Lookup이라고 부르는 과정입니다. DNS를 찾는다고 볼 수 있습니다. DNS란 Domain Name System의 약자로서 호스트명과 요청한 웹사이트의 실제 정적파일들이 서빙될 서버의 IP주소를 연결해서 저장하고 있는 데이터베이스로 볼 수 있습니다. naver.com을 입력하면 DNS에 들러서 naver.com과 매칭되는 IP주소를 가져올 수 있습니다. 예를 들어, naver.com의 IP는 999.999.9.9라는 IP주소를 가지고 있고 이것을 반환하게 됩니다. 

단, 브라우저는 이 도메인네임과 ip주소를 캐싱하기 때문에 일정 시간동안은 dns lookup을 하지 않고도 ip주소를 알 수 있습니다. 캐시가 되어있는 동안은 dns를 실제로 방문할 필요가 없기 때문에 좀 더 빠를 겁니다.

이렇게 찾아낸 naver.com 웹서버의 ip주소를 통해 네이버의 정적파일들을 받으려고 합니다. 

ip주소를 찾았으니 끝이 아닙니다. 내비게이션의 두 번째 과정으로 TCP handshack라는 과정을 거칩니다.

TCP핸드셰이크란 클라이언트(브라우저)와 서버가 네트워크를 통해 패킷으로 성공적으로 데이터를 전달할 준비를 완료했다는 것을 서로 확인하는 과정이라고 생각하면 됩니다. 자세한 과정은 TCP 핸드쉐이크 검색해서 다른 자료를 참고해 주세요.

TCP핸드셰이크가 완료되면 세 번째 과정은 TLS negotiation 과정이 시작됩니다.

이것은 HTTPS를 통해 설정된 보안연결을 위해 필요한 과정입니다. TLS핸드셰이크 과정은 통신간 암호화를 할 때 보안키는 어떤 것을 사용할 것인지 확인하고 실제 데이터를 보내기 전에 서버가 확실히 보안이 설정되어 있는지 확인하는 과정입니다.

HTTPS가 데이터를 암호화하고 이것을 서버와 복호화하는 복잡한 과정은 다른 자료를 참고해 주세요.

TLS 핸드셰이크 과정은 아래와 같습니다.

1. 클라이언트가 인사합니다. 브라우저가 TLS버전, 암호화키, 클라이언트랜덤이라고 알려진 랜덤 한 바이트의 스트링을 포함한 메세지를 서버에게 보냅니다.

2. 서버는 서버의 SSL인증서, 서버가 선택한 암호화키, 서버가 생성한 랜덤한 바이트의 스트링인 서버랜덤을 포함한 메세지를 보냅니다.

3. 브라우저는 서버가 보낸 SSL인증서를 발급기관에 확인하고 이를 통해 브라우저는 서버의 정체를 입증합니다.

4. 브라우저는 서버가 보낸 SSL인증서에 포함된 공개키로 암호화한 랜덤한 스트링을 다시 보냅니다. 이것을 프리마스터 시크릿이라고 부릅니다. 프리마스터 시크릿은 오직 개인키를 가진 서버에서만 복호화할 수 있습니다. 

5. 서버는 개인 키로 프리마스터 시크릿을 복호화합니다.

6. 브라우저와 서버는 클라이언트랜덤, 서버랜덤, 프리마스터시크릿을 사용해서 세션키를 만들어냅니다.

7. 브라우저게 서버에서 모든 과정이 끝났다는 메시지를 보냅니다.

8. 서버도 브라우저에게 모든 과정이 끝났다는 메세지를 보냅니다.

9. 안전한 대칭 암호화가 만들어졌습니다. 핸드셰이크가 완료되고 세션키를 사용해서 통신을 할 준비가 끝났습니다.

 

이렇게 하면 드디어 실제 데이터를 서버에 요청할 준비가 되었습니다.

 

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Populating the page: how browsers work - Web performance | MDN

https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid

How web browsers work - navigation (part 1, with illustrations) ⚙️💥