🍪 쿠키(Cookie)

쿠키란?

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각

• 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장
• 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달
• 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억
• 클라이언트의 브라우저 메모리, 하드디스크에 저장
• encodeURIComponent로 인코딩한 이후의 name=value 쌍을 4KB까지 저장
• 도메인 하나당 20여개 정도 저장 가능(브라우저마다 조금씩 다름)

🥸 사용 목적

1. 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
2. 개인화: 사용자 선호, 테마 등의 세팅
3. 트래킹: 사용자 행동을 기록하고 분석하는 용도

쿠키 읽기 & 쓰기

document.cookie에 직접 값을 쓸 수 있으며 key=value쌍으로 구성되어 있고, 각 쌍은 ;로 구분

path

• path = /home

Cookie 헤더를 전송하기 위하여 요청되는 URL 내에 반드시 존재해야 하는 URL 경로
이 경로의 하위 경로에 있는 페이지만 접근 가능!
(절대 경로로 나타내야 하며, 기본 값은 현재 경로)

path = /home 이라면,
/home과 /home/page1에서는 볼 수 있지만

/homepage /admin에서는 볼 수 없음

domain

• domain = home.com

쿠키에 접근 가능한 도메인을 지정하는 옵션
(기본값은 쿠키를 설정한 도메인에서만 접근 가능)

// home.com에서 서브 도메인(*.home.com)에서는 쿠키 정보를 얻을 수 있음
document.cookie = "user=Jin; domain=home.com"

expires & max-age

• expires=Tue, 19 Jan 2038 03:14:07 GMT
• max-age=3600

expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제
(➡️ 세션 쿠키)
expires 옵션 값을 과거로 지정하면 쿠키는 삭제! max-age는 expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있음

// 1시간 뒤 쿠키 삭제
document.cookie = "user=John; max-age=3600";

// 만료 기간을 0 또는 음수로 지정하여 쿠키 바로 삭제
document.cookie = "user=John; max-age=0";

secure

• secure

HTTPS로 통신하는 경우에만 쿠키가 전송

secure 옵션이 없으면
http://home.com에서 생성(설정)한 쿠키를 https://home.com에서 읽을 수 있고,
https://home.com에서 생성(설정)한 쿠키도 http://home.com에서도 읽을 수 있다.

document.cookie = "user=Jin; secure";

samesite

• samesite

크로스 사이트 요청 위조(CSRF) 공격을 막기 위해 만들어진 옵션

💡 CSRF 공격
신뢰할 수 있는 사용자를 사칭해 웹사이트에 원하지 않는 명령을 보내는 공격

 

samesite 옵션

- `strict`

사이트 외부에서 요청을 보낼 때, 해당 옵션이 적용된 쿠키는 절대로 전송되지 않음

 

 

- `lax`

사용자 경험을 해치지 않으면서 CSRF 공격을 막을 수 있는 느슨한 접근법

`strict`와 마찬가지로 `lax`도 사이트 외부에서 요청을 보낼 때 브라우저가 쿠키를 보내는 걸 막아준다.

하지만 예외사항이 존재!

 

1) 안전한 HTTP 메서드인 경우

GET 방식, POST 방식은 해당하지 않음

 

2) 작업이 최상위 레벨에서 이루어질 때

<iframe>안에서 탐색이 일어나는 경우, AJAX 요청 또한 탐색 행위가 아니므로 이 조건을 충족하지 못함.

 

🚨 `samesite` 옵션으로만 보안 처리를 하게 되면, 구식 브라우저에서는 보안 문제가 발생할 수 있음

(오래된 브라우저, 2017년 이전 버전에선 옵션을 지원하지 않음)

 

httpOnly

클라이언트 측 스크립트가 쿠키를 사용할 수 없게 하는 옵션

httpOnly 옵션이 설정된 쿠키는 document.cookie로 쿠키 정보를 읽을 수 없다.