웹 사이트에 로그인한다고 했을때, 로그인을 성공적으로 하고 나면 서버는 클라이언트에 일종의 인증서 같은 것을 보내준다. 클라이언트가 인증서를 가지고 오면 어떤 사람인지 구분하는데 사용된다. 클라이언트는 리뭬스트를 보낼 때마다 인증서를 리퀘스트와 함께 포함해서 보내야 하는데 이럴 때 사용하는 것이 쿠키이다.
로그인에 성공했을 때 서버가 Set-Cookie 헤더로 쿠키 값을 보내주면 이걸 클라이언트가 저장해 두었다가, 서버에 리퀘스트를 보낼 때마다 매번 Cookie 헤더로 보내서 로그인 된 상태라는 걸 표시한다.
웹 브라우저를 껐다 키거나 컴퓨터를 껐다 키더라도 쿠키 값은 유지되기 때문에 평소에 우리가 사이트를 한 번 로그인하면, 일정 기간 동안은 로그인하지 않아도 로그인이 유지되는 것이다.
특징
- 서버로부터 리스폰스로 쿠키를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아도 알아서 웹 브라우저가 알아서 저장하고, 리퀘스트를 보낼 때도 웹 브라우저가 알아서 보낸다.
- 자바스크립트를 통해서 쿠키 값을 추가, 수정, 참조할 수 있다.
- 수명을 지정할 수 있다. 수명이 다한 쿠키는 알아서 지워진다.
사용법
서버에서 리스폰스할 때
서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해둔다.
Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;여기서 맨 앞의 session-id 는 쿠키의 Key에 해당하는 값이고, 1234 는 Value에 해당하는 값이다. domain, path, samesite 등은 쿠키의 Attribute에 해당하는 값이다.(참고로 위에 적혀있는 헤더 이름이나 Attribute 이름들은 대소문자를 구분하지 않기 때문에 set-cookie, domain, path, samesite 로 쓸 수도 있다.)
클라이언트에서 보낼 때
리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.
Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;자바스크립트로 사용하기
보통은 서버가 쿠키 값을 만들고, 클라이언트에서는 웹 브라우저에 맡기고 건드리지 않는 것이 권장된다. 하지만 클라이언트에서 자바스크립트로 쿠키를 생성/수정/참조 할 수도 있다.
추가, 수정하기
변수 할당처럼 보이지만 이 코드는 새로운 쿠키를 추가하거나 (기존에 session-id 라는 쿠키가 있다면) 수정하는 코드이다.
document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;";값 참조하기
- document.cookie 값을 참조하면 모든 쿠키의 키와 값이 ; 문자로 구분된 문자열이다.
- split() 함수를 사용해서 직접 분리해서 사용하거나, 다양한 방법들이 알려져 있다.
- cookie 라는 NPM 패키지를 활용할 수도 있다.
값 지우기
Max-Age 값을 0으로 업데이트하면 (수명이 0) 지워진다.
document.cookie = "session-id; Max-Age: 0;";알아두면 좋은 Attribute
Domain
브라우저가 쿠키를 보낼 도메인을 지정한다. 예를 들어서 Domain=codeit.kr 이라고 하면 https://codeit.kr 은 물론이고 https://abc.codeit.kr, https://xyz.abc.codeit.kr 같은 서브 도메인에 리퀘스트를 할 때도 쿠키를 보낸다.
Path
브라우저가 쿠키를 보낼 경로를 지정한다. 예를 들어서 Path=/ 라고 하면 / 아래에 있는 경로들, /abc, /abc/xyz 같은 경로에 리퀘스트를 보낼 때에도 모두 쿠키를 보낸다.
HttpOnly ⭐️
document.cookie 값을 자바스크립트로 사용할 수 있으면, 해커들이 악성 코드를 사용자들에게 유포해 쿠키를 훔칠 수 있다.
로그인 정보 같은 민감한 정보는 되도록이면 자바스크립트로 조작하지 말아야 한다. HttpOnly 를 사용하면 쿠키를 자바스크립트로 사용하지 못하게 막을 수 있다.
Secure ⭐️
Secure 를 지정하면 HTTPS 리퀘스트를 보낼 때만 쿠키를 보낸다. 참고로 SameSite=None 을 지정하면 반드시 Secure 도 함께 지정해야 한다.
SameSite ⭐️
자바스크립트를 사용하면 현재 사이트에서 다른 사이트로 리퀘스트를 보낼 수 있고, 사이트의 링크를 클릭하면 웹 브라우저는 다른 사이트로 GET 리퀘스트를 보내며 이동한다. 그리고 이미지 파일을 다운 받거나 할 때도 GET 리퀘스트를 보내서 받는다.
예를 들어서 codeit.kr 이라는 사이트에서 쿠키를 발급해서 사용자가 저장하고 있는데, 사용자가 hacker-site.com 이라는 악성 사이트에 접속한다고 합시다. 이 악성 사이트는 codeit.kr 이라는 사이트로 리퀘스트를 보내서 개인정보를 탈취하는 사이트입니다. 악성 사이트에서 코드잇으로 리퀘스트를 보낼 때 쿠키가 함께 간다면 꼼짝없이 당하고 말겁니다.
이런 공격을 크로스 사이트 요청 위조 (Cross-site request forgery, CSRF, XSRF)라고 한다. XSRF를 방지하기 위해서 제3자 사이트(Third-party site)에서 쿠키를 보내지 못하게 SameSite 를 지정해야 한다.
SameSite 속성의 값에는 Strict, Lax (아무것도 지정하지 않았을 때 기본값), None이 있다. 다음은 SameSite 값에 따른 쿠키 전송 유무를 간략히 정리한 표이다:
| SameSite=Strict | SameSite=Lax | SameSite=None | |
|---|---|---|---|
| 다른 사이트에서 우리 사이트로 리퀘스트를 보낼 때 | X | X | O |
| 다른 사이트에서 이미지 파일 등을 받을 때 | X | X | O |
| 다른 사이트에서 사용자가 링크를 클릭해 우리 사이트로 이동할 때 | X | O | O |
| 우리 사이트에서 우리 사이트로 리퀘스트를 보낼 때 | O | O | O |
Expires 와 Max-Age ⭐️
쿠키의 수명을 지정하는 속성이다. Expires로 만료될 시기를 지정하거나, Max-Age 로 쿠키의 수명을 지정할 수 있다.
세션 쿠키(Session Cookie)는 Expires 나 Max-Age 를 지정하지 않으면 만들 수 있다. 세션 쿠키는 브라우저를 닫으면 지워지는 쿠키이다.
영속적인 쿠키(Persistent Cookie)는 Expries 나 Max-Age 로 수명을 지정해서 만들 수 있고, 수명이 다하면 지워지는 쿠키이다.
활용 사례
-
로그인
(세션 기반 인증의 경우) 처음에 세션 ID를 쿠키로 보내주고 로그인에 성공하면 서버 쪽에서 세션 상태를 업데이트 한다.
(토큰 기반 인증의 경우) 로그인에 성공하면 서버가 토큰을 발급해 쿠키로 보내 준다. -
하루동안 다시 보지 않기
클라이언트가 수명이 1일인 쿠키를 만든다. -
장바구니
(세션 기반 인증을 사용하는 경우) 처음 세션 ID를 쿠키로 보내주고 이 세션 ID를 기반으로 서버에서 장바구니 정보를 저장한다.
