[Node.js] Cookie

3. 웹 인증 및 보안 기초

1. 쿠키란?

쿠키(Cookie)는 웹 브라우저에 저장되는 작은 데이터 조각으로, 사용자의 상태를 기억하기 위해 서버가 클라이언트에게 저장하게 하는 정보다.

 

쿠키는 "무상태성(statelessness)"을 보완하기 위해 사용된다.

• 무상태성(Stateless)이란?
  HTTP 프로토콜은 기본적으로 이전 요청과 다음 요청 사이의 상태를 유지하지 않음.
  예를 들어 로그인한 사용자를 기억할 수 없음.
• 이 때문에, 로그인 유지 / 장바구니 / 언어 설정 등을 기억하기 위해
  "쿠키"를 활용하여 상태(state)를 유지한다.

2. 쿠키의 역할

그래서 클라이언트측에서 모든정보를 담아 한꺼번에 요청한다.

클라이언트측에서 모든정보를 가지고있기가 부담이되.

 

역할	설명
사용자 인증	로그인 시 쿠키에 세션 ID 또는 토큰을 저장하여 사용자 인증 상태 유지
사용자 설정 저장	다크 모드, 언어 설정 등 개인화된 설정값을 기억
트래킹 및 마케팅	사용자의 행동을 추적하여 광고 추천 및 통계 분석 등에 활용
세션 관리	서버는 쿠키에 저장된 세션 ID를 통해 사용자의 상태를 확인하고, 데이터를 제공

보통 사용자인증에 쓰이지만, 쿠키자체는 인증을 위한 도구가 아니라, 단순히 HTTP의 무상태성을 보완하기위해 만들어진 도구다!

3. 쿠키 활용 사례

10x10 모달창 예시

1. 로그인 상태 유지
   사용자가 로그인하면 세션 ID를 쿠키에 저장 → 브라우저가 매 요청마다 쿠키를 포함 → 서버는 해당 세션 ID로 사용자를 식별
2. 자동 로그인
   토큰 기반 인증 시, 토큰을 쿠키에 저장해두고 페이지를 새로고침해도 로그인 유지
3. 쇼핑몰 장바구니 기능
   장바구니 데이터를 쿠키나 세션에 저장해, 페이지를 이동해도 장바구니 상태 유지
4. 광고 타겟팅
   어떤 상품을 봤는지 쿠키에 기록 → 비슷한 제품 광고 제공
5. 사이트 방문 횟수 체크
   visited=true 같은 값을 쿠키에 저장해 첫 방문 여부 판단

서드파티 쿠키 (Third-party Cookie)

• 사용자가 방문한 웹사이트(예: news.com)가 아닌 다른 도메인(예: adtracker.com)이 설정한 쿠키입니다.
• 광고, 사용자 행동 추적, 분석 목적으로 사용됨.
• 브라우저 상에서는 사용자 입장에서 보이지 않는 곳에서 작동 → 그래서 개인정보 침해 논란이 생겼다.
• 개인정보보호 이슈로 인해 대부분의 브라우저(크롬, 사파리, 파이어폭스)는 서드파티 쿠키를 차단하거나 지원 종료 예정
• 특히 광고 추적에 사용되며 사용자 행동을 무단으로 수집하는 문제가 많았기 때문

서드파티 쿠키 vs 퍼스트파티 쿠키

구분	설명
퍼스트파티 쿠키	사용자가 방문한 현재 사이트의 도메인에서 설정한 쿠키 (예: news.com에서 news.com 쿠키 설정)
서드파티 쿠키	현재 사이트가 아닌 외부 도메인에서 설정한 쿠키 (예: news.com에서 adtracker.com이 설정한 쿠키)

간단 쿠키실습

npm init -y
npm i express cors cookie-parser

• express: 서버 구축을 위한 Node.js 프레임워크
• cors: 교차 출처 요청(CORS)을 허용하기 위한 미들웨어
• cookie-parser: 쿠키를 파싱하여 req.cookies로 사용할 수 있게 해줌

서버 기본 설정

// server.js
const express = require("express");
const cors = require("cors");
const cookieParser = require("cookie-parser");

