[WEB] URI와 웹브라우저 요청 흐름
Inflearn
김영한 - 모든 개발자를 위한 HTTP 웹 기본 지식
커리큘럼을 수강후 개인적으로 정리한 내용입니다.
URI와 웹 브라우저 요청 흐름
- URI
- 웹 브라우저 요청흐름
✅ URL vs URI
최근에 공부한거 복붙함
⏺ URL (Uniform Resource Locator)
네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일의 위치 정보
URL은 scheme, hosts, url-path로 구분할 수 있다.
- scheme : 통신 방식(프로토콜)을 결정 // 일반적인 웹 브라우저에서는 http(s)를 사용합니다.
- hosts : 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냄
- url-path : 웹 서버에서 지정한 루트 디렉토리부터 시작해 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냄
⏺ URI (Uniform Resource Identifier)
자원의 식별자
일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, bookmark를 포함
query는 웹 서버에 보내는 추가적인 질문이다.
http://www.google.com:80/search?q=Java 를 브라우저의 검색창에 입력하면, 구글에서 Java를 검색한 결과가 나타남.
즉 브라우저의 검색창을 클릭하면 나타나는 주소가 URI
- URI는 URL을 포함하는 상위개념이다.
- ('URL은 URI다.' 는 참이고, 'URI는 URL이다.' 는 거짓)
✔️ 빠른 이해 돕기
http://opentutorials.org:3000/main :: URL (URI)
http://opentutorials.org:3000/main?id=HTML&page=12 URI
URI는 자원의 식별자인데,
?id=HTML&page=12 해당 부분이 위치를 나타내는 것이 아니라 id값이 HTML이고 page가 12인 것을 나타내주는 식별하는 부분인것을 확인하면 이해하기 쉬울것이다.
⏺ Fragment
벨로그 글같은거 보다보면 글자를 클릭했을 때 한화면에서 위아래로 넘어다니는걸 본적이 있다.
이건 프래그먼트를 이용한것이다!
html 내부 북마크 등에 사용되고, 서버에 전송하는 정보는 아니다.
✅ 웹 브라우저 요청 흐름
http://www.google.com/search?q=hello&hl=ko를 입력하면 무슨일이 벌어질까?
1. 브라우저의 URL 파싱
- 브라우저에서 어떤 프로토콜, URL, 포트로 요청할 것인지 해석 및 분석
명시적으로 포트 선언x시, PORT번호 :: HTTPS 디폴트값으로 요청 443
2. HSTS (HTTP Strict transport security) 목록 조회
- HTTPS를 사용하는 연결만 허용하는 기능
- 만약 HTTP로 요청이 왔다면 HTTP 응답 헤더에 Strict Transport Security라는 필드를 포함하여 응답
- 이를 확인한 브라우저는 해당 서버에 요청할 때 HTTPS만을 통해 통신
- 그리고 자신의 HSTS캐시에 해당 URL을 저장하는데 이를 HSTS 목록이라고 한다
- 브라우저에서는 이 HSTS 목록 조회를 통해 해당 요청을 HTTPS로 보낼지 판단
- HSTS 목록에 해당 URL이 존재한다면 명시적으로 HTTP를 통해 요청한다 해도 브라우저가 이를 HTTPS로 요청 한다
3. URL을 IP 주소로 변환
브라우저에서 로컬hosts 파일과 브라우저 캐시에 해당 URL 존재 여부를 확인 함.
없으면 DNS서버 조회해서 URL 을 IP로 변환
4. 라우터를 통해 해당 서버의 게이트웨이까지 이동
인터넷 망으로 던지면 수많은 노드를 거쳐서 패킷이 도착함.
5. ARP를 통해 IP주소를 MAC 주소로 변환
- 실질적 통신을 하기 위해서는 논리 주소인 IP를 물리 주소인 MAC으로 변환해야 한다
- 이를 위해 해당 네트워크 내에서 ARP를 브로드 캐스팅 함
- 해당 IP주소를 가지고 있는 노드는 자신의 MAC 주소를 응답한다
6. 대상 서버와 TCP 소켓 연결
- 대상 서버와 통신을 하기 위해 TCP 소켓 연결을 진행 (3-way-handshake)
- TCP - SYN
- TCP - SYN+ACK
- TCP - ACK
- 암호화 통신을 위한 TLS 핸드셰이킹 추가
- TLS Client Hello
- TLS Server Hello
- TLS Finished
7. HTTP(HTTPS) 프로토콜로 요청, 응답
- 연결이 되었으니, 요청하였던 페이지를 달라고 서버에게 요청한다
- 서버에서는 해당 요청을 받고, 수락 할 수 있는 요청인지 검사
- 올바른 요청일시, 서버는 요청에 대한 응답을 생성하여 브라우저로 전달한다.
7-1 ) 클라이언트의 http 요청 메세지
7-2 ) 패킷 생성과 전송
7-3 ) 서버의 http 응답 메세지
- 서버는 받은 패킷에서 tcp/ip 패킷을 까서 버리고 전송데이터(http 메세지)를 본다.
- 수락 가능한 요청인지 검사 후, 올바른 요청일 경우 요청에 대한 응답을 생성하고 클라이언트에게 보낸다.
- Content-Type : text/html;charset=UTF-8
8. 브라우저에서 응답을 해석
- 서버에서 응답한 내용은 HTML, CSS, Javascript 등으로 이루어져 있다
- 브라우저가 해석하여 화면에 그려준다.
- 구문 분석(HTML, CSS, JS) 및 파싱 → 렌더링 → DOM트리 구성 → 렌더트리 구성 → 렌더트리 배치
→ 렌더트리 그리기
References