브라우저에 google.com을 치면 무슨 일이 일어날까?

브라우저에 google.com을 입력했을때 발생하는 일들을 차례대로 알아보자

1. 주소창에 URL을 입력한다.

• google.com을 입력했다고 해보자

2. 웹 브라우저는 입력한 URL을 분석한다.

URL 문법이 올바르지 않은 경우

• URL 문법에 맞지 않으면, 기본 검색 엔진으로 입력을 검색한다.
• 예를들어 구글 크롬의 기본 검색 엔진이 구글로 되어있는 상태에서
• URL 문법에 맞지 않은 #@$#@를 브라우저 주소 창에 입력하면, 구글에 #@$#@를 검색한 페이지를 보여준다.

URL 문법이 올바른 경우 URL에 인코딩을 적용한다.

• URL에 US-ASCII가 아닌 문자가 존재하면 인코딩한다. (URL은 US-ASCII 문자 집합을 사용한다.)
  • 도메인 네임은 퓨니코드(Punnycode) 인코딩을 적용한다. (퓨니코드 변환기)
  • 도메인 네임이하 경로에는 퍼센트 인코딩을 적용한다.

3. HSTS(HTTP Strict Transport Security) 목록을 로드한다.

• HSTS는 클라이언트에게 https 요청을 강제하도록 권장하는 것이다.

• 클라이언트가 최초로 웹 서버에 접속시도를 하면, 웹 서버는 HSTS 설정에 대한 정보를 클라이언트에게 응답한다.

• 클라이언트(브라우저)는 일정시간 내에 HSTS 응답을 받은 웹 서버에 대해서 https 접속을 강제화 당한다.

• 정리하자면, 브라우저는 URL 분석을 한 후에 HSTS 목록을 확인한다.
• 만약 목록에 접속하고자하는 웹 서버가 있으면 https로, 없으면 http로 요청한다.

4. DNS(Domain Name Server)를 조회하여 IP주소를 얻어낸다.

• 도메인 네임을 ip 주소로 변환한다.
• 브라우저 캐시와 hosts 파일을 확인해서 도메인 네임에 해당하는 ip 주소가 있는지 확인한다.
• 확인이 안 되면, DNS 서버로 요청을 보내서 ip 주소를 알아낸다.

6. ARP(Address Resolution Protocol)로 IP주소에 대한 MAC 주소를 얻어낸다.

7. TCP 통신을 시작한다.

• 3-way-handshake를 통해 TCP 연결을 확립한다.
• 4-way-handshake를 통해 TCP 연결을 종료한다.

8. HTTPS인 경우 SSL(TLS) handshake 과정이 추가된다.

9. HTTP 프로토콜로 요청한다.

10. HTTP 서버가 응답한다.

11. 웹 브라우저가 렌더링한다.

• 서버가 리소스(HTML, CSS, JS, Image)를 브라우저에게 제공한다.
• 브라우저는 DOM Tree, CSSSOM Tree, Render Tree를 만들고 렌더링해서 사용자에 눈에 웹 페이지가 보인다.
  • DOM(Document Object Model) : HTML 요소들의 구조화된 표현
  • CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현
  • Render Tree : DOM Tree와 CSSSOM Tree를 결합하여 렌더링 트리를 기준으로 화면에 페인팅한다.

🐥 참고

• DOM이란 무엇인가?

• HSTS (HTTP Strict Transport Security) 개념과 설정
• https://owlgwang.tistory.com/1
• https://goodgid.github.io/HTTP-URL-Endocidng/
• https://velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80#:~:text=%EB%A0%8C%EB%8D%94%20%ED%8A%B8%EB%A6%AC%EB%9E%80%20%EC%9B%B9%20%ED%8E%98%EC%9D%B4%EC%A7%80,%EB%91%90%20%EB%AA%A8%EB%8D%B8%EC%9D%B4%20%ED%95%84%EC%9A%94%ED%95%98%EB%8B%A4.