쿠키란

• 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달해주는 역할
• HTTP에서는 Set-Cookie로 표현되며 응답헤더에서 서버에서 클라이언트로 쿠키를 전달

보안

Secure

Secure을 적용하면 https인 경우에만 가능

HttpOnly

XXS 공격을 방지하며 자바스크립트에서 접근 불가(document.cookie)하게 됨
HTTP 전송에만 사용가능

SameSite

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

• samesite=strict : 사용자가 사이트 외부에서 요청을 보낼 때, 이 옵션이 있는 쿠키는 절대로 전송이 안됨
• samsite-lax

1. "안전한" HTTP메서드인 경우(ex: get방식, post방식 X)
2. 최상위 레벨 탐색에서 이루어질 경우(브라우저 주소창에서 url을 변경하는 경우)

• samesite-none : 외부에 쿠키를 전송하겠다.(보안 컨텍스트가 필요함)

  크롬 브아우저는 해당 쿠키는 반드시 Secure가 설정된 쿠키여야함

속성

Expires

만료일이 되면 쿠키를 삭제함

max-age

쿠키의 최대 시간을 나타냄

Domain

명시한 도메인을 나타냄

path

이 경로를 포함한 하위 경로 페이지만 쿠키가 접근됨

쿠키함수

getCookie(name)

// 주어진 이름의 쿠키를 반환하는데,
// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

setCookie(name,value,options)

function setCookie(name, value, options = {}) {

  options = {
    path: '/',
    // 필요한 경우, 옵션 기본값을 설정할 수도 있습니다.
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

// Example of use:
setCookie('user', 'John', {secure: true, 'max-age': 3600});

deleteCookie(name)

function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  })
}

주의 : 갱신이나 삭제는 동일한 도메인과 경로에서만 해야 합니다.

참고자료

https://chobopark.tistory.com/232
https://ko.javascript.info/cookie
https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%BF%A0%ED%82%A4-%EA%B0%9C%EB%85%90-Cookie-%ED%97%A4%EB%8D%94-%EB%8B%A4%EB%A3%A8%EA%B8%B0