로컬 스토리지, 세션 스토리지, 쿠키

웹 스토리지

1. 로컬 스토리지

{ key : value } 형태로 오리진에 종속되어 저장되는 데이터

- 하나의 키에 하나의 값

- 만료날짜가 없어 브라우저를 닫거나 컴퓨터를 종료해도 남아있음

- 최대 저장용량 5MB

- 자동으로 서버로 전송되지 않는다

 

2. 세션 스토리지

{ key : value } 형태로 오리진에 종속되어 저장되는 데이터

- 하나의 키에 하나의 값

- 브라우저 탭을 닫으면 데이터는 지워짐

- 최대 저장용량 5MB

 

웹 스토리지의 장단점

장점 

- 서버에 불필요한 데이터 저장X

- 저장 용량이 쿠키에 비해 큼

- 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능

- CSRF로부터 안전

 

단점

- HTML5를 지원하는 브라우저만 사용 가능

- XSS로부터 위험

 

 

쿠키

- 쿠키는 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하게 하기위해 서버에서 데이터를 묶어서 클라이언트의    컴퓨터 혹은 브라우져의 메모리에 저장되는 key value로 이루어진 작은 텍스트 파일

- 보통 서버에서 먼저 설정해서 쿠키를 만드는게 일반적(Set-Cookie 헤더)

- 최대 저장용량 4KB

 

쿠키의 장단점

장점

- 대부분의 브라우저가 지원

- XSS로부터 안전(httpOnly)

단점

- 저장 가능한 데이터 용량이 작음

- 매번 같이 전달되어 서버에 부담됨

- SCRF로부터 위험

- 문자열만 저장 가능

 

 

 

각 사용처

쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때, 다시 보지 않을 쿠키 팝업창 , 로그인 자동 완성

로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때, 자동 로그인

세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때, 일회성 로그인, 입력 폼 저장, 비로그인 장바구니

 

 

 

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

 

이외에

1. 쿠키옵션

secure : https로만 쿠키를 주고받을 수 있게 하는 옵션, 오남용을 막기위해 현재는 사용X

httponly : 공격자가 자바스크립트로 빼낼 수 없게 하는 옵션

samesite : 요청이 동일한 도메인에서 되는 경우에만 쿠키가 애플리케이션으로 전송되도록 허용

 

2. 쿠키의 시큐어 코딩

쿠키 - 세션으로 로그인을 처리한다면 다음과 같은 시큐어 코딩을 해야 합니다.
1. cookie에 세션ID를 담을 때 이 세션ID기반으로 클라이언트의 개인정보를 유추할 수
없게 해야 합니다.
2. 자바스크립트로는 파악할 수 없게 http only 옵션을 걸어야 합니다.
3. 일정시간의 세션 타임아웃 걸어야 합니다.