cookie

쿠키(Cookie)란 무엇인가?

쿠키는 클라이언트(브라우저)에 저장되는 짧은 텍스트 데이터로, HTTP 프로토콜의 **무상태성(statelessness)**을 보완하기 위해 사용되는 도구다.

---

HTTP의 무상태성이란?

HTTP는 기본적으로 서버가 이전의 요청이나 응답을 기억하지 못하는 구조이다.
예를 들어, 사용자가 “아메리카노 한 잔 주세요”라고 요청하고, 서버가 “따뜻하게 드릴까요?”라고 응답한 뒤, 다시 “아이스로 해주세요”라고 요청해도 서버는 이전 요청을 기억하지 못한다.
이처럼 HTTP는 매 요청마다 독립적으로 처리되기 때문에 상태를 유지하지 않는다.

 

---

쿠키의 역할

이러한 무상태성을 보완하기 위해 쿠키가 등장하게 되었다.
서버는 한 번의 요청-응답 이후에 **클라이언트에게 정보를 저장하도록 지시(set-cookie)**하고, 클라이언트는 다음 요청 시 이 정보를 **자동으로 다시 서버에 전달(cookie 헤더)**한다.

예를 들어, 사용자가 아메리카노를 주문했을 때 서버가 이 정보를 쿠키로 저장하면, 다음 요청에서 “아이스로 해주세요”라고만 해도 서버는 이전에 커피를 주문한 사실을 기억하고 아이스 아메리카노로 응답할 수 있다.
이처럼 쿠키는 클라이언트에 메모처럼 저장된 정보를 통해 상태를 이어가는 데 도움을 준다.

 

---

쿠키의 동작 방식

• 서버 → 클라이언트: Set-Cookie 헤더를 통해 쿠키를 설정한다.
• 클라이언트 → 서버: 이후 요청에서 Cookie 헤더를 통해 쿠키 정보를 함께 보낸다.
• 클라이언트는 서버가 설정한 쿠키를 자동으로 포함하여 전송하며, 별도로 사용자가 설정하지 않아도 된다.

---

쿠키의 특징

• 저장 위치: 클라이언트(브라우저)
• 관리 주체: 서버
• 수동 개입 없음: 쿠키가 설정되면 클라이언트는 항상 자동으로 서버에 보낸다.
• 보안 고려사항: 인증 정보를 저장하는 데 쿠키를 사용할 수도 있지만, 쿠키 자체가 인증 기능을 제공하는 것은 아니다.

---

쿠키의 활용 예시

1. 로그인 유지: 로그인한 사용자의 인증 토큰을 쿠키에 저장하여, 페이지를 이동해도 로그인을 유지한다.
2. 모달창 제어: “오늘 하루 보지 않기” 체크 시, 해당 정보를 쿠키에 저장하여 하루 동안 모달이 뜨지 않도록 제어한다.
3. 광고 타겟팅: 검색어 정보나 관심사를 쿠키로 저장해, 관련된 광고를 보여주는 데 활용한다.

---

3자 쿠키(Third-party Cookie)

• 다른 도메인의 서버에서 설정한 쿠키를 현재 방문 중인 사이트에서도 접근할 수 있는 구조를 말한다.
• 사용자의 행동을 추적하는 데 활용되어 왔지만, 최근에는 개인정보 보호 이슈로 대부분의 브라우저에서 차단하거나 폐지하는 추세다.

 

---

 

쿠키 적용 방법

 credentials 설정

  credentila 설정이란 다른도메인에 요청을 보낼 때 요청에 인증정보를 담아서 보낼 지를 결정하는 항목.

  서버나 클라이언트 둘다 credential 부분을 true 로 설정 해줘야 쿠키를 주고 받을 수 있다.

 

<서버측 코드>

const express = require("express");
const cors = require("cors");
const cookieParser = require("cookie-parser");

const app = express();

app.use(
  cors({
    origin: ["http://localhost:5500"],
    methods: ["GET", "DELETE", "OPTIONS"],
    credentials: true,    // 설정해야 쿠키를 주고받을 수있다.
  })
);

app.use(cookieParser());

