콘텐츠로 건너뛰기

웹 개발에서의 쿠키: 정의, 용도 그리고 보안

  • 테크

쿠키는 웹 개발에서 중요한 요소로, 서버와 사용자의 브라우저 간 데이터 전송 시 상태를 기억하는 데 사용됩니다.
이번 포스팅에서는 쿠키의 정의, 주요 용도, 보안 옵션, 서드파티 쿠키, 현재 웹사이트의 쿠키 확인 방법 등 다양한 주제를 다루어 쿠키의 작동 방식과 이를 활용하는 방법을 알아보도록 하겠습니다.

쿠키란?

쿠키는 서버가 사용자의 브라우저에 저장하는 작은 데이터입니다.

  • 브라우저가 동일 서버에 후속 요청을 보낼 때, 쿠키를 함께 전송해 서버가 사용자 정보를 기억할 수 있도록 돕습니다.
  • 사용자의 웹 방문 기록, 로그인 상태, 사이트 설정 등을 담아두는 역할을 합니다.

쿠키의 용도

  1. 세션 관리
    • 로그인 세션 유지: 로그인 후 새 페이지로 이동하거나 새 창을 켜더라도, 서버가 발급한 세션 ID를 쿠키에 저장해서 인증상태를 유지할 수 있습니다.
  2. 사용자 맞춤화
    • 온라인 쇼핑몰 사이트에서 쿠키를 이용해 “최근 확인한 상품 목록”을 보여줄 수 있습니다.
    • 여러 개의 언어를 지원하는 사이트의 경우, 선호하는 언어 설정이 쿠키에 저장되어 재방문 시 자동으로 선호 언어 페이지로 접근하게 됩니다.
  3. 분석 및 추적
    • 사용자 행동 추적: 광고주나 마케터가 특정 사용자가 어떤 페이지를 방문했는지 등을 수집해, 맞춤형 광고나 트래픽 분석에 활용합니다.
    • 위 같은 추적 기능으로 인해, 서드파티 쿠키와 관련한 프라이버시 이슈가 있습니다.

쿠키 보안 옵션

쿠키는 세션ID와 같은 민감한 정보를 저장하고 있기 때문에, 브라우저와 서버간 통신에서 쿠키가 노출될 위험을 방지하기 위해 보안 설정을 해야 합니다.

  1. Secure
    • Secure 플래그가 설정된 쿠키는 HTTPS 연결에서만 전송됩니다.
    • HTTP로 전송 시에는 쿠키를 전송하지 않아, 중간자 공격(MITM)으로 인한 쿠키 탈취를 방지합니다.
  2. HttpOnly
    • 클라이언트 측 자바스크립트(document.cookie)로 해당 쿠키에 접근할 수 없도록 막는 옵션입니다.
    • XSS(Cross-Site Scripting)을 통한 쿠키 탈취를 어렵게 만듭니다.
  3. SameSite
    • CSRF(Cross-Site Request Forgery)을 방지하기 위한 옵션입니다.
    • Strict, Lax, None 세 가지 설정이 있습니다.
      • Strict: 동일한 도메인에서만 쿠키를 전송합니다.
      • Lax: HTTP GET 요청 등에서는 쿠키를 전송하고, 외부 도메인 링크에서 오는 요청의 쿠키는 제한합니다.
      • None: 외부 도메인에서도 쿠키를 전송합니다. None 설정을 할 시 Secure 설정이 필수적입니다.
  4. 쿠키 만료 옵션 (Max-Age, Expires)
    • 쿠키를 저장할 기간을 지정하고, 기간이 지나면 자동으로 삭제됩니다.
    • Max-Age (초 단위) 또는 Expires (UTC 시간 기준 날짜)를 통해 쿠키 수명을 설정해 불필요한 장기 보관을 방지할 수 있습니다.

서드파티 쿠키

서드파티 쿠키란?

사용자가 방문한 도메인(퍼스트파티)이 아닌 다른 도메인에서 전송되는 쿠키를 의미합니다.

ads.example.com에서 제공되는 광고나 추적 스크립트를 통해, 본래 방문한 도메인(bizspring.co.kr)이 아닌 ads.example.com에 의해 생성된 쿠키는 서드파티 쿠키가 됩니다.

서드파티 쿠키 사용 시 주의점

  • 서드파티 쿠키가 동작하려면, 쿠키의 SameSite 옵션을 None으로 두어야 외부 도메인에서 오는 요청에도 쿠키가 전송될 수 있습니다.
  • SameSite 옵션을 None으로 할 경우, HTTPS 환경에서만 쿠키를 전송하도록 설정하는 Secure 옵션도 필수입니다.
  • Fetch API(또는 Axios) 등을 사용해 크로스 도메인 요청을 보낼 때, 쿠키를 포함하려면 credentials: ‘include'(또는 withCredentials: true) 옵션을 사용해야 합니다.
  • 예시 (Fetch API)
