JavaScript Cookie - 온더테크

Contents

JavaScript 쿠키

쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각으로, 사용자의 세션 정보를 유지하거나 사용자에 대한 특정 정보를 저장하는 데 사용됩니다. 쿠키는 HTTP 요청에 자동으로 포함되어 서버로 전송되며, 주로 다음과 같은 목적으로 사용됩니다:

세션 관리 (로그인, 장바구니 등)
사용자 개인화 (사용자 설정, 테마 등)
추적 (사용자 행동 분석, 광고 타겟팅 등)

1. 쿠키의 구조

쿠키는 일반적으로 키-값 쌍의 형태로 저장됩니다. 각 쿠키는 이름, 값, 만료 날짜, 경로, 도메인 및 보안 플래그와 같은 다양한 속성을 가질 수 있습니다.

2. 쿠키 설정

쿠키는 JavaScript의 document.cookie 속성을 사용하여 설정할 수 있습니다.

document.cookie = "username=JohnDoe";

위의 예제는 username이라는 이름의 쿠키에 JohnDoe라는 값을 설정합니다. 기본적으로 설정된 쿠키는 세션 쿠키로, 브라우저가 닫힐 때 삭제됩니다.

2.1 쿠키 속성

expires: 쿠키의 만료 날짜를 설정합니다.
max-age: 쿠키의 수명을 초로 설정합니다.
path: 쿠키가 유효한 경로를 설정합니다.
domain: 쿠키가 유효한 도메인을 설정합니다.
secure: HTTPS 연결에서만 쿠키를 전송하도록 설정합니다.
HttpOnly: JavaScript에서 쿠키에 접근하지 못하도록 설정합니다 (서버 측에서만 설정 가능).

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

위의 예제는 username 쿠키에 만료 날짜와 경로를 설정합니다.

3. 쿠키 읽기

모든 쿠키는 document.cookie를 통해 문자열로 읽을 수 있습니다. 이 문자열은 각 쿠키가 ;로 구분된 형태입니다.

console.log(document.cookie);

위의 코드는 현재 저장된 모든 쿠키를 반환합니다. 특정 쿠키를 읽기 위해서는 문자열을 파싱해야 합니다.

function getCookie(name) {
  let cookieArr = document.cookie.split(";");
  for (let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");
    if (name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}
console.log(getCookie("username"));

4. 쿠키 삭제

쿠키를 삭제하려면 동일한 이름과 경로를 가진 쿠키를 만료 날짜를 과거로 설정하여 덮어쓰면 됩니다.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

5. 예제 코드

5.1 쿠키 설정 함수

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

5.2 쿠키 읽기 함수

function getCookie(name) {
  let nameEQ = name + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

5.3 쿠키 삭제 함수

function eraseCookie(name) {
  document.cookie = name + '=; Max-Age=-99999999;';
}

6. 보안 고려사항

HTTPOnly: 서버 측에서 설정하여 JavaScript에서 쿠키에 접근하지 못하도록 합니다. 이는 XSS 공격을 방지하는 데 도움이 됩니다.
Secure: 쿠키가 HTTPS 연결에서만 전송되도록 설정합니다.
SameSite: 쿠키가 동일 사이트 내에서만 전송되도록 하여 CSRF 공격을 방지합니다. SameSite 속성은 Strict, Lax, None 중 하나로 설정할 수 있습니다.

document.cookie = "username=JohnDoe; Secure; HttpOnly; SameSite=Strict";

7. 쿠키 활용 예제

7.1 사용자 개인화

사용자의 선호 테마를 쿠키에 저장하고, 페이지 로드 시 이를 적용할 수 있습니다.

function setTheme(theme) {
  setCookie('theme', theme, 7); // 7일 동안 유지
  document.documentElement.setAttribute('data-theme', theme);
}

document.addEventListener('DOMContentLoaded', function() {
  const savedTheme = getCookie('theme') || 'light';
  setTheme(savedTheme);
});

document.getElementById('theme-toggle').addEventListener('click', function() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
});

7.2 세션 유지

로그인 세션을 쿠키에 저장하고, 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열 때 세션 정보를 복원할 수 있습니다.

// 사용자가 로그인할 때
setCookie('isLoggedIn', 'true', 1); // 1일 동안 유지

// 페이지 로드 시 세션 상태 확인
document.addEventListener('DOMContentLoaded', function() {
  const isLoggedIn = getCookie('isLoggedIn') === 'true';
  if (isLoggedIn) {
    console.log('User is still logged in');
  } else {
    console.log('User is logged out');
  }
});

// 사용자가 로그아웃할 때
eraseCookie('isLoggedIn');

결론

쿠키는 웹 애플리케이션에서 사용자 세션 관리, 개인화, 추적 등을 위해 매우 유용한 도구입니다. 하지만 보안에 주의해야 하며, 특히 민감한 데이터는 암호화하여 저장하고, HTTPOnly 및 Secure 플래그를 설정하여 XSS 및 CSRF 공격을 방지하는 것이 좋습니다. 쿠키는 다양한 속성을 가지고 있어 필요에 따라 유연하게 사용할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

Post Views: 106