브라우저의 동작

Jinhyeon Son·2020년 6월 28일

개념

목록 보기

22/26

브라우저의 기본 구조

UI

브라우저에 종속적인 렌더된 HTML부 이외의 모든 부분
ex) 주소 표시줄, 이전/다음 페이지 버튼, 북마크 등
브라우저 엔진

UI가 렌더링 엔진에 쿼리를 전달할 수 있도록 동작 제어
렌더링 엔진

HTML과 CSS문서를 파싱/해석하여 화면에 표현
통신부

HTTP 요청과 같은 네트워크 호출을 담당하며 플랫폼 독립적이다
(브라우저와 관계가 없다)
UI 백엔드

플랫폼에서 명시하지 않은 기본적인 인터페이스로서 위의 UI와 다르게
브라우저가 아니라 OS에 종속적이다
ex) 콤보 박스, 타이틀 바 디자인 등
자바스크립트 interpreter

렌더링 엔진이 HTML에서 script를 만났을 때 실행되며
자바스크립트 코드를 해석하고 실행하여 DOM을 제어한다
자료 저장소

쿠키 등 모든 종류의 자원을 디스크에 저장하는 계층

렌더링

response받은 내용을 브라우저 화면에 표시해주는 과정

렌더링 동작 과정

DOM 트리 구축을 위한 HTML 파싱

파싱된 HTML 태그를 DOM 트리화하고 스타일 요소를 파싱한다
외부 스타일 시트와 HTML표시 규칙은 렌더 트리를 생성한다
렌더 트리 구축

HTML 태그들에 스타일 속성 부여
렌더 트리 배치

각 노드가 렌더 트리의 속성값에 따라 정확한 위치에 배치
렌더 트리 그리기

각 노드가 화면에 그려짐
UI 백엔드의 요소가 사용된다

DOM 트리 구축이 완료 되면 JS를 다운로드하면서 파싱하고
렌더 트리 생성이 끝나면 브라우저는 화면을 배치하고 그리는 순서를 갖는다

DOM이란?

Document Object Model
프로그래밍 언어가 페이지에 접근할 수 있는 방법을 제공하여 
문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다

DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

항상 유효한 HTML 형식입니다.
자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
가상 요소를 포함하지 않습니다. (Ex. ::after)
보이지 않는 요소를 포함합니다. (Ex. display: none)

브라우저에 URL을 입력했을때

URL 분석
DNS 조회
HTTP Strict Tranport Security 목록 확인
HTTP Request

URL 분석

Protocol은 대표적으로 http, https, ftp 등이 될 수 있다
각 부분은 구분자인 :로 구분된다
프로토콜에 따라 ://뒤에 추가 정보를 기입한다 (HTTP의 경우 IP, domain)
- http://www.somehost.com/a.gif - IP 혹은 Domain name 정보가 필요한 형태
  (www.somehost.com에 있는 a.gif를 가리키고 있음 )
- ftp://id:pass@192.168.1.234/a.gif - IP 혹은 Domain name 정보가 필요한 형태
  (192.168.1.234에 있는 a.gif를 가리키고 있음 )
- somebody@mail.somehost.com - IP정보가 필요없는 프로토콜
  (mailto 프로토콜은 단지 메일을 받는 사람의 주소를 나타냄 )
Port는 request의 destination port이다

입력한 URL이 문법에 맞다면 웹브라우저는 기본 검색 엔진으로 HTTP request를 발신한다
port가 URL에 포함되어 있지 않다면 HTTP의 wellknown port인 80을 사용한다

DNS 조회

브라우저에 domain이 캐시되어있는지 확인
PC의 localhost 확인
local DNS로 domain에 대한 DNS query
domain에 맵핑된 IP 획득

DNS flow

도메인이 계층구조를 가짐에 따라 DNS도 계층화 되어있기 때문에
DNS query는 다음과 같은 수행 순서를 갖는다

통신사 별로 지정된 DNS서버에 www.naver.com에 대한 DNS query
query를 받은 DNS 서버가 ROOT name server에 www.naver.com query 중계
ROOT name server가 하위 .com name server의 IP 응답
.com name server에 www.naver.com query
.com name server에서 응답받은 www.naver.com의 IP를 브라우저에게 응답

HSTS 확인

어떤 웹 서버가 HTTPS 요청만 허용하는 경우 서버는 response에 
expiration time이 존재하는 HSTS헤더를 포함하여 응답한다.
브라우저는 이 응답을 기록하여 해당 웹 서버에 HTTP로 접근하는 시도를 
자동으로 HTTPS로 변경한다.
만약 HSTS 헤더에 명시된 expiratrion time이 만료되면 해당 웹 서버에 대한
HSTS기록은 사라지고 다시 HTTP로 접근 할 수 있게 된다

URL 분석이 끝난 이후 브라우저는 HSTS 목록을 로드해서 확인 후
해당 URL이 HSTS목록에 있으면 HTTPS로 변환하여 HTTP요청을 보낸다

HTTP request

위의 DNS와 같이 HTTP 요청 또한 네트워크를 통해 수행되므로
브라우저에 대해 독립적이며 OS 종속적인 부분이다

HTTP request 메시지를 만든다
DNS에서 resolve한 IP에 대해 TCP 연결 (3-way handshake)
HTTP request 메시지 전송
HTTP response 수신
TCP 연결 해제 (4-way handshake)

HTTPS의 경우

HTTPS는 기존 HTTP + Secure protocol로 
기존 HTTP의 구조에 SSL을 씌워 http 메시지를 암호화한다

HTTP의 문제

encode되지 않은 평문을 전송하기 때문에 네트워크상에서 스니핑되었을 때
별다른 처리 없이 평문 해석이 가능
통신 상대를 확인하지 않기 때문에 위장이 가능
무결성을 증명할 방법이 없어 파일 변조가 가능

특징

공개키 암호화 방식과 대칭키 암호화 방식을 동시에 사용

공개키 암호화 방식이란 암호학적으로 연관된 한 쌍의 키(공개키, 개인키)를
사용하는 암호화 방식으로 서버가 개인키를, 클라이언트가 공개키를 받아 암호화에 사용하며
개인키로 암호화한 데이터는 공개키로, 공개키로 암호화한 데이터는 개인키로만 복호화 가능하다
공개키 암호화 방식을 이용해 대칭키(세션키)를 전송하고 이 세션키를 이용해
HTTP message를 암호화하는 방식을 사용한다
Transport Layer Security를 사용하여 세션 암호화

단점

공개키에 대한 무결성을 보장하기 위해 Certificate Associate(KISA 등)
에 등록하여(유료) 신뢰할수 있는 사이트임을 인증 받고 공개키를 관리해야한다
TLS 세션 성립 과정이 추가되므로 HTTP보다 느린 속도

동작

클라이언트가 서버에게 지원 가능한 보안 연관 (암호, 키교환, 서명, 압축 방식 등)을
서버에게 알린다
클라이언트에게 지원 가능한 보안 연관과 인증서를 응답한다
CA에 인증서 인증 및 서버의 공개키를 획득하고 세션키를 생성
세션키를 생성하고 공개키로 암호화하여 서버로 전송
세션키 복호화
서버는 클라이언트와 서버가 동시에 사용가능한 보안 연관을 다음 통신부터 적용할 것을 알림
(ChangeCipherSpec Message), 클라이언트 또한 CCS 메시지를 전송
앞 단계에서 공유된 세션키로 암호화 통신 시작
TCP 세션이 종료되면 세션키는 폐기된다