프론트엔드 개발자가 알아야 할 쿠키 정책

들어가며

최근 YES24, 롯데카드 등 굵직한 해킹 사고가 이어지면서, 프론트엔드 개발자들 사이에서도 보안에 대한 관심이 높아지고 있습니다. 저는 보안은 서버의 몫이라고 생각하고 있었는데, 이번 사건을 계기로 보안 이슈에 관심을 가지게 되었습니다! 그래서 보안에 대해 공부한 내용을 글로써 정리해보고자 합니다.

 

이번 글에서는 브라우저의 쿠키에 대해 정리해보았습니다.

 

---

쿠키 기본 이해

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.
- MDN - 

 

쿠키는 기본적으로 서버가 발급하고 브라우저가 저장하는 구조입니다. 서버는 응답 헤더에 Set-Cookie를 포함시켜 클라이언트에 전달합니다.

 

HTTP/1.1 200 OK
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax; Path=/

 

브라우저는 이를 저장한 뒤, 이후 동일한 도메인에 요청을 보낼 때 자동으로 Cookie 헤더에 포함시킵니다.

 

브라우저 JavaScript 코드에서 document.cookie를 통해 쿠키를 읽거나 쓰는 것도 가능하지만, HttpOnly나 Secure 같은 중요한 보안 속성은 클라이언트에서 지정할 수 없습니다.

 

따라서 보안이 중요한 세션 쿠키는 반드시 서버에서 발급하고 관리해야 합니다.

 

---

보안 관련 핵심 속성

세 가지 속성은 서로 다른 위협을 막아줍니다.

• SameSite → CSRF 방어
• Secure → HTTPS 전송 보장
• HttpOnly → XSS 방어

 

🍪 SameSite

교차 사이트 요청 시 쿠키 전송 여부를 제한하는 속성입니다.

• Strict: 동일 사이트 요청에서만 전송 → 보안 강하지만 UX 불편 가능
• Lax: 대부분의 안전한 요청(GET 네비게이션 등)에는 전송, 위험한 요청(POST 등)은 차단 → 기본값
• None: 모든 교차 사이트 요청에 전송 → 단, 반드시 Secure와 함께 사용해야 함

 

🔒 Secure

HTTPS 연결에서만 쿠키를 전송하도록 강제합니다.이 속성이 없다면 HTTP 평문 통신에서도 쿠키가 전송되어, 중간자 공격에 노출될 수 있습니다. 따라서 운영 환경에서는 반드시 Secure를 설정해야 합니다.

 

🚫 HttpOnly

JavaScript에서 document.cookie로 접근할 수 없도록 막습니다. 이름만 보면 HttpOnly가 “HTTP 요청에만 쓰인다” 로 오해하기 쉬운데, 실제 역할은 조금 다릅니다. 이 속성을 설정하면 XSS 공격이 발생하더라도 쿠키가 노출되지 않습니다. 특히 세션 쿠키와 같이 민감한 정보는 반드시 HttpOnly로 설정하는 것이 원칙입니다.

 

---

그 외 알아두면 좋은 속성들

이 속성들은 보안보다는 “쿠키의 범위와 수명 관리”에 더 가깝습니다. 하지만 설정을 잘못하면 의도치 않게 다른 경로·서브도메인에서 쿠키가 사용되거나, 만료되지 않고 남아 있을 수 있으므로 주의가 필요합니다.

• Expires / Max-Age → 쿠키의 유효기간을 지정합니다.
  • Expires: 특정 시각까지 유효
  • Max-Age: 초 단위로 수명 지정 (권장)
  • 보통 세션 쿠키는 Max-Age 없이 발급되어 브라우저 종료 시 삭제됩니다.
• Path → 쿠키가 적용되는 URL 경로를 제한합니다.
  • 예: Path=/admin → /admin 하위 경로에서만 전송
• Domain → 쿠키가 적용되는 도메인 범위를 지정합니다.
  • 예: .example.com → api.example.com, shop.example.com 모두 전송
  • 필요 이상으로 넓게 설정하면 위험합니다.

 

---

Next.js 15 App Router 예제

// app/api/login/route.ts (Next.js 15 App Router)
import { cookies } from 'next/headers';

export async function POST() {
  cookies().set('session', 'abc123', {
    httpOnly: true,   // JS에서 접근 불가 → XSS 방어
    secure: process.env.NODE_ENV === 'production', // HTTPS 연결에서만 전송
    sameSite: 'lax',  // CSRF 방어 기본값
    path: '/',        // 사이트 전역에서 적용
  });

  return Response.json({ ok: true });
}

 

---

마치며

최근 침해 사례가 보여주듯, 보안은 서버만의 과제가 아니라는 것을 느꼈습니다. 세션 쿠키를 서버에서 발급하고 HttpOnly, Secure, SameSite를 기본값처럼 적용하는 것만으로도 XSS·CSRF·중간자 공격의 노출면을 크게 줄일 수 있다는 것을 배웠습니다!

 

---

참조

• https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/Cookies