[24.01.10]

CS 공부

브라우저의 작동 방식

브라우저의 주요 기능은 URI 주소로 서버에 자원을 요청하고 그 자원을 브라우저에 표시하는 것이다.

사용자 인터페이스 - 브라우저 엔진, 자료 저장소 - 렌더링 엔진 - 통신, 자바스크립트 해석기, UI 백엔드

로 이루어져 있다.

 

서버에 요청을 보내는 과정

브라우저 주소창에 url을 입력하면 브라우저는 js 명령어와 http 포맷에 따라 HTTP Request 메시지를 생성한다. 그 후 DNS 서버에 url에 해당하는 ip 주소를 조회한 후 tcp 프로토콜을 통한 메시지 전송을 OS에게 의뢰한다.

 

서버에서 요청을 받은 후

서버에게서 HTTP Response 메시지를 받은 후 브라우저는 이를 렌더링하여 사용자에게 출력해준다.

이때 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 DOM 트리, CSSOM 트리로 파싱되고 다시 렌터 트리로 결합되는 구조를 가진다. 이 렌더 트리가 완성되면 객체들의 위치와 크기를 결정해 레이아웃을 만들어준 뒤 UI 백엔드가 동작하며 렌더 트리를 화면에 나타낸다.

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

HTML 태그가 <script> 태그를 만나면 DOM 생성 프로세스를 잠시 중단하고 js 엔진으로 권한을 넘긴다. 그러나 브라우저는 동기적으로 작동하기 때문에 js 엔진이 완성되지 않은 DOM을 조작하면 에러가 난다. 그래서 body 태그 아래 script 태그들이 존재하는 것이다.

쿠키와 세션

쿠키

쿠키는 HTTP의 특성인 stateless 를 보완하기 위해 나타난 개념이다.

client와 server는 요청을 주고 받으면 서로를 기억할 방법이 없다.

그렇다면 로그인 후에는 이 요청을 보낸 사용자가 누구인지 알아야할 필요성이 있는데 이때 가장 간단한 아이디어는 모든 request에 사용자 정보를 넣어준 채 요청을 하면 된다.

그러나 이 경우도 브라우저를 종료하고 다시 키면 해당 정보가 사라지기 때문에 쿠키가 도입되었다.

유저가 로그인 request 를 보내면 서버는 쿠키에 유저 정보를 담아 response 를 보내준다.

브라우저는 해당 정보를 저장해두었다가 같은 서버에 요청을 보낼 때 함께 전송한다.

이를 통해 쿠키는 사용자의 상태나 세션을 유지하는데 도움을 주고 사용자 경험을 개선하기 위해서도 사용된다.

그러나 이 쿠키는 클라이언트 사이드에서 저장하고 관리하기 때문에 보안에 위협이 있다.

 

세션

쿠키의 보안적인 단점으로 인해 나온 것이 세션이다.

서버에서 인증 정보를 보관하며 로그인 연결을 유지하는 방법이 session이다.

유저가 로그인 요청을 보내면 서버에서는 임의의 sessionId를 생성해 session 저장소에 유저 - sessionId 를 매칭하여 저장한다.

이후 response 객체에 이 sessionId를 담은 쿠키를 유저에게 전달한다.

이후 쿠키를 담은 요청이 올 때마다 sessionId로 session 저장소를 조회해 어떤 유저가 요청을 보냈는지 확인한다.

세션은 유저에 대한 정보가 클라이언트에게는 하나도 없다는 점에서 세션 개념을 도입하지 않은 쿠키 통신보다 안전하다.