Set-Cookie

쿠키란

• 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달해주는 역할

• HTTP에서는 Set-Cookie로 표현되며 응답헤더에서 서버에서 클라이언트로 쿠키를 전달

보안

Secure

HttpOnly

SameSite

• 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
  })
}

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

참고자료