app.get("/", (req, res) => {
  res.cookie("test-kookie", "my cookie", {  // name : test-kookie , value : my cookie
    maxAge: 100000,   // 유효 기간           
    httpOnly: true,   // document.cookie 명령어로 볼수 없음
    secure: true,     // 보안 적용 : 탈취당하더라도 암호화로 볼수 없다.
  });
  res.send("쿠키 생성 완료");
});

app.delete("/", (req, res) => {
  res.clearCookie("test-kookie", {
    httpOnly: true,
    secure: true,
  });
  res.send("쿠키 삭제 완료");
});

app.listen(3000, () => console.log("서버 실행"));

 

 

<클라이언트 코드>

const setCokkieButton = document.querySelector("#set_cookie");
const deleteButoon = document.querySelector("#delete_cookie");

axios.defaults.withCredentials = true; // 설정하지 않으면 쿠키를 주고받을수 없음

setCokkieButton.onclick = () => {
  axios.get("http://localhost:3000").then((res) => console.log(res));
};

 

 

 

버튼 클릭 시 개발자 도구 network 탭에 set-Cookie 에 my-cookie 가 들어온것을 확인 할 수 있다.

쿠키 테스트시 바로 안들어오는 경우가 있는데 'localhost:port번호( localhost:5500)' 로 접속해야 바로바로 확인이 가능하다.

 ( cors 설정을 해도 http://127.0.0.1:5500/index.html  숫자로 표기된 사이트에서는 잘안됨 )

 

 

Headers 의 쿠키 이름이 set-Cookie 이고 value 값은 my%20cookie 라는 것을 볼 수 있다. (%20 은 띄워쓰기)

 

 

application 탭에서도 쿠키 정보를 확인 할 수 있다. 

maxAge 옵션

 

ms 단위로 설정해서 만료 시간을 작성 할 수 있다. (서버 코드에서 설정한다.)

app.get("/", (req, res) => {
  res.cookie("test-kookie", "my cookie", { maxAge: 100000 });
  res.send("쿠키 생성 완료");
});

 

쿠키정보에 만료시간을 확인 할 수 있다.

 

HttpOnly 옵션

설정하지 않으면 콘솔창에 document.cookie 명령어로 쿠기 정보를 볼 수 있다.

노출 될 수 있는 위험 성이 있다.

무조건 설정 하자!

 

 

아래와 같이 서버측에 "httpOnly : true" 라고 설정하게 되면

app.get("/", (req, res) => {
  res.cookie("test-kookie", "my cookie", { maxAge: 100000, httpOnly: true });
  res.send("쿠키 생성 완료");
});

 

크롬 개발자도구 application에서 확인해보면 쿠기 획득 시 httpOnly 에 체크 표시가 된다.

 

그리고 콘솔 창에서는 이제 확인 할 수 없다.

 

 

secure 옵션

 https 방식으로 메세지를 암호화 해서 전달하기 때문에 중간에 탈취 당하더라도 쿠키 정보를 볼수 없게 된다.

 localhost 는 http 이지만 크롬에서는 생성이 되게 만들어 놓은 것으로 보인다.

app.get("/", (req, res) => {
  res.cookie("test-kookie", "my cookie", {
    maxAge: 100000,
    httpOnly: true,
    secure: true,
  });
  res.send("쿠키 생성 완료");
});

 

 

쿠키 삭제

 삭제 시 서버측에서 clearCookie 라는 명령어로 삭제가 가능하다. (maxAge 넣지 않아도 상관 없다)

 이때 생성 시 작성했던 옵션을 모두 작성해야 삭제가 가능 하다. (localhost 에서는 옵션 작성 없이도 삭제 가능)

 

<클라이언트 쿠키삭제 요청 코드>

deleteButoon.onclick = () => {
  axios.delete("http://localhost:3000").then((res) => console.log(res));
};

 

 

<서버 쿠키 삭제 코드>

app.delete("/", (req, res) => {
  res.clearCookie("test-kookie", { // 쿠기이름과 옵션을 작성해주자
    httpOnly: true,
    secure: true,
  });
  res.send("쿠키 삭제 완료");
});