공부 | HTTP 쿠키(cookie) 알아보기

쿠키란 무엇일까?
쿠키를 이용하여 데이터 CRUD 구현

 

❓상황

localStorage를 이용하여 브라우저에 데이터를 저장하는 것 대신 다른 방법을 찾다가, cookie를 알게되었다.

 

또한, 넘블 쿠팡 클론코딩때 코드 리팩토링 진행시 cookie를 사용하는 것을 보고, 배울려고 찾게되었다.

 

📖 HTTP Cookie 란?

개념

HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열이다.

HTTP 통신을 할 때 데이터를 주고받을 수 있도록 만들어진 보조적인 수단이다.

정확한 명세는 RFC 6265에 정의되어 있다.

 

정의

쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념이다.

 

쿠키는 주로 웹 서버에 의해 만들어지며, 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 전달받은 내용(데이터)을 저장한다.

 

또한 브라우저는 서버와 통신할 때 HTTP 요청 헤더의 Cookie에 넣어 전달하여, 웹 서버에 쿠키를 저장할 수 있다.

 

🐸 HTTP Cookie 사용 목적

세션 관리(Session)

로그인 유무, 장바구니 목록 등 웹 서버가 가질 정보를 관리

 

개인화

개인별 맞춤형 서비스를 제공

 

추적

사용자의 행동을 기록하고 분석해야 할 때

 

🗒️ HTTP Cookie 종류

session cookie

사이트 접속시, 사이트의 설정부분(사이트 언어, 팝업 유무 등)를 저장하는 쿠키이다.

 

브라우저를 닫으면, 쿠키가 사라진다.

 

persistent cookie

사이트 로그인시, 로그인을 유지해준다.

 

설정해둔 만료일이 지나면, 쿠키가 사라진다.

만료일 전까지는 쿠키가 남아있다.

 

🐢 HTTP Cookie 성능 이슈

서버와 통신시 모든 쿠키가 전달되기 때문에, 불필요한 쿠키까지 전달하는 등 성능적인 문제 발생

 

🔓 HTTP Cookie 보안 이슈

정보탈취 등 보안 이슈가 있기 때문에, 프론트엔드단에서 관리하는 것보단 백엔드(서버)가 관리 하는것을 권장

 

🔏 HTTP Cookie 보안 설정

Secure

Secure를 적용하면 https인 경우에만 쿠키를 전송

 

SameSite

XSRF 공격 방지하며, 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송

 

😮 Storage의 출현

과거에는 클라이언트(브라우저)가 데이터를 관리할 수 있는 방법은 Cookie만 존재()

 

현재는 클라이언트(브라우저)의 Storage에 저장도 가능해짐(localStorage, sessionStorage)

 

하지만, 보안 이슈는 여전히 존재

이를 해결하기 위한 JWT가 생김

 

⚔️ HTTP Cookie vs Storage

그렇다면, 언제 cookie를 쓰고 storage를 쓸까?

• 자동 로그인 -> 로컬스토리지
• 입력 폼 정보 -> 세션스토리지
• 비로그인 장바구니 -> 세션스토리지
• 다시 보지 않음 팝업 창 -> 쿠키

 

🏝️ 바닐라 자바스크립트로 쿠키 관리하기

쿠키 저장하기 : setCookie()

const setCookie = function (name, value, expiredDay) {
    const expired = new Date();
    expired.setTime(expired.getTime() + expiredDay * 24 * 60 * 60 * 1000);

    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expired.toUTCString() + ';path=/';
};

setCookie('usePopup', 'true', 1);

 

쿠키 읽기 : getCookie()

const getCookie = function (name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? decodeURIComponent(value[2]) : null;
};

getCookie('usePopup');

 

쿠키 삭제하기 : deleteCookie()

const deleteCookie = function (name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
}

deleteCookie('usePopup');

 

🏝️ 라이브러리로 쿠키 관리하기 : js-cookie

js-cookie는 자바스크립트로 쿠키를 처리하기 위한  라이브러리이다.

 

RFC 6265를 준수하였으며 브라우저 호환성이 보장되고, 모든 문자를 허용한다.

 

라이브러리 추가

 CDN으로 라이브러리 사용하기

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>

 

패키지로 라이브러리 사용하기

# javascript npm
npm i js-cookie

# javascript yarn
yarn add js-cookie

# typescript npm
npm i @types/js-cookie

# typescript yarn
yarn add @types/js-cookie

# import
import Cookies from 'js-cookie'

 

쿠키 저장하기 : Cookies.set()

# 쿠키에 값 설정하기 (키, 값)
Cookies.set('name', 'value');

# 유효기간과 함께 쿠키에 값 설정하기 (키, 값, 만료일 7일)
Cookies.set('name', 'value', { expires: 7 });

# 유효기간과 함께, 현재 페이지에서만 유효한 쿠키 설정하기
Cookies.set('name', 'value', { expires: 7, path: '' })

 

쿠키 읽기 : Cookies.get()

# 쿠키 값 가져오기
Cookies.get('name'); // 'value'
Cookies.get('nothing'); // undefined

# 모든 쿠키 값 가져오기
Cookies.get(); // { name: 'value' }

 

쿠키 삭제하기 : Cookies.remove()

# 쿠키 삭제하기
Cookies.remove('name');

# 현재 페이지의 쿠키 삭제하기
Cookies.remove('name', { path: '' }) // removed!

 

쿠키 옵션

expires

숫자 또는 날짜로 만료기간을 정할 수 있다.

 

만약, expires 옵션을 생략한다면 브라우저를 닫으면 쿠키가 사라진다.

Cookies.set('name', 'value', { expires: 7 });

 

path

쿠키를 볼 수 있는 특정 디렉토리를 가리킨다.

 

만약 path 옵션을 생략한다면 도메인을 가리키기 때문에 모든 디렉토리에서 쿠키를 볼 수 있다.( default : / )

Cookies.set('name', 'value', { path: '' })

 

domain

쿠키를 볼 수 있는 특정 도메인을 가리킨다.

 

만약 domain 옵션을 생략한다면, 현재 도메인과 서브도메인에서 만들어진 쿠키만들 볼 수 있다.

Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')

 

secure

프로토콜이 https인 경우에만, 쿠키를 전송할 수 있다.

Cookies.set('name', 'value', { secure: true })

 

sameSite

cross-site 에 따라 쿠키를 보낼지 말지 정한다.

 

현재 최신 브라우저는 default값으로 'lax'를 갖지만, 구식 브라우저는 아무런 값을 갖지 않는다.

Cookies.set('name', 'value', { sameSite: 'strict' })

 

default값 설정하기

cookie를 관리할때마다 같은 코드를 작성하는 것을 방지하기 위해, 옵션을 default값으로 설정할 수 있다.

const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })