쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부입니다
쿠키는 주로 웹서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더의 Set-Cookie
에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다 (쿠키).
브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 Cookie
요청 헤더에 넣어서 함께 전달합니다
쿠키는 클라이언트 식별과 같은 인증에 많이 사용됩니다.
Set-Cookie
에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다.document.cookie로 확인한 daum.net의 쿠키
> document.cookie
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638236159761'
document.cookie 프로퍼티를 이용하면 자바스크립트로 쿠키를 확인할 수 있습니다.
name=value 쌍으로 구성되고, 각 쌍은 ;
로 구분되는걸 알 수 있습니다.
httpOnly로 설정되지 않은 쿠키들을 확인할 수 있습니다
document.cookie로 쿠키 쓰기
> document.cookie
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638245518265'
> document.cookie = 'user=John';
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638245518265; user=John'
>
// 특수 값(공백)은 인코딩 처리해 줘야 합니다.
let name = "my name";
let value = "John Smith"
// 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다.
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
document.cookie에 값을 쓸 때는 data property가 아닌 accessor property 입니다.
document.cookie= 연산은 모든 쿠키를 덮어쓰지 않고, 명시된 쿠키인 user의 값만 갱신합니다.
encodeURIComponent
로 인코딩 이후 name=value
쌍은 4KB를 넘을 수 없습니다.
도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있습니다.
개발자도구에서 확인한 daum.net의 쿠키
쿠키 옵션
옵션은 key=value
뒤에 나열하고 ;
로 구분합니다.
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"
Domain
쿠키에 접근 가능한 도메인 지정
domain
옵션에 아무 값이 없는 경우, 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있습니다 (subdomain도 불가)
domain
옵션에 루트 도메인을 명시적으로 설정하는 경우 서브 도메인에서도 쿠키에 접근할 수 있습니다
// site.com에서
// 서브 도메인(*.site.com) 어디서든 쿠키에 접속하게 설정할 수 있습니다.
document.cookie = "user=John; domain=site.com"
// 이렇게 설정하면
// forum.site.com와 같은 서브도메인에서도 쿠키 정보를 얻을 수 있습니다.
alert(document.cookie); // user=John 쿠키를 확인할 수 있습니다.
domain=.site.com
식으로 작성합니다Path
Expires / Max-Age
Expires
나 Max-Age
가 지정되어 있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다(세션 쿠키)
Max-Age와 Expires 모두 있는 경우 Max-Age가 적용됩니다(Expires 무시)
Expires(유효 일자)
date.toUTCString
사용// 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;
Max-Age(만료 기간)
// 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "user=John; max-age=3600";
// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
document.cookie = "user=John; max-age=0";
HttpOnly
Set-Cookie
헤더를 이용해 쿠키를 설정할 때 지정할 수 있습니다.Secure
// (https:// 로 통신하고 있다고 가정 중)
// 설정한 쿠키는 HTTPS 통신시에만 접근할 수 있음
document.cookie = "user=John; secure";
SameSite
back.com
을 사용하는 모든 폼에 XSRF 보호 토큰
과 같은 특수 필드를 넣어서 막지만, 구현에 시간이 걸립니다samesite=strict
(samesite 옵션만 써줘도 동일)samesite=lax
strict
와 마찬가지로 lax
도 사이트 외부에서 요청을 보낼 때 브라우저가 쿠키를 보내는 걸 막아줍니다.samesite=lax
옵션이 설정되어 있으면 쿠키가 서버로 전송됩니다samesite
는 오래된 브라우저에서는 지원하지 않습니다(2017년 전)브라우저에 따라 서드 파티 쿠키를 허용하지 않을 수 있습니다. Safari는 기본적으로 서드 파티 쿠키를 금지합니다.
사용자가 EU 국가 거주자인 경우 GDPR을 준수해야 합니다. 따라서, 사용자 추적 시 반드시 동의를 얻어야 합니다.