[스터디]쿠키, 세션, 웹스토리지

웹을 사용하다 보면 페이지를 새로고침하거나 브라우저를 다시 실행시키는 경우 데이터가 사라져 불필요한 과정들을 반복한 경험이 있을 것이다. 이 부분을 http 프로토콜의 특징 때문이다.

📍HTTP 프로토콜

• HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위한 프로토콜이다.

• 서버/ 클라이언트 모델을 따르며 데이터의 종류와 관계없이 전송할 수 있도록 설계되어있다.

• 비연결성(Connectionless) : 클라이언트와 서버가 연결을 맺은 후 클라이언트가 서버에게 request를 요청한 후 서버가 클라이언트에게 response를 보내면 맺었던 연결을 끊어버리는 성질

• 무상태(Stateless) : 통신이 끝난 이후에는 정보를 유지하지 않기 때문에서버가 클라이언트를 식별할 수 없다.

  비연결성은 서버가 클라이언트의 정보를 유지하지 않으므로 동일한 클라이언트의 요청이 들어온다면 매번 새로운 연결을 시도해야하는 번거로움이 있다. 무상태 또한 클라이언트가 매번 새로운 인증을 해야하는 번거로움을 발생시킨다. 이러한 단점을 보완할 방법으로 쿠키, 세션, 웹스토리지를 제시할 수 있다.

🍪쿠키(Cookie)

쿠키는 서버를 통해 인터넷 사용자의 개인장치에 다운되고 브라우저에 저장되는 작은 크기의 텍스트 파일이다. 쿠키에 담긴 정보를 통해 웹 사이트가 사용자를 인식할 수 있으며 사용자의 설정과 과거에 사용한 내역에 대한 일부의 데이터도 저장하여 보관한다. 서버가 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저가 자체적으로 저장하여 보관한다. 브라우저는 사용자가 방문하여 쿠키가 생성된 사이트에 다시 접속할 때 마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 정보를 전달한다.

Set-Cookie : id = a3Wa; Expires = Sat, 23 Jun 2021 08:10:00 GMT;

사용 목적

