97일차 - Cookie Options

오늘 정리할 주제는 쿠키의 옵션들 이다.

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

인터넷을 사용해보면 쿠키라는 말을 한번 쯤 들어본 적이 있을것이다.
브라우저가 느려졌을때 쿠키를 삭제하라는 말도 들어본 적이 있을 것이다.

HTTP는 위에서 언급한것 처럼 stateless하다.
클라이언트와 서버가 통신을 주고 받아도 서로 연결되어 있는 것이아니라 통신이 독립적이라는 것이다.
그래서 그 전에 처리된 통신에 대해서 알 수가 없다.

그러면 로그인 유지 같은 기능은 어떻게 처리하는 것일까?
바로 쿠키나 세션을 이용한다. (쿠키는 클라이언트에 저장하는 방식, 세션은 서버에 저장하는 방식이다)

우리가 쿠키를 구현하려면 옵션을 통해서 생각한 방향으로 구현을 해야한다.
만약 피씨방에 가서 로그인 유지를 눌렀다가 깜빡하고, 로그아웃을 안눌렀을때, 영원히 그 정보를 기억하고 있으면 다음 사람에게 자신의 정보를 그대로 노출시킬 수도 있다.
사용자의 정보를 쿠키에 담았을때, 모든 Cross-Origin요청에 쿠키를 전송하면 그것 또한 사용자의 정보를 모든 곳에 노출하는 것이다.
위 같은 문제를 해결할 수 있는 것이들 바로 Cookie Options다.

Cookie Options

쿠키 옵션은 6가지로 분류할 수 있고, 분류는 아래와 같다.

1. Expires or Max-Age
2. Domain
3. Path
4. Secure
5. HttpOnly
6. Samesite

• Expires or Max-Age

Expires와 Max-Age는 쿠키의 만료시간과 관련된 설정들이다.
만약 Expires와 Max0Age를 동시에 지정했을때는 Max-Age 값을 더 우선시한다.
Expire는 Date형태로 쿠키의 최대 수명을 기록한다.
예시는 아래와 같다.

Set-Cookie: Expires=Wed, 30 Aug 2021 00:00:00 GMT

Max-Age는 초단위로 기록한다. 0 또는 음수로 지정하면 쿠키는 즉시 만료가 된다.
쿠키의 수명을 한시간으로 지정하고 싶으면 아래와 같이 지정하면 되는 것이다.

Set-Cookie: Max-Age:3600

• Domain

Domain은 서버와 요청받은 도메인이 일치하는 경우 쿠키를 전송하는 옵션이다.
지정하지 않으면 현재 문서의 URI를 기준으로 적용된다.

• Path

쿠키 헤더를 보내기 전에 요청된 리소스에 있어야하는 URL 경로를 나타낸다.
Path를 /로 지정하고 싶으면 아래와 같이 명시하면 된다.

Set-Cookie: Path=/

• Secure

HTTPS 프로토콜에서만 쿠키를 전송할지 설정하는 옵션이다.

• HttpOnly

스크립트의 쿠키 접근 가능 여부를 결정한다.
자바스크립트를 이용해서 쿠키를 훔치는 것을 방지할 수 있다.

• SameSite

SameSite는 3가지로 설정 할수있다.
Lax - GET 메서드 요청에만 쿠키를 전송하게 설정한다.
Strict - 쿠키 전송을 불가하게 설정한다.
None - 모든 메서드 요청에 대해 쿠키 전송이 가능하게 설정한다.

None 설정은 매우 위험할 수가 있어서 Secure요청과 HttpOnly요청을 반드시 사용해야한다.

자료 출처:
MDN - HTTP 쿠키
MDN - Set Cookie

사진 출처:
HTTP Cookie