cookie

특징

• 브라우저에 저장되는 작은 크기의 문자열
• HTTP 프로토콜의 일부
  • 웹서버의 의해서 만들어짐
  • 서버가 http 응답 헤더의 set-cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장
  • 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 cookie 요청 헤더에 넣어서 함께 전달
• cookie의 크기느 4KB를 넘을 수 없다
• 하나의 도메인으로 저장할 수 있는 쿠키의 개수는 20여개정도이고 이건 브라우저마다 다르다
• name=value 쌍으로 구성되어 있고 각 쌍은 ';' 으로 구분한다

cookie 읽기

alert(document.cookie)

• 브라우저 개발자 도구 창을 열어서 console 창에 위 코드를 실행해보면 쿠키를 확인할 수 있다

cookie 쓰기

document.cookie = "user=John";
alert(document.cookie);

• 명시된 name에 해당하는 쿠키의 값만 변경한다
• 쿠키의 name에는 특별한 제약은 없지만 형식의 유효성을 일관성 있게 유지하기 위해서는 encodingURICompnent를 사용하여 이름과 값을 이스케이프 처리 해 주는 것이 좋다

cookie 옵션들

path

path=/mypath;

• URL path(경로)의 접두사로 이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다
• 절대경로이어야 함
• 미지정시 기본값은 현재 경로
• path=/admin 이라고 설정하면 이 쿠키는 /admin 과 /admin/something 에서만 볼 수 있다. /home 이나 /adminpage에서는 볼 수 없다
• 그냥 path=/ 로 설정하는 것이 좋다

domain

• 쿠키에 접근 가능한 도메인을 지정
• 도메인 옵션에 아무 값도 넣지 않는다면 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다
• site.com에서 설정한 쿠키는 other.com에서 없을 수 없다
• 서브 도메인에서도 쿠키 정보를 얻을 수 없다
  • 예를 들어 서브 도메인으로 forum.site.com에서는 site.com의 쿠키를 얻을 수 없다
• 쿠키의 안정성을 높이기 위해서 이렇게 한다고 함
• 도메인 설정 값에 'domain=site.com' 이라고 설정을 하면 서브 도메인에서도 쿠키에 접근할 수 있다

expires와 max-age

• expires와 max-age 를 지정하지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제되고 이런 쿠키를 세션 쿠키라고 부른다
• expires와 max-age 를 지정하면 브라우저가 닫혀도 쿠키가 삭제되지 않는다
• 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 삭제한다
• 쿠키의 유효 일자는 반드시 GMT 포맷으로 설정해야 한다.
• expires 는 언제까지 유효한다

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

• max-age 는 expires 옵션의 대안으로 쿠키 만료 기간을 설정할 수 있게 해 준다. 초로 환산
• max-age 는 지금부터 얼마 동안 유효한지 판단

// 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "user=John; max-age=3600";

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

secure

• 이 옵션을 설정하면 https로 통신하는 경우에만 쿠키가 전송됨
• 즉, http 프로토콜 사이트에서는 쿠키에 접근하지 못함

httpOnly

• httpOnly 옵션은 웹서버에서 set-cookie 헤더를 이용해 쿠리를 설정할 때 지정할 수 있다
• 이 옵션은 자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 조작할 수 없게 한다.
  • 즉, document.cookie 를 통해서 쿠키를 읽거나 쓰지 못한다

samesite

• https://ko.javascript.info/cookie#ref-596

참조

• https://ko.javascript.info/cookie