[NETWORK] 쿠키와 세션, 그리고 브라우저 스토리지 ( Web Storage )

Cookie, Session

쿠키와 세션을 사용하는 이유는 HTTP 의 특징이자 약점을 보완하기 위해 사용한다.

1. 비연결성지향(connectionless)

- 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특성

2. 무상태(Stateless)

- 통신이 끝나면 상태를 유지하지 않는 특성

 

하지만 우리가 쇼핑몰을 사용할때 만약에 페이지가 바뀔 때마다 다시 로그인을 한다거나, 장바구니에 담긴 데이터가 사라진다거나 하면 두 번 다시는 그 사이트를 이용하지 않을 것이다.

쿠키 ( Cookie )

쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간 안에는 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.

하나의 쿠키에 최대 저장 크기는 4kb이다.

HTTP 요청마다 암호화 없이 전달해서 해킹 당하면 정보를 쉽게 도난 당할 수 있다는 단점이 있다.

동작방식

• 클라이언트가 페이지를 요청
• 서버에서 쿠키를 생성
• HTTP 헤더에 쿠키를 포함시켜 응답
• 브라우저가 종료되어도 쿠키 만료기간이 있다면 클라이언트에서 보관
• 같은 요청을 할 경우 HTTP 헤더에 쿠키를 실어 보냄

사용 예시

• 팝업창을 통해 " 오늘 이 창을 그만 보기 " 체크
• 방문했던 사이트를 다시 방문했을때 자동 id, pw 입력

세션 ( Session )

세션은 쿠키를 기반으로 하지만, 사용자 정보 파일을 로컬에 저장하는 것과 다르게 서버에서 정보를 저장한다.

서버에서는 클라이언트를 구분하기 위헤 Session ID 를 부여하며 웹 브라우저가 종료할때 까지 인증상태를 유지한다.

 

동작방식

• 클라이언트가 페이지를 요청 ( 유저가 접근 )
• 서버는 접근한 클라이언트의 Cookie 를 비교하여 클라이언트가 해당 Session - id 를 보냈는지 확인
• Session ID 가 존재하지 않으면 , 서버는 Session-ID 를 생성해 클라이언트에게 돌려준다.
• 클라이언트 재접속시 이 쿠키를 서버에 전달

사용 예시

• 로그아웃 전 까지 로그인 상태 유지

브라우저 스토리지

브라우저 저장소에는 쿠키, 웹 스토리지 가 있다.

웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

웹 스토리지에는 로컬 스토리지와, 세션 스토리지가 있다.

Local Storage ( 로컬 스토리지 )

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저가 종료되도 데이터가 유지된다.

반영구적 데이터지만 다른 도메인에서 접근은 할 수 없다.

예를 들면 Google 의 데이터는 Naver 에서 접근할 수 없는 것이다.

Session Storage ( 세션 스토리지 )

세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 예를 들면 브라우저에서 여러개의 탭을 실행하면 로그인도 따로 저장된다던가 하는 식으로 탭마다 다른 데이터가 저장되는 것이다.