세션과 쿠키의 사용이유

• HTTP프로토콜은 연결지향적인 성격이 아니기 때문에 새로운 페이지를 요청할 때마다 새로운 접속이 이루어지며 이전 페이지와 현재 페이지 간의 관계가 지속되지 않는다. 이에 따라 HTTP프로토콜을 이용하게 되는 웹사이트에서는 웹페이지에 특정 방문자가 머무르고 있는 동안에 그 방문자의 상태를 지속시키기 위해 쿠키와 세션을 이용한다. HTTP의 stateless 특성때문.

쿠키

• 사용자의 정보를 유지할 수 없다는 HTTP의 한계를 극복할 수 있는 방법
• 쿠키는 사용자가 특정 웹서버에 접속할 때, 생성되는 개인 아이디와 비밀번호 방문한 사이트의 정보를 담은 임시파일로써, 서버가 아닌 클라이언트에 텍스트 파일로 저장되어 다음에 해당 웹서버를 찾을 경우 웹서버에서는 그가 누구인지 어떤 정보를 주로 찾았는지 등을 파악할 때 사용한다.
• 쿠키는 클라이언트PC에 저장되기때문에, 다른 사용자에 의해 임의로 변경이 가능하다(정보유출가능, 세션보다 보안성이 낮은이유)
• 4kB의 크기제한이 있고, 문자열만 저장가능

Cookie의 2가지유형

Session Cookie

• 만료일을 포함하지 않는다. 브라우저 탭이 열려있는 동안만 지속.
• 브라우저가 닫히면 쿠키는 영구적으로 삭제. 은행권에서 주로 사용

Persistent cookie

• 만료일을 가진다. 만료일까지 유저의 디스크에 저장. 만료일이 지나면 삭제.

Localstorage

• HTML5가 나온 이후 쿠키의 많은 사용이 로컬스토리지로 대체됬다. 가장 큰 차이는 모든 HTTP요청에 데이터를 주고 받을 필요가 없다.
• HTML5에서 WebStorage라는 개념이 등장. key-value형태의 저장소로 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어서 데이터의 지속성을 구분할 수 있다.
• HTTP요청에서 데이터를 주고 받지 않고 로컬스토리지를 이용하면 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다. 주로 인터넷이 안되는곳에서 유용. 다시 인터넷이 연결되면 데이터를 업로드한다.
• 5MB까지 저장가능하고 쿠키와 달리 용량의 제한이 없다.
• JS코드를 통해 삭제하지 않으면 지워지지 않는다. 문자열 뿐만 아니라 primitive, object도 저장가능
• 도메인마다 별도의 localstorage가 생성된다. window객체의 localstorage라는 컬렉션을 통해 저장과 조회가능

SessionStorage

• 데이터의 지속성과 액세스 범위에 제한이 존재. window의 sessionstorage라는 컬렉션으로 저장과 조회가능
• sessionstorage는 브라우저가 종료되면 지워진다.

느낀점

• 쿠키와 세션, JWT 토큰에 대해서만 인식하고 있다가 로컬스토리지라는걸 알게되었다. 로컬스토리지가 쿠키에서 부족한 부분을 사용할 수 있게했지만, 한편으로 이게 보안에 어떨지 궁금하다. 쿠키의 경우 httpOnly와 secure를 통해 js 조작으로 쿠키가 탈취되는 부분과 http로 해킹 당하는 부분을 보완했다. 로컬스토리지의 장점만 나왔지 단점은 잘모르겠다. 나중에 비교해봐야겠다.