Cookie 와 Web Storage

쿠키

- 서버가 사용자의 웹 브라우저에  전송하는 작은 데이터 조각.

- 쿠키를 통해 상태가 없는 HTTP 프로토콜에서 상태 정보를 기억 => 사용자의 상태 관리

- 모든 요청 마다 쿠키가 함께 전송되기 때문에, 성능이 떨어지는 원인이 될 수 있다..

- Set-Cookie HTTP 응답 헤더는 서버로부터 사용자 에이전트로 전송.

 

세션 쿠키 && 영속적인 쿠키

세션 쿠키 - 현재 세션이 끝날 때 삭제.

영속적 쿠키 - Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제.

 

단점

- 4KB의 데이터 저장 제한

 

- XSS 공격 취약 -> 브라우저에서 악성 스크립트를 실행하는 공격, document.cookie를 통해 쿠키에 접근.

=> HttpOnly 속성 : 자바스크립트로 쿠키 조회 방지.

 

- XSRF 공격 취약 -> 사용자인척 악성 request를 보내는 공격. 

  - 이메일, 게시판 등을 통해 링크 전송. ex)

<img src="http://auction.com/changeUserAcoount?id=admin&password=admin" width="0" height="0">

  - 해당 이메일을 보게되면 이미지는 보이지는 않지만 실행. 

  - 쿠키와 함께 실행 => 사용자인척 request

=> SameSite 속성 :

stric - 외부 도메인 쿠키 차단

lax - 외부 도메인 쿠키 일부 허용 ( get, a tag, link tag)

none - 외부 도메인 쿠키 모두 허용.

 

 

- 모든 HTTP Request에 포함

 

Web Storage

- key-value로 데이터 저장.

- 5 ~ 10M 용량

- 쿠키와 같이 데이터 저장

 

Web Storage 종류

1. LocalStorage

2. SessionStorage

 

두 Storage의 기능은 동일 하나 차이는 영속성이다.

 

LocalStorage

- 브라우저를 다시 열고 닫고 해도 유지된다. 도메인 별

SessionStorage

- 브라우저를 닫으면 삭제된다. 도메인/탭 별

 

단점

- 만료 기간 설정 불가

- 동기적 실행

- 미지원 브라우저. 사파리 시크릿 모드 에러처리 필요

- XSS 공격에 취약. 

 

언제 이를 구별하면서 사용해야할가?

유지가 되어야 하는지 아닌지이다.

 

- 경험 -

기존에는 모든 storage 관리를 LocalStorage를 사용하여 user 정보, 페이지 정보를 담았다.

 

회사에서 디자이너분들이 admin페이지에서 브라우저를 두 개를 열고, 동시 작업이 가능한다 생각하여, 소스를 업로드를 각각 진행했지만, 소스 업로드가 꼬이는 일이 발생했고 이를 issue를 잡아주셨다.

 

이 이슈는 브라우저간의 정보를 공유한다는 이슈였다. 즉, LocalStorage는 모든 브라우저, 즉 해당 도메인 페이지가 같은 스토리지를 바라보고 있기 때문에 두개 이상의 브라우저를 활성화하여, 서로 다른 작업을 할 수 없다는 이슈가 발생했다.

 

LocalStorage를 SessionStorage를 대체하면서 이 이슈를 close를 시켜줄 수 있었다.

SessionStorage는 각 브라우저간의 서로 영향권 없이 key-value 값을 가지기 때문에 멀티 작업이 가능해 졌다.