• 세션관리 (Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보를 관리한다.
• 개인화 (Personalization) : 사용자가 취향에 맞게 지정해놓은 세팅을 저장한다.
• 트래킹 (Tracking) : 사용자의 행동을 기록하고 분석하기 위해 기록을 저장한다.

클라이언트 식별 과정

1. 사용자가 로그인하면 서버는 http 응답 헤더의 Set-Cookie에 담긴 "세션 식별자(Session Identifier)"를 통해 쿠키를 세팅한다.
2. 사용자가 쿠키가 세팅된 사이트에 다시 방문하면 브라우저는 htttp Cookie헤더에 인증 정보가 담긴 세션 식별자를 함께 실어서 서버에 요청한다.
3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 통하여 사용자를 식별한다.

특징

• name = value 쌍으로 구성되어 있으며 각 쌍은 세미콜론(;)으로 구분
• 쿠키에 직접 값을 쓸 수 있으며 값을 할당하면 브라우저가 이 값을 받아 해당 쿠키를 갱신
• 쿠키의 이름과 값엔 특별한 제약이 없지만 형식을 일관성있게 유지하기 위해 내장 함수인 encodeURIComponent를 사용하여 이름과 값을 escape처리 해야함
• 세션쿠키 : 현재 사용 중인 세션이 끝날 때 삭제되지만 어떤 브라우저들은 재시작시 세션을 복원하여 세션쿠키가 무기한 존재하도록 하기도 한다.
• 영속적인 쿠키 : Expires 속성에 명시된 날짜에 삭제되거나 Max-Age 속성에 명시된 기간 이후에 삭제 된다.

console.log(document.cookie);		//쿠키 확인
document.cookie = "user = hyoco";	//쿠키 입력

단점

• 요청을 할 때 쿠키의 값을 그대로 전송하기 때문에 보안에 취약하다.
• 사이트당 20개, 최대 300개가 최대이며 각 쿠키는 4Byte를 넘길 수 없다.
• 쿠키에 대한 정보를 매번 헤더에 실어 보내기 때문에 상당한 트래픽을 발생시킨다.
• 웹 브라우저마다 지원하는 형태가 다르며 부라우저간에 저장한 쿠키의 공유가 불가능하다.

🧷세션(Session)

세션은 사용자가 브라우저를 통해 웹 서버에 접속한 시점부터 브라우저를 종료하여 연결을 끝내는 시간동안 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 일정하게 유지시킨다. 쿠키는 클라이언트의 컴퓨터에 모든 데이터를 저장한다면 세션은 서비스를 사용 중인 서버측에 데이터를 저장하고 클라이언트 측에는 키값만을 남긴다. 브라우저는 필요할 때마다 이 키값을 이용하여 서버에 저장된 데이터를 사용한다.

특징

• 브라우저를 닫거나 서버에서 세션을 삭제했을 때 삭제되기 때문에 쿠키에 비해 보안이 좋다.
• 서버의 용량에 따라 저장할 수 있는 데이터의 크기에 제한이 없다.
• 각 클라이언트 고유의 세션 식별자(Session Id)를 부여하여 클라이언트 식별 후 각각의 요구에 맞는 서비스를 제공한다.

동작 방식

[이미지 출처]

1. 클라이언트가 서버에 로그인을 요청하면 서버가 요청의 유효성(아이디, 비밀번호가 맞는지)을 확인한 후 sessionid라는 이름으로 저장한다.
2. 서버가 응답헤더에 Set-Cookie : sesseionid : a1x2fjz를 추가하여 요청에 응답한다.
3. 서버에서 요청헤더의 sessionid값인 a1x2fjz을 저장된 세션 저장소에서 찾아본 후 유효하다면 요청을 처리하고 응답한다.

단점

• 서버에 저장되어 메모리를 차지하기 때문에 저장공간을 많이 필요로한다.
• 중앙 세션 저장소에 장애가 발생할 시 모든 인증에서 문제가 발생할 수 있다.
• 트래픽을 감당하기 위해 프로세스를 돌리는 등 서버를 확장하는 것이 어렵다.

📜웹스토리지(Web Storage)

웹토리지는 HTML5에 추가된 기능으로 서버가 아닌 클라이언트에 데이터를 저장할 수록 지원한다. 쿠키와 기능 자체는 유사하나 웹 스토리는 약 5MB까지 저장공간을 이용할 수 있다. 웹 스토리지에는 두가지 객체가 존재한다. 바로 Local Storage와 Session Storage이다. 이 둘의 차이점은 데이터의 저장 범위와 보존 기간에 있다.

로컬 스토리지(Local Storage)

• 브라우저에서 반영구적으로 데이터를 저장하며 명시적으로 지우지 않는 한 브라우저 종료 후에도 데이터가 유지된다.
• 도메인별로 로컬스토리지가 생성되며 생성된 도메인은 다른 도메인에서 접근이 불가능하다.
• 서로 다른 브라우저에서도 동일한 도메인이라면 같은 로컬 스토리지를 사용한다.
• 자동로그인 등 지속적인 정보 저장에 사용된다.

세션 스토리지(Session Storage)

• 탭과 윈도우 단위로 세션 스토리지가 생성되며 데이터의 만료기간이 존재한다.
• 탭이나 윈도우를 종료할 시에 저장된 데이터가 삭제되며 window객체와 동일한 유효범위를 가진다.
• 동일한 탭 또는 윈도우라고 하더라도 다른 도메인이라면 또 다른 세션 스토리지가 생성된다.
• 윈도우 복제로 생성된 경우나 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 입력 폼 정보 저장, 비로그인 장바구니 등 짧은 시간 동안 정보를 저장하는데 사용된다.