const app = express();
app.use(
  cors({
    origin: ["http://localhost:5500", "http://127.0.0.1:5500"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true, // 인증정보를 저장할수있도록 설정
  })
);
app.use(cookieParser());
app.use(express.json());

app.listen(3000, () => {
  console.log("서버가 http://localhost:3000 에서 실행중입니다.");
});

클라이언트 쿠키 추가/삭제 기능

<button id="set_cookie">쿠키추가</button>
<button id="delete_cookie">쿠키삭제</button>

사용자 인터랙션을 통해 쿠키 생성 및 삭제 요청을 전송

// cookie.js
const setCookieButton = document.querySelector("#set_cookie");
const deleteCookieButton = document.querySelector("#delete_cookie");

axios.defaults.withCredentials = true; 

setCookieButton.addEventListener("click", () => {
  axios.get("http://localhost:3000").then((response) => {
    console.log(response);
  });
});

deleteCookieButton.addEventListener("click", () => {
  axios.delete("http://localhost:3000").then((response) => {
    console.log(response);
  });
});

axios.defaults.withCredentials = true;는 axios가 자동으로 쿠키를 포함해서 요청하도록 설정한다.

서버측 쿠키 처리 로직

// server.js
app.get("/", (req, res) => {
  res.cookie("test-cookie", "test-value" , {
    maxAge: 1000 * 60 * 60 * 24, // 쿠키의 유효기간을 1일로 설정
    httpOnly: true, // 자바스크립트에서 쿠키를 접근할 수 없도록 설정
    secure: true, // https에서만 쿠키를 전송하도록 설정
    sameSite: "None", // 크로스 도메인에서 쿠키를 전송하도록 설정
  });
  res.send("쿠키 생성 완료");
});

app.delete("/", (req, res) => {
  res.clearCookie("test-cookie", {
    maxAge: 1000 * 60 * 60 * 24, // 삭제시에도 동일 옵션
    httpOnly: true,
    secure: true,
    sameSite: "None",
  });  
  res.send("쿠키 삭제 완료");
});

clearCookie()는 생성할때 설정한 옵션과 동일하게 설정해야 쿠키가 삭제된다는것이다.

sameSite 관련 에러&해결

❗️"SameSite=Lax" 속성으로 설정된 쿠키가 탑레벨 내비게이션이 아닌 크로스사이트 요청으로 인해 차단되었습니다.

개발시 sameSite: "Lax" 옵션 권장하길래 그렇게 작성했는데 쿠키생성이 안됐다.
크로스 도메인 요청에서 Set-Cookie 헤더가 차단 되었다고한다.

일반적인 axios.get() 호출은 top-level navigation이 아니므로, 브라우저가 SameSite=Lax 쿠키를 차단하는데,

해결방법은 sameSite는 None, secure는 true로 설정하면된다.

app.get("/", (req, res) => {
  res.cookie("test-cookie", "test-value", {
    ...
    secure: true,                // HTTPS에서만 전송
    sameSite: "None",            // 크로스 도메인에서도 전송 가능
  });
});

잘 생성되었고 삭제도 잘된다.

HTTP 쿠키의 기본 동작 방식

쿠키가 생성된 후 다시 요청시에 request headers에 쿠키를 자동으로 보내고있다.

왜 cookie.js에서 명시적으로 안 보내도 자동 전송되는가?
브라우저는 서버가 설정한 쿠키를 저장해두고, 그 쿠키가 필요한 요청마다 자동으로 함께 전송하기 때문이다.

동작 원리

1. 서버가 Set-Cookie 응답 헤더로 쿠키를 설정

Set-Cookie: test-cookie=test-value; Path=/; SameSite=None; Secure

2. 브라우저가 해당 쿠키를 저장
   • Secure, SameSite, Domain, Path 등의 조건이 맞으면 브라우저에 쿠키가 저장됨.
3. 이후 해당 도메인·경로로 요청 시 자동으로 쿠키가 Request Header에 포함

Cookie: test-cookie=test-value

즉, 클라이언트 코드에서 쿠키를 명시적으로 headers에 넣지 않아도
브라우저가 알아서 "내가 갖고 있는 쿠키인데 이 요청과 관련 있네?" → 자동으로 첨부해서 서버에 보냄

자동으로 보내지려면 다음 조건들을 충족해야 한다.

조건	설명
SameSite 설정	None이면 cross-site에서도 보낼 수 있음. 이때 Secure도 필수
Secure 설정	HTTPS 환경에서만 쿠키 전송 허용
Domain, Path 조건	현재 요청 URL이 쿠키 설정과 일치해야 전송

"서버가 쿠키를 저장하면 클라이언트는 다음 요청부터 쿠키를 자동으로 함께 보낸다."
쿠키를 클라이언트 코드에서 명시적으로 붙이지 않아도, 브라우저가 알아서 처리한다.