웹사이트를 이용하다보면 아이디 저장, 최근 본 상품, 최근 로그인한 OAuth 타입과 같은 기능들을 볼 수 있다. Cookie, Web Storage를 사용하면 데이터베이스를 사용하지 않고도 데이터를 저장할 수 있는데, 종류와 특징을 살펴보고 어떨 때 쓰면 적합할 지 생각해 보자.
Cookie
쿠키란 사용자가 임의의 웹사이트를 방문할 경우 웹 브라우저를 통해 사용자의 컴퓨터에 저장되는 작은 기록파일을 말한다. 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장한다. HTTP 요청은 Stateless(무상태성)한 특성을 가지고 있기 때문에 사용자의 상태를 저장하기 위해서 사용한다.
속성
쿠키에는 다음과 같이 여러가지 속성이 있다.
- Name
쿠키를 구분하는 유일 식별자이다. - Value
쿠키의 값이 저장되어 있다. - Domain
브라우저가 웹서버로 쿠키를 전송할 때 해당 도메인과 일치한 요청에 대해서만 쿠키를 전송한다. - Path
브라우저가 웹서버로 쿠키를 전송할 때 해당 경로와 일치하는 쿠키만 전송한다. - Expires / Max-Age
쿠키는 웹서버에서 제어(삭제)할 수 없기 때문에 쿠키의 만료기한을 지정한다. - Size
쿠키의 크기 - HttpOnly
쿠키는 서버의 응답헤더에서 설정할 수 있지만 자바스크립트에서도 document.cookie로 접근하여 조회/ 수정이 가능하다. 만약 HttpOnly가 true라면 쿠키의 값을 변경하거나 조회할 수 없다. 오직 HTTP 응답헤더로만 설정이 가능하다. - Secure
HTTPS 통신일 경우에만 쿠키를 전송한다. - SameSite
- Strict : 쿠키를 전달하는 도메인과 쿠키의 도메인이 일치해야만 쿠키를 전송한다.
- None : 도메인이 달라도 쿠키를 전송한다.
- Lax : a 태그, link 태그, form get 요청일 경우일 때만 쿠키를 전송하고, 그 외에는 도메인이 일치해야만 쿠키를 전송한다.
특징
쿠키의 특징들을 살펴보자.
1. 로컬디스크에 파일 형태로 저장
쿠키를 포함한 브라우저의 정보들은 사용자의 로컬디스크에 저장된다. 따라서 서버를 통하는 저장소보다 비교적 빠른 속도로 데이터를 가져올 수 있다. 반면 로컬에서 관리되기 때문에 보안적인 부분에서는 취약하다.
2. 문자열만 저장 가능
Cookie : theme=light; sessionToken=1234; path=/; expires=Mon, 7 Aug 2023 10:14:07 GMT
쿠키는 Key-Value 쌍으로 한 줄에 여러 개의 쌍이 올 수 있는 구조다. Key와 Value는 '=' 으로, 쌍은 '; ' 으로 구분된다. 만약 문자열에 구분자가 들어가게 되면, 원치 않는 데이터를 사용할 수 있기 때문에 인코딩을 꼭 해줘야 한다.
3. 모든 HTTP 요청에 쿠키가 전달
브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 담아 함께 전달한다.
4. 브라우저별 쿠키 제한
모든 브라우저를 지원하려면 쿠키의 전체 크기를 4,093 bytes로 제한하는 것이 좋다.
|
브라우저
|
최대 쿠키 개수
|
쿠키 별 최대 크기
|
도메인 별 최대 크기
|
|
Chrome 5-7
|
70
|
4,096 bytes
|
없음
|
|
Chrome 8-58*
|
180
|
4,096 bytes
|
없음
|
|
FireFox 2/3.6.6
|
50
|
4,097 characters
|
없음
|
|
FireFox 3.6.13-19*
|
150
|
4,097 characters
|
없음
|
|
FireFox 21-52*
|
150
|
4,097 bytes
|
없음
|
|
IE 8/9/10/11/15
|
50
|
5,117 characters
|
10,234 characters
|
|
Opera 26/46
|
180
|
4,096 bytes
|
없음
|
|
Safari 7
|
없음
|
4,097 bytes
|
8,180 bytes
|
|
Safari ? on mac
|
600
|
4,093 bytes
|
4,093 bytes
|
|
Android 2.1/2.3.4
|
50
|
4,096 bytes
|
없음
|
Session Cookie
세션 쿠키는 대부분의 일반 쿠키의 특징을 따르면서도 몇가지의 다른 특징이 존재한다.
1. 데이터는 데이터베이스에 쿠키엔 키 값만
세션 쿠키는 쿠키와 달리 데이터 값이 브라우저가 아닌 데이터베이스에 저장된다. 쿠키를 이용해서 세션 id만 저장하고 세션 id를 이용해 서버에서 처리하기 때문에 보안적인 부분에서는 로컬에 저장되는 쿠키보다 우수하다. 또한 데이터를 데이터베이스에 저장하기 때문에 용량의 제한이 없다.
2. 브라우저가 종료되면 자동 삭제
쿠키는 일반적으로 Expires / Max-Age 속성을 따라 만료되지만 세션 쿠키의 경우에는 만료기간이 정해져 있지 않고 브라우저가 종료되면 자동으로 삭제된다.
다음은 Web Storage에 대해 알아보자.
Web Stroage
웹 스토리지는 HTML5에서 표준으로 지정된 브라우저 내 저장공간이다. 브라우저에 데이터를 저장한다는 점은 쿠키와 동일하지만, 쿠키보다 큰 용량을 저장할 수 있다는 점과 매 요청마다 데이터가 전달되지 않는다는 차이가 있다. 따라서 굳이 서버로 전송할 필요가 없는 데이터라면 보안과 속도를 위해 웹 스토리지에 저장하는 것이 좋다. 웹 스토리지는 Local Storage와 Session Storage가 있다. 아래에서 더 살펴보자.
속성
웹 스토리지의 속성은 Key, Value 만 존재한다.
특징
아래는 Local Storage와 Session Storage의 공통적인 특징이다.
1. 요청 시 선택적으로 데이터 전달
쿠키는 매 요청마다 데이터가 헤더에 담겨 전달되지만, Web Storage는 필요 시에만 데이터를 전달할 수 있다.
2. 영구 데이터 저장 가능
별도의 만료기간이 없어서 데이터를 영구적으로 저장할 수 있다.
3. 쿠키보다 큰 저장 공간
차이
Local Storage와 Session Storage의 차이는 만료기간과 제한범위이다.
Local Storage
- 동일 도메인, 동일 브라우저에서 공유
도메인과 브라우저만 동일하다면 다른 탭을 열어도 데이터를 공유 가능하다.
Session Storage
- 브라우저가 종료될 때 자동 삭제
- 탭마다 별도의 공간 제공
도메인과 브라우저가 동일하더라도 탭마다 별도의 Session Storage가 생성되므로 데이터가 공유되지 않는다.
정리
각 특징을 바탕으로 구현하기 적합한 기능들을 분류해 보았다.
Cookie
보안상 위험하지 않은, 유지 기간을 정할 수 있는 사용자의 상태를 저장할 때 사용
- 로그인한 사용자의 아이디
- 오늘 이 창을 다시 보지 않기 체크
- 자동 로그인 (with 세션)
--> 세션 쿠키처럼 id는 쿠키가, 값은 세션이 가지고 있지만 만료기간을 지정할 수 있다.
Session Cookie
비교적 보안상 위험한, 브라우저 사용동안에만 유지가 필요한 데이터를 저장할 때 사용
- 은행 업무 처리
Local Storage
서버로 전송이 불필요하면서 영구적으로 저장할 때 사용
- 다크모드 설정
- 아이디 저장
- 최근 본 상품
- 장바구니
Session Storage
- 일회성 로그인
- 입력 폼 저장
ref.
https://hjjungdev.tistory.com/185
http://%20https://www.daleseo.com/js-web-storage/
https://geonlee.tistory.com/127
https://kimfk567.tistory.com/54