fetch('https://ads.example.com/api/post/click', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify({ action: 'click' })
});

쿠키 설정 예시 (Spring boot)

스프링 부트 (Spring Boot) 기반 프로젝트에서 쿠키를 설정하고 전송하는 예시 코드입니다.

@RestController
@RequestMapping("/cookie")
public class CookieController {

    @GetMapping("/set")
    public ResponseEntity<String> setCookie(HttpServletResponse response) {

        ResponseCookie cookie = ResponseCookie.from("sid", "biz123")
                .httpOnly(true)    // 자바스크립트에서 접근 불가
                .secure(true)      // HTTPS에서만 전송
                .sameSite("None")  // 서드파티 쿠키 지원
                .path("/")
                .maxAge(60 * 30)   // 30분
                .build();


        response.addHeader(HttpHeaders.SET_COOKIE, cookie.toString());

        return ResponseEntity.ok("쿠키 설정 완료");
    }

    @GetMapping("/get")
    public ResponseEntity<String> getCookie(@CookieValue(value = "sid", required = false) String sid) {
        if (sid == null) {
            return ResponseEntity.ok("쿠키가 없습니다.");
        }
        return ResponseEntity.ok("쿠키 값: " + sid);
    }

    @GetMapping("/delete")
    public ResponseEntity<String> deleteCookie(HttpServletResponse response) {
        ResponseCookie cookie = ResponseCookie.from("sid", "")
                .httpOnly(true)
                .secure(true)
                .sameSite("None")
                .path("/")
                .maxAge(0)  // 즉시 만료
                .build();

        response.addHeader(HttpHeaders.SET_COOKIE, cookie.toString());

        return ResponseEntity.ok("쿠키 삭제 완료");
    }
}

현재 사이트에 있는 쿠키

현재 웹사이트에서 설정된 쿠키를 확인하려면 브라우저 개발자 도구를 사용할 수 있습니다.

  • 확인 방법
    1. F12 키를 눌러 개발자 도구를 엽니다.
    2. 애플리케이션 > 저장용량 > 쿠키에서 쿠키 목록을 확인할 수 있습니다.

아래 JavaScript 예제를 통해 현재 사이트의 쿠키를 확인할 수 있습니다.

  • document.cookie를 통해 쿠키 문자열을 볼 수 있지만, HttpOnly 옵션이 걸려있는 쿠키는 접근할 수 없습니다.
  <script>
    document.getElementById('showCookies').addEventListener('click', function () {
      const cookies = document.cookie.split('; ');
      const tableBody = document.querySelector('#cookieTable tbody');
      const cookieTable = document.getElementById('cookieTable');

      tableBody.innerHTML = '';

      if (cookies.length === 1 && cookies[0] === "") {
        const noDataRow = document.createElement('tr');
        noDataRow.innerHTML = `<td colspan="2" style="text-align:center;">No cookies found.</td>`;
        tableBody.appendChild(noDataRow);
      } else {
        cookies.forEach((cookie) => {
          const [key, value] = cookie.split('=');
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${decodeURIComponent(key)}</td>
            <td>${decodeURIComponent(value)}</td>
          `;
          tableBody.appendChild(row);
        });
      }

      cookieTable.style.display = 'table';
    });
  </script>
Cookie Viewer

이번 포스팅에서는 쿠키의 정의와 용도, 주요 보안 옵션, 그리고 실제 활용 방법에 대해 알아보았습니다.
쿠키는 세션 관리, 사용자 맞춤화, 분석 및 추적 등 다양한 목적으로 웹 애플리케이션에서 사용됩니다. 하지만 보안 옵션을 적절히 설정하지 않으면 개인정보 유출이나 보안 취약점에 노출될 수 있으므로 주의가 필요합니다.

Ref.
Document: cookie property
Using HTTP cookies

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

관련 글 보기

History API를 활용한 브라우저 세션 기록 조작

History API를 활용하여 SPA(Single Page Application)에서 브라우저의 세션 기록을 조작하고 관리하는 방법을 소개하며, pushState, replaceState 등의 주요 메소드와 popstate 이벤트를 통해 페이지 새로고침 없이 URL과 상태를 동적으로 관리하는 방법을 설명합니다.

Zustand를 이용한 상태관리 방법

React 애플리케이션의 Prop Drilling 문제를 해결하기 위한 경량화 상태 관리 라이브러리인 Zustand의 특징과 사용법을 소개하며, 간결한 API와 성능 최적화를 통해 효율적인 전역 상태 관리를 구현하는 방법을 설명합니다.

React의 Suspense와 lazy로 코드 스플리팅 최적화하기

React의 Suspense와 lazy를 활용한 코드 스플리팅은 애플리케이션의 초기 로딩 시간을 줄이고 사용자 경험을 개선하는 핵심 성능 최적화 전략입니다. 이 기술을 통해 필요한 컴포넌트만 동적으로 로드하여 애플리케이션의 전반적인 성능을 향상시킬 수 있습다.