[FE] 쿠키, 세션, 로컬 스토리지와 세션 스토리지

🤓 시작하며 

여태까지는 로그인 후 유저정보(토큰)를 저장할때 무조건 로컬스토리지에 저장을 해 왔었다. 보안의 필요성을 못느끼기도 했었고 항상 그래왔기 때문에(..) 그러다 문득 사용자가 만약 개발자 도구를 열어서 토큰을 악용한다면? 생각이 들었고 추후의 개발을 위하여 저장 방법들을 알아두면 좋을 것 같아 정리를 해보기로 했다.

---

쿠키 🍪

특징

- 쿠키는 클라이언트(브라우저)에 저장되는 key, value가 들어있는 데이터 파일이다.

- 유효시간을 가지며, 유효시간을 지나지 않으면 브라우저가 종료되어도 정보가 유지된다.

- 4KB까지 저장이 가능하다.

-  클라이언트가 요청하지 않아도 브라우저가 요청시에 헤더에 자동으로 넣어서 서버로 전송한다.

- SameSite 옵션이 Strict가 아닐 경우, 다른 도메인에서 요청할 때도 자동으로 전송되는 위험이 있다. -> CSRF에 취약

- 개발자도구 -> 애플리케이션에서 쿠키를 확인할 수 있다.

구성 요소

- 이름 : 각각의 쿠키를 식별

- 값 : 쿠키가 가지고 있는 값

- 유효 시간 : 쿠키의 유지 시간

- 도메인 : 쿠키를 전송할 도메인

- 경로 : 쿠키를 전송할 요청 경로

동작 순서

1. 클라이언트가 페이지를 요청 (웹 사이트에 접근)

2. 웹 서버에서 쿠키 생성

3. 서버에서 생성한 쿠키 정보를 HTTP 헤더에 포함시켜 클라이언트에게 전달

4. 서버에서 응답 결과로 보낸 쿠키가 만료되지 않았다면 클라이언트(로컬 PC)가 보관하다가 다시 서버에 요청할때 쿠키 전송

5. 만약, 동일한 페이지를 요청할 때 (사이트 재방문), 클라이언트가 해당 쿠키를 가지고 있으면 HTTP 헤더에 쿠키를 자동으로 넣어서 요청

6. 서버에서 쿠키를 읽어서 이전 상태 정보를 변경할 경우 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

 

세션 ⚓️

특징

- 웹 서버에 저장되는 쿠키(=세션 쿠키)

- 세션은 쿠키를 기반으로 하지만, 사용자의 정보를 브라우저에 저장하는 쿠키와 달리 세션은 서버에서 관리

- 브라우저를 닫거나 서버에서 세션을 삭제했을때만 삭제가 된다. -> 쿠키보다는 비교적 보안이 좋음

- 각각의 클라이언트들에게 고유 Session ID를 부여해서 클라이언트의 요구에 맞는 서비스를 제공한다.

- 쿠키보다는 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 사용하게 된다. -> 성능 저하의 요인

동작 순서

1. 클라이언트가 페이지를 요청 (웹 사이트에 접근)

2. 서버는 클라이언트의 HTTP 요청 헤더의 쿠키를 확인해서 클라이언트가 session ID를 보냈는지 확인

3. session ID가 존재하지 않으면 서버는 session ID를 클라이언트에게 발급

4. 클라이언트는 서버에서 발급한 session ID를 쿠키에 저장

5. 클라이언트가 서버에 다시 접속할 경우 이 쿠키를 사용해서 session ID값을 서버에 전달

 

** 쿠키 vs 세션 **

	Cookie	Session
저장 위치	클라이언트 (브라우저)	서버
보안	클라이언트의 로컬환경에 저장되므로 변질되거나 request에서 스니핑 할 수 있음	session ID만 사용해서 비교적 보안이 높음
속도	쿠키에 정보가 있기 때문에 서버에 요청시 빠름	정보가 서버에 존재하므로 비교적 느림
라이프 사이클	브라우저를 종료해도 만료기간이 남으면 정보가 유지될 수 있음	브라우저 종료시 삭제

 

 

캐시 💸

특징

- 웹 페이지를 빠르게 렌더링 할 수 있도록 도와주는 임시 저장소이다.

- 쿠키/세션이 사용자의 인증을 도와주는 것과 대비된다.

- 캐시는 이미지, 동영상, CSS, JavaScript 파일이나 데이터를 미리 복사해 놓은 리소스 파일들의 임시 저장소이다.

- 저장 공간이 작고 비싸지만 빠른 성능을 제공한다.

- 같은 웹 페이지를 접속할 때 사용자의 PC에서 로드하므로 서버를 거치지 않아도 된다.

- 사용된 데이터가 다시 사용될 확률이 높으면 캐시 서버에 있는 데이터를 활용

 

 

 

로컬/세션 스토리지 = 웹 스토리지 🖥️

특징

- 쿠키 정보는 많으면 많을 수록 HTTP 헤더의 용량은 커지게 된다.

- 이 문제점을 해결하기 위해 html5에서는 쿠키대신 storage라는 개념이 등장하였다.

- 웹 스토리지는 HTML5를 지원하는 브라우저에서만 사용할 수 있다.

- 간단한 key와 value를 저장할 수 있다.

- 웹 스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로 전송이 가능하기 때문에 서버에 부담이 가지 않는다.

- 쿠키의 용량은 4kb인데에 반해 스토리지는 한 페이지당 5mb를 제공하므로 용량이 넉넉하다.

 

** 로컬 스토리지 vs 세션 스토리지 **

	로컬 스토리지	세션 스토리지
데이터	O (사용자가 지우지 않는 한)	X (윈도우, 탭 닫을 시 내용 제거)
사용 방법	자동 로그인	일회성 로그인
주의 사항	비밀번호와 같은 중요 정보는 절대 저장 X

 

---

✏️ 마치며

쿠키, 세션 같은 것들은 많이 들어보긴 했지만 정작 사용했던 적은 몇번 없었는데 이번 기회에 개념을 정확히 정리하는 시간을 가져보았다. 

중요한 것은 정답이라는게 정해진 것이 아니라 각각의 특징과 장단점을 확인하고, 프로젝트의 성능과 특징에 맞는것을 사용하는 것 이라고 생각했다. 

 

사실 어제 4:1로 면접을 보고 후드려 맞으면서 생각이 많아졌다. 나름 실무에 자신이 있었고, 나정도면 웬만한 곳은 갈수 있지 라고 생각했었다. 하지만 막상 내가 쓰는 기술을 왜 쓰는지, 개념이 정확히 무엇인지 설명을 제대로 못하는 나를 보고 굉장히 부끄러웠고, 한심했다. 내가 가장 싫어하는 것이 헛똑똑이인데, 내가 그러고 있었다. 자신감이 아닌 자만 .. 

모든 분야갸 그렇겠지만 특히나 개발 분야는 공부를 하면 할수록 나의 부족함을 직면하게 되는것 같다. 더 이상의 회피는 없다. 나의 부족함을 인정하고 더 파고드는수 밖에 ..  한단계씩 성장하는 개발자가 되자. 적어도 내일은 쿠키, 세션, 스토리지에 대해 잘 아는 개발자가 되어있을테니까! ㅋㅋ 화이티이이이이ㅣㅇㅇ.................