홈페이지에 방문했을 때, 공지 팝업창의 ‘오늘 하루 보지 않기’와 같은 체크박스를 클릭해 본 적이 있을 것이다. 또, 자동 로그인 기능, 로그인을 하지 않았는데도 장바구니 담기가 가능한 경험을 한 적이 있을텐데, 이들 모두 쿠키 덕분에 가능한 것이다. 쿠키를 사용함으로써 사용자의 웹 사이트 재방문 시 효율적으로 서비스를 제공할 수 있다.
쿠키를 한 마디로 표현하면, '브라우저에 보존되는 작은 크기의 메모장’이라 할 수 있다.
쿠키(Cookie)는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부이다. 서버가 HTTP 응답 헤더의 ‘Set-Cookie’에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장하고, 이때 저장되는 내용이 쿠키이다.
- 특징
- HTTP의 무상태성(stateless)을 보완한다.
- 주로 웹 서버에 의해 생성된다.
- 브라우저는 쿠키를 저장해 두었다가 동일한 서버에 재요청 시 헤더에 쿠키를 담아 데이터와 함께 전송한다.
- 사용자의 행동과 선호도를 추적하여 개인의 관심에 맞는 컨텐츠를 제공할 수 있다.
- 사이트 내 사용자 트래킹 및 분석이 가능하다.
🤔개념
특징
- 브라우저 단위로 생성: 크롬, 사파리 등 서로 다른 브라우저 내의 쿠키는 각각에 종속된다. 가령, 크롬에서 로그인하여 특정 사이트에 접속하였을 때 사파리와 같은 다른 브라우저에서 동일한 사이트에 접속하면 다시 로그인을 해야 한다.
읽기
document.cookie 는 name=value 쌍으로 구성되어있으며, 각 쌍은 ; 로 구분한다. 이 때, 쌍 하나는 하나의 독립된 쿠키를 나타낸다.
⇒ 정규표현식이나 배열 관련 함수를 사용하여 ;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.
쓰기
document.cookie 에 값을 할당하면 브라우저는 이 값을 받아 해당 쿠키를 갱신하며, 다른 쿠키의 값은 변경되지 않는다. 이때, cookie 는 데이터 프로퍼티(속성)가 아닌 접근자 프로퍼티이다. 즉, getter/setter와 같은 개념이라 기존값을 덮어쓰는 것이 아닌 새로운 값을 추가하는 방식으로 동작한다.
document.cookie = "user=Wonil";- 쿠키 이름 인코딩: 쿠키의 이름과 값엔 특별한 제약이 없기 때문에 모든 글자가 허용되지만, 형식의 유효성을 일관성 있게 유지하기 위해 반드시 내장함수
encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리해 줘야 한다.// 특수 값(공백)은 인코딩 처리해 줘야 합니다. let name = "my name"; let value = "Heo Wonil" // 인코딩 처리를 해, 쿠키를 my%20name=Heo%20Wonil로 변경 document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value); alert(document.cookie); // ...; my%20name=Heo%20Wonil - 쿠키의 제한점
encodeURIComponent로 인코딩한 이후의name=value쌍은 4KB를 넘을 수 없으며, 이 용량을 넘는 정보는 쿠키에 저장할 수 없다.- 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있으며, 개수는 브라우저에 따라 조금씩 다르다.
옵션
쿠키엔 몇 가지 옵션이 있으며, key=value 뒤에 나열하고 ;로 구분한다.
path
path=/url
이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있으며, 절대 경로여야 하고, 기본값은 현재 경로이다.
일반적으로,
path옵션을path=/같이 루트로 설정해 웹사이트의 모든 페이지에서 쿠키에 접근할 수 있도록 한다.
domain
domain=site.com
쿠키는 특정 도메인에만 한정된다는 특징이 있다. 즉, 특정 도메인의 쿠키를 다른 도메인이 대신 발급받을 수 없다. 이 특정 도메인을 지정할 수 있는 옵션이 바로 domain 이다. 해당 옵션은 쿠키에 접근 가능한 domain(도메인)을 지정하며, 아무 값도 넣지 않았다면 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다. 서브 도메인이나 다른 도메인에서 쿠키에 접속할 방법은 없다.
⇒ 도메인을 명시적으로 설정해야 한다.
// 서브 도메인(*.site.com) 어디서든 쿠키에 접속하게 설정할 수 있다
document.cookie = "user=Wonil; domain=site.com"
// forum.site.com와 같은 서브 도메인에서도 쿠키 정보를 얻을 수 있다
alert(document.cookie); // user=Wonil 쿠키를 확인할 수 있다expires & max-age
특정 만료 시간까지 상태 정보를 유지하게 쿠키를 생성할 수 있다. expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이러한 옵션이 지정되지 않은 쿠키를 ‘세션 쿠키(session cookie)’라고 부르는 반면, 지정된 경우의 쿠키를 ‘영속 쿠키(permanent cookie)’라고 부른다.
expires: 쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 또는 UTC 포맷으로 설정해야 하며,date.toUTCString을 사용하면 해당 포맷으로 쉽게 변경할 수 있다.옵션값을 과거로 지정하면 쿠키는 삭제된다.
// 지금으로부터 하루 후 let date = new Date(Date.now() + 86400e3); date = date.toUTCString(); document.cookie = "user=John; expires=" + date;max-age:expires옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 해주며, 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정한다. 이때, 만료일시는 서버의 시간이 아닌 쿠키가 저장되는 클라이언트의 시간이 기준이 됨에 유의한다.// 1시간 뒤에 쿠키 삭제 document.cookie = "user=Wonil; max-age=3600"; // 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함 document.cookie = "user=Wonil; max-age=0";
secure
이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송된다. 쿠키는 기본적으로 도메인만 확인할 뿐, 프로토콜을 따지진 않기 때문이다. 쿠키에 민감한 내용이 저장되어 있어 암호화되지 않은 HTTP 연결을 통해 전달되는 걸 원치 않을 때 사용한다(민감한 정보를 쿠키에 저장하는 것을 권장되지 않는다).
httpOnly
자바스크립트 같은 클라이이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. 이로부터 document.cookie 로 쿠키 정보를 읽을 수 없기 때문에 쿠키를 보호할 수 있으며, XSS 공격을 방지할 수 있다.
withCredentials
쿠키를 요청과 응답에 담기 위해서는 쿠키, Authorization 인증 헤더, TLS client certification을 내포하는 자격 인증 정보인 Credential를 요청과 응답에 담는 것을 허용해주어야 한다. 기본적으로 브라우저에서는 보안상의 이유로 별도 옵션 없이 브라우저의 이러한 인증과 관련한 정보를 담지 않도록 설정되어 있다. 따라서 이를 해제하기 위해서는 요청 및 응답에 Credential을 담는 것을 허용해주어야 한다.
다양한 ajax 요청에는 이러한 옵션을 설정하는 방법이 존재하고, axios 라이브러리의 경우 요청 헤더에 withCredentials 을 true 로 설정하여 이를 구현할 수 있다.
참고자료
쿠키와 document.cookie
[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기
[10분 테코톡] 쿠키의 쿠키
[10분 테코톡] 디투의 쿠키와 세션
