Cookie (1. 개념)

eeensu·2024년 8월 9일

용어 정리와 팁

목록 보기

25/26

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

쿠키에 접근하는 기본적인 방법

document.cookie 를 사용하여 현재 도메인에서 설정된 모든 쿠키를 읽을 수 있다. 반환되는 값은 쿠키의 이름과 값 쌍의 세미콜론으로 구분된 문자열이다.

const cookies = document.cookie;
console.log(cookies); 

// 쿠키에 username 과 sessionId 값이 저장되어 있다면 다음과 같이 출력
// "username=JohnDoe; sessionId=abc123"

쿠키의 구성요소

이름(Name)
쿠키의 식별자(Key)이다. 각 쿠키는 고유한 이름을 가져야 하며, 이름은 대소문자를 구분한다. 이름을 통해 서버와 클라이언트는 특정 쿠키를 식별하고 접근할 수 있다.
값(Value)
쿠키에 저장되는 데이터로, 주로 문자열 형태이다.
도메인(Domain)
쿠키가 유효한 도메인을 지정한다. 이 도메인 내의 하위 도메인에서도 쿠키가 유효할 수 있다.
경로(Path)
쿠키가 유효한 URL 경로를 지정한다. 예를 들어, /account로 설정된 쿠키는 example.com/account 경로에서만 유효하다.
만료 시간(Expires) / 유효 기간(Max-Age)
쿠키의 유효 기간을 지정한다. 만료 시간이 지나면 쿠키는 삭제된다. Expires는 특정 날짜와 시간을, Max-Age는 현재 시간으로부터의 초 단위 기간을 의미한다.
보안(Secure)
이 속성이 설정되면 쿠키는 HTTPS 연결에서만 전송된다.
HttpOnly
이 속성이 설정되면 js를 통해 쿠키에 접근할 수 없다. 이는 XSS 공격을 방지하는 데 유용하다.
SameSite
쿠키가 동일한 사이트 요청에서만 전송되도록 설정할 수 있다. Strict, Lax, None 값등이 있으며 CSRF 공격을 방지하는 데 도움을 준다.

이 모든 구성요소를 포함한 예시는 아래와 같다.

let expires = "expires=" + new Date(2024, 11, 31).toUTCString();
document.cookie = "username=JohnDoe; " + expires + "; path=/; domain=example.com; secure; SameSite=Strict";

httpOnly를 무조건 사용하는 것이 좋을까?

HttpOnly 속성은 쿠키를 클라이언트 측의 JavaScript에서 접근하지 못하도록 막아, XSS 공격으로부터 민감한 정보를 보호하는 데 유용하다. 하지만 이 속성을 사용하는 이 적절한지의 여부는 요구사항에 따라 달라진다.

세션 ID와 같은 보안이 중요한 정보를 담은 쿠키에는 HttpOnly를 설정하는 것이 좋다. 그러나 클라이언트에서 쿠키를 읽거나 수정해야 하는 경우(예: 사용자 설정, JWT 토큰값을 가져와서 요청에 사용되어야 하는 경우)에는 HttpOnly 를 설정하지 않아야 한다. 클라이언트의 js에서 쿠키를 읽을 수 없기 때문이다. 따라서 HttpOnly는 보안과 사용 사례에 따라 선택적으로 설정해야 한다.

SameSite 속성의 종류

SameSite 쿠키 속성은 브라우저가 쿠키를 전송할 때, 요청의 출처에 따라 쿠키 전송 여부를 제어하는 속성이다. 이는 주로 CSRF(Cross-Site Request Forgery)와 같은 공격을 방지하기 위해 도입된 기능이다. SameSite에는 세 가지 값이 있다. 아래에서 자세히 살펴보자

Lax (default)
Lax 값은 대부분의 경우 쿠키가 전송되지만, 크로스사이트 요청 중 일부에 대해서는 전송되지 않도록 제한한다. 기본적으로 사용자들이 링크를 클릭하거나, 같은 사이트 내에서 탐색을 하는 경우에는 쿠키가 전송되지만, 다른 웹사이트에서 POST 요청과 같은 “위험한” 크로스사이트 요청이 발생할 때는 쿠키가 전송되지 않는다. 이 설정은 보안과 사용자 경험 사이의 균형을 잘 맞추기 때문에, 기본적으로 많이 사용된다.
- 전송되는 경우: 사용자가 링크를 클릭하여 다른 사이트로 이동하는 GET 요청, 같은 사이트 내에서의 모든 요청.
- 전송되지 않는 경우: 다른 도메인에서의 POST 요청, 이미지 로딩, 프레임 포함 등의 크로스사이트 요청.

Strict
Strict 는 가장 강력한 보안설정으로, 크로스사이트 요청에서는 절대로 쿠키가 전송되지 않도록 설정한다. 이 설정은 오직 동일한 사이트 내에서 발생하는 요청에서만 쿠키가 전송된다.
- 전송되는 경우: 사용자가 사이트 내에서 페이지를 이동할 때(예: example.com에서 example.com의 다른 페이지로 이동).
- 전송되지 않는 경우: 사용자가 외부 링크를 클릭하여 example.com에 접근할 때, 또는 다른 사이트에서 발생한 요청.

None
None 은 쿠키가 크로스사이트 요청에도 항상 전송되도록 설정한다. 즉, 다른 도메인에서 발생하는 모든 요청에 대해 쿠키가 전송된다. 이 설정은 쿠키가 제 3자 사이트에서 사용되어야할 때, 예를 들어 서드파티 로그인이나 광고 추적을 위한 쿠키에 사용된다. 이 설정을 사용할 때는 반드시 Secure 속성과 함께 사용해야 하며, 그렇지 않으면 쿠키가 전송되지 않는다.

Lax와 Strict의 차이점?

Lax는 사용자가 외부 사이트에서 링크를 클릭하여 우리의 사이트에 도착하는 경우는, Get요청이므로 쿠키가 전송된다. 그러나 Post요청이 이미지 로딩, iframe을 통한 요청 등 좀더 위험한 요청의 경우, 크로스사이트 폼 제출 같은 더 민감한 요청에서는 쿠키를 전송하지 않는다. 반면 Strict는 모든 외부사이트에서 우리의 사이트로 들어오는 모든 요청에 대해 쿠키가 전송되지 않는다.