1. 쿠키, 웹스토리지 (로컬스토리지, 세션스토리지) 생성 배경
HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않습니다.
클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다.
2. 쿠키(cookie)란?
- 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일 입니다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지됩니다.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
- 클라이언트에 300개의 쿠키 저장 가능, 하나의 도매인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB까지 저장합니다.
- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Req시 Request Header를 넣어서 자동으로 서버에 전송합니다.
[쿠키의 구성요소]
- 이름(name): 각각의 쿠키를 구별하는데 사용되는 이름
- 값(value): 쿠키의 이름과 관련된 값
- 유효시간(expires): 쿠키의 유지시간
- 도메인(Domain):쿠키를 전송할 도메인
- 경로(Path): 쿠키를 전송할 요청 경로
[브라우저에서 쿠키 확인 방법]
개발자도구 > Appllication > Storages > Cookies
[쿠키의 동작 방식]
- 클라이언트가 페이지 요청
- 서버가 HTTP응답시 set-cookie를 통해 쿠키 생성하여 전달
- 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키를 담아서 전송
- 만료기간 전이라면 쿠키는 브라우저에 저장되어 있으며, 항상 요청시 사용 가능
- 만료가 됬다면 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급
[쿠키의 장점과 단점]
-장점
- 대부분의 브라우저가 지원
- 데이터 유효기간 지정가능
- XSS(사이트간 악성 js 코드를 심는 행위)로 부터 안전, 서버에서 쿠키의 HttpOnly 옵션을 설정하면 JS에서 쿠키에 접근 자체가 불가능
-단점
- 매우 작은 데이터 저장 용량(4kb)
- 매번 서버에 HTTP 요청시 같이 전달, 불필요시에도
- 암호화가 안되어있어 정보 도난 위험
- CSRF위협, 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
- 문자열만 저장 가능
3. 세션 (session)
- 사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
- 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다.
- 접속시간에 제한을 두어 일정시간 응답이 없다면 정보가 유지되지 않게 설정 가능합니다.
- 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질 수록 서버 메모리를 많이 차지 하게 됩니다.
[쿠키(cookie) vs 세션( session)]
- 데이터 저장위치: 쿠키는 클라이언트, 세션은 서버
- 보안: 저장위치 때문에 쿠키는 스니핑 당할 우려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에 보안성은 쿠키 보다 세션이 더 좋습니다.
- 라이프사이클: 쿠키는 브라우저를 종료해도 만료기간이 남아있으면 남아있지만, 세션은 브라우저 종료시 만료기간에 상관없이 종료됩니다.
4. 웹 스토리지란?
- 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
- 종류는 로컬스토리지, 세션 스토리지가 있습니다.
- key, value 쌍의 형태로 데이터 저장
- window객체의 property로 존재합니다.
자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야할 일이 종종 생깁니다.
보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하는 경우가 많을 것입니다.
하지만 예를들어 저장할 데이터가 별로 중요하지 않는 경우 서버에 데이터를 저장하는 것이 낭비일 수 있습니다.
이럴때 웹 스토리지(local storage, session storage)를 사용합니다.
[웹스토리지 특징]
-장점
- 서버에 불필요하게 데이터 저장하지 않습니다.
- 넉넉한 데이터 저장 용량(모바일: 2.5MB, 데스크탑: 5~10MB)
- 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
- 도메인 단위로 접근이 제한되는 CORS특성 덕분에 CSRF로 부터 안전
-단점
- HTML5를 지원하는 브라우저만 사용 가능
- XSS로 부터 위험(local storage에 접근하는 JS 코드로 쉽게접근 가능)
[local storage vs session storage]
- 로컬 스토리지는 데이터 영구 저장이 가능, 세션스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
- 브라우저에서 같은 웹사이트를 여러번 탭이나 창에 띄우면, 여러개의 세션 스토리지에 데이터가 서로 격리 되어 저장되고, 각 탭 혹은 창이 닫힐때 저장해 둔 데이터도 함께 소멸
- 로컬스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 (같은 도메인일 경우), 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다. (동일 컴퓨터 + 동일 브라우저 종류(크롬, 사파리, 오페라 등등) 환경인 가정 하에)
참고: https://velog.io/@hs0217/%EC%BF%A0%ED%82%A4-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80,https://www.daleseo.com/js-web-storage/
잘못된 정보에 대한 피드백은 언제나 환영입니다 (´▽`ʃƪ)♡
