쿠키(Cookie)

최종 수정 : 2024-05-01

쿠키

• 서버로부터 리스폰스로 쿠기를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아도 알아서 웹 브라우저가 알아서 저장하고 리퀘스트를 보낼 때도 알아서 보낸다.
• 자바스크립트를 통해 쿠키 값을 추가, 수정, 참조할 수 있다.
• 수명을 지정할 수 있다. 수명이 다한 쿠키는 알아서 삭제된다.

---

사용 방법

서버에서 리스폰스할 때

서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.

Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

• session-id : 쿠키의 key
• 1234 : 값
• domain, path, samesite 등 : Attribute에 해당하는 값. 대소문자를 구분하지 않는다.

 

클라이언트에서 보낼 때

리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.

Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

 

자바스크립트로 사용하기

보통은 서버가 쿠키 값을 만들고, 클라이언트에서는 웹 브라우저에 맡기도 건드리지 않는 것을 권장한다. 하지만 클라이언트에서 자바스크립트로 쿠키를 생성/수정/참조 할 수도 있다.

 

추가, 수정

document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;";

 

값 참조

• document.cookie 값을 참조하면 모든 쿠키의 키와 값이 ; 문자로 구분된 문자열이다.
• split() 함수를 사용하여 직접 분리하거나, 다양한 방법들로 사용할 수 있다.
• cookie 라는 NPM 패키지를 활용할 수도 있다.

 

값 지우기

• Max-Age 값을 0으로 없데이트 하면 지워진다.

document.cookie = "session-id; Max-Age: 0;";

---

Attribute

Domain

브라우저가 쿠키를 보낼 도메인을 지정한다. 예를 들어, Domain=naver.com 이라고 하면 https://naver.com은 물론, https://abc.naver.com, https://xyz.naver.com 같은 서브 도메인에 리퀘스트를 할 때도 쿠키를 보낸다.

 

Path

브라우저가 쿠키를 보낼 경로를 지정한다. 예를 들어, Path=/ 라고 하면 / 아래에 있는 경로들, /abc, /abc/xyz 같은 경로에 리퀘스트를 보낼 때에도 모두 쿠키를 보낸다.

 

HttpOnly

document.cookie 값을 자바스크립트로 사용할 수 있으면, 해커들이 악성 코드를 사용자들에게 유포해 쿠키를 훔칠 수 있다. 그러므로 로그인 정보 같은 민감한 정보는 자바스크립트로 조작하지 않는 것이 좋다. 그렇기에, Httponly를 사용하면 쿠키를 자바스크립트로 사용하지 못하게 막을 수 있다.

 

Secure

Secure를 지정하면 HTTPS 리퀘스트를 보낼 때만 쿠키를 보낸다.

 

SameSite

자바스크립트를 사용하면 현자 사이트에서 다른 사이트로 리퀘스트를 보낼 수 있고, 사이트의 링크를 클릭하면 웹 브라우저는 다른 사이트로 GET 리퀘스트를 보내며 이동한다. 또한, 이미지 파일을 다운 받거나 할 때도 GET 리퀘스트를 보내서 받는다. 이때 발생할 수 있는 문제는 크롯 사이트 요청 위조(CSRF, XSRF - Cross-site request forgery)라고 한다. XSRF를 방지하기 위해서는 제3자 사이트에서 쿠키를 보내지 못하게 SameSite를 지정해야 한다.

속성	Stric	Lax	None
다른 사이트 -> 우리 사이트로 리퀘스트 보낼 때	x	x	o
다른 사이트에서  이미지 파일 등을 받을 때	x	x	o
다른 사이트에서 사용자가 링크를 클릭해 우리 사이트로 이동	x	o	o
우리 사이트에서 우리 사이트로 리퀘스트 보낼 떄	o	o	o

 

Expires와 Max-Age

쿠키의 수명을 지정하는 속성이다.

• 세션 쿠키(Session Cookie)는 Expries나 Max-Age를 지정하지 않으면 만들 수 있다. 세션 쿠키는 브라우저를 닫으면 지워키는 쿠키를 의미한다.
• 영속적인 쿠키(Persistent Cookie)는 Expires나 Max-Age로 수명을 지정해서 만들 수 있다. 수명이 다하면 지워키는 쿠키를 의미한다.

---

공부할 자료

https://www.youtube.com/watch?v=OpoVuwxGRDI

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

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie

https://seob.dev/posts/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4%EC%99%80-SameSite-%EC%86%8D%EC%84%B1/

https://blog.pumpkin-raccoon.com/80

https://owasp.org/www-community/attacks/csrf