Web Storage Api의 등장배경, 쿠키,세션의 차이점
December 30, 2019
다른글에서 간단하게 쿠키와 세션에 대해서 간단하게 정리해 보았는데 이글에서 더 집중적으로 쿠키와 세션에 대해서 적어보려고 합니다.
Cookie와 Session을 사용하는 이유
- HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용한다.
- HTTP 프로토콜은 요청을 전송하고, 응답을 전송받은 시점에서 통신이 종료되며, 어떠한 상태 정보도 남지 않는다. 따라서 로그인 인증 과정을 거친 이후 재차 접근하면 로그인 상태임을 인식 할 수 없으므로 매번 사용자 인증 과정을 반복해야하는 문제가 발생한다.
쿠키( Cookie )
- 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
- 클라이언트에는 300개의 쿠키를 저장할 수 있으며, 하나의 도메인당 20개의 값만 가질수있음, 하나의 쿠키는 4KB까지 저장할 수 있습니다.
- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
- 쿠키는 사용자가 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.
쿠키의 동작 방식
- 클라이언트가 페이지를 요청한다.
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함시켜 응답한다.
- 브라우저가 종료되어도 만료기간에따라 클라이언트에 보관
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답한다.
세션( Session )
- 세션은 쿠키를 기반으로 하고있으며, 사용자 정보 파일을 브라우저에 저장하는 쿠키와는 달리 세션은 서버측에서 관리.
- 서버에선 클라이언트를 구분하기 위해 세션ID를 부여해 웹 브라우저가 서버에 접속해서 브라우저가 종료할 때까지 인증상태를 유지할 수 있다.
- 사용자의 정보를 서버에 저장하기 때문에 쿠키보다는 안전하다. 하지만 사용자가 많아질수록 메모리를 많이 차지하게 된다.
세션의 동작 방식
- 클라이언트가 서버에 접속시 세션 ID를 발급받는다.
- 클라이언트는 쿠키에 세션 ID를 저장하고있다.
- 클라이언트는 서버에 요청할 때, 헤더의 쿠키의 세션 ID를 이용해 전달합니다.
- 서버는 세션 ID를 전달받고, 세션 ID에 있는 클라이언트 정보를 클라이언트에게 응답합니다.
쿠키와 세션의 차이
- 쿠키와 세션은 비슷한 역할이며, 동작원리도 비슷합니다. 그 이유는 세션도 결국 쿠키를 사용하기 때문입니다.
- 가장 큰 차이점은 정보가 저장되는 위치입니다. 쿠키는 클라이언트, 세션은 서버에 저장합니다.
- 보안 면에서는 세션이 쿠키보다 우수하나, 속도 자체는 쿠키가 우세합니다. 이유는 세션은 서버의 처리가 필요하기 때문이다.
- 라이프 사이클, 쿠키도 만료시간이 존재하지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 하지만 세션은 브라우저를 종료하면 만료시간에 상관없이 삭제된다.
Web Storage가 필요한 이유?
Cookie와 Web storage 둘다 브라우저에 저장된다는 것은 똑같습니다. 하지만 Web Storage가 등장한 이유는 Cookie는 이와같은 단점이 있기 때문입니다.
- 4KB의 데이터 저장 제한
- HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
- 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음
Web Storage의 종류
기존에 우리가 흔히 사용했던 Cookie와 Session처럼 Web Storage도 localStorage와 sessionStorage를 제공합니다. sessionStorage가 session처럼 서버에 저장된다고 생각할 수 있겠지만. sessionStorage도 로컬 브라우저에 저장됩니다. 다만 이 둘은 생명주기가 서로 다르다고 생각하면 편합니다.
- localStorage : 브라우저를 닫았다가 다시 열어도 계속 유지
- sessionStorage : 브라우저가 열려있는 한 페이지를 Reload 해도 계속 유지. 하지만 브라우저를 닫으면 삭제된다.
