[JavaScript] 쿠키(Cookie) 사용법

2023.03.26 - [개발공부/CS] - 쿠키, 세션, 토큰, 캐시

쿠키, 세션, 토큰, 캐시

이전에 포스팅했던 글에 추가적으로 JavaScript에서 쿠키를 사용하는 방법에 대해 정리하고자 한다.

1. 쿠키(Cookie)란?

웹 사이트를 이용할 때, HTTP 프로토콜은 클라이언트가 요청(Request)을 서버에 보내고,

서버는 클라이언트에게 적절한 응답(Response)을 주고 연결(Connection)을 끊는 특성이 있다.

(HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜이다.)

 

또한 커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

이런 특징을 비연결지향(Connectionless)과 상태 없음(Stateless)이라 부른다.

 

정리하자면 HTTP 프로토콜은 사용자 정보를 저장 또는 유지하지 않는다는 것이다.

 

이는 서버 리소스 낭비가 줄어든다는 장점이 있지만 인터넷에서 우리가 사용하는 것과 같은 연속적인 통신이 어렵다는 단점이 있다.

(쇼핑몰 장바구니가 매번 초기화 되어있다고 생각하면 된다.)

또한 통신할 때마다 계속 다시 연결을 시도한다면, 서버에 불필요한 연산작업이 늘어나게 되어 서버의 성능 저하 또는 통신 장애로 이어질 수 있다.

 

때문에 이를 극복하고자 쿠키를 사용하고 있다.

 

이런 쿠키는 JavaScript에서 document.cookie 속성을 사용하여 쿠키를 생성, 읽기, 수정 및 삭제할 수 있다.

2. 쿠키(Cookie) 문법

쿠키 생성

document.cookie = "name=cake"; // 이름이 name이고 값이 cake인 쿠키생성
document.cookie = "color=white"; // 이름이 color이고 값이 white인 쿠키생성
document.cookie = "smell=good"; // 이름이 smell이고 값이 good인 쿠키생성

새로운 쿠키가 생성되어도 이름값이 다르다면 기존의 쿠키를 덮어쓰지 않는다.

 

쿠키 수정

document.cookie = "name=coffee"; // 값이 coffee인 쿠키로 수정

또한 쿠키속성들을 추가하여 생성할 수 있다.

 

 

쿠키속성

★ expires 속성

• expires: 쿠키 만료 날짜를 설정한다.
• max-age: expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 해준다.
• 현재부터 만료일시까지의 시간을 초로 환산한 값을 설정한다.

쿠키의 라이프타임은 만료기간이 없는 쿠키와 있는 쿠키로 정의할 수 있다.

 

만료기간이 없는 쿠키

• expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다.
• 세션 쿠키 (Expires, Max-Age 속성이 없는 쿠키)는 현재 세션이 끝날 때 삭제된다.

만료기간이 있는 쿠키

• 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제한다.
• 쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 한다.

document.cookie = "name=cake; expires=Thu, 18 Dec 2024 12:00:00 UTC";

// 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "name=cake; expires=" + date;

// 1시간 뒤에 쿠키가 삭제
document.cookie = "name=cake; max-age=3600";

// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
document.cookie = "name=cake; max-age=0";

 

★ Path 속성

• Path : 쿠키에 접근할 수 있는 절대 경로를 설정한다.
• Path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다
• Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다. (쿠키의 범위를 좁게 잡을수록 보안에는 좋다.)

// 경로가 /food면 /food, /food/bread, /food/bread/cake 등의 경로들 접근 허용
document.cookie = "name=cake; path=/food";

 

★ secure 속성

• secure: 쿠키가 https를 통해서만 전송된다.
• secure 옵션이 없으면 http에서 설정(생성)한 쿠키를 https에서 읽을 수 있으며 그 반대도 가능하다.
• 쿠키는 기본적으로 도메인만 확인하지 프로토콜을 따지진 않는다.
• 쿠키에 민감한 내용이 저장되어 있어 암호화되지 않은 HTTP 연결을 통해 전달되는 걸 원치 않는다면 이 옵션을 사용하면 된다.

// HTTPS로 통신하는 경우에만 쿠키가 전송
document.cookie = "name=cake; secure";

 

★ samesite 속성

• samesite: 쿠키가 다른 웹 사이트에 전송되지 않도록 한다.
• 보안 속성인 samesite 옵션은 크로스 사이트 요청 위조(cross-site request forgery, XSRF) 공격을 막기 위해 만들어진 옵션이다.

 

출처

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA%B8%B0#%F0%9F%92%A1_%EC%BF%A0%ED%82%A4%EC%99%80_%EC%84%B8%EC%85%98%EC%9D%98_%EC%B0%A8%EC%9D%B4%EB%8A%94?

[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기

https://developer-talk.tistory.com/341

[JavaScript]쿠키(Cookie) 사용 방법

https://ko.javascript.info/cookie

쿠키와 document.cookie

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

HTTP 쿠키 - HTTP | MDN