[TIL] 쿠키

 

🤓배움 요약하기

쿠키의 가장 큰 특징이 무엇인가요?
쿠키는 지정한 서버에 대해서는 모든 요청에 쿠키 정보를 자동으로 포함하는 점이 가장 큰 특징이라고 생각합니다. 

 

✔️ 쿠키

• Set-Cookie : 서버에서 클라이언트로 쿠키를 전달 (응답)
• Cookie : 클라이언트가 서버에서 받은 쿠키를 저장하고 HTTP 요청시 서버로 전달한다. 

참고로 HTTP는 무상태(stateless) 프로토콜이라서 클라이언트와 서버는 요청과 응답을 주고 받으면 연결이 끊어져서 서로 상태를 유지하지 않는다는 특징이 있다. 

 

이것을 위한 대안으로 모든 요청에 사용자 정보를 포함해서 보내는 방법이 있다. 

=> 모든 요청에 사용자 정보가 포함되도록 개발해야해서 개발자가 힘들고, 보안에도 문제가 있고 심각한 문제가 있다. 

 

여기서 쿠키를 사용한다면?

 

서버에서 Set-Cookie 헤더에 준 데이터를 쿠키 저장소에 저장을 해둔다. 이 후 그 사이트에 갈때마다 쿠키 값을 꺼내서 Cookie 헤더를 만들어서 서버에 보내준다. 

 

쿠키는 지정한 서버에 대해서는 모든 요청에 쿠키 정보를 자동으로 포함한다. 

 

⭐️모든 곳에 이런 쿠키 정보를 보낸다면 보안상 안좋기 때문에 이를 제약하는 방법이 존재한다!!⭐️

 

---

서버에서 쿠키를 세팅할 때

ex) set-cookie : seesionId=avcde1234; expires=Sat, 14-Jan-2023 ~~; path=/; domain=.google.com;Secure

 

✔️쿠키의 주 사용처

 

1. 사용자 로그인 세션 관리할 때 많이 쓴다. 근데 사용자의 정보를 그대로 클라이언트에게 전달하는게 위험하니까 서버에서 session key라는 것을 만들어서 서버의 데이터 베이스에 저장을 해두고, session id를 클라이언트에 반환을 해준다. 

그리고 클라이언트는 요청할 때 그걸 서버에 요청할 때 보내는거다. 

 

2.  요즘에는 광고 정보를 트래킹할 때도 많이 쓴다. 

 

쿠키 정보는 항상 서버에 전송되서 네트워크 트래픽이 추가 유발된다는 단점이 있다. 그래서 최소한의 정보만 사용해야한다. 예를들면 로그인의 세션 id나 oauth의 인증 토큰! 

 

쿠키처럼 서버에 요청할 때마다 보내는게 아니고 클라이언트에서 보관하고 필요할때만 서버에 전송하고 싶다면 웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지 활용하기!!

 

주의!

쿠키나 웹 스토리지나 보완에 민감한 데이터는 저장하면 안된다!! 

---

✔️쿠키의 생명주기 (Expires, max-age)

Set-Cookie: expires=Sat,14-Jan-2023 ~~ GMT

=> 만료일이 되면 쿠키가 자동으로 삭제된다. 

Set-Cookie: max-age=3600 (3600초) 초 단위로 설정 가능!

=> 0이나 음수를 지정하면 쿠키가 삭제된다. 

 

세션 쿠키 : 만료 날짜를 생략하면 브라우저 종료시까지만 유지된다. 

영속 쿠키 : 만료 날짜를 입력하면 래당 날짜까지 유지된다. 

 

예를 들어서 웹 브라우저를 닫았다가 다시 열면 로그인을 다시 해야한다면 세션 쿠키를 사용한다고 생각하면 된다. 

---

✔️쿠키의 도메인 설정 (domain)

내가 들어간 사이트마다 쿠키가 생성되면 NO!!

 

ex)domain=example.org

▶도메인을 명시하면 => 명시한 문서 기준 도메인과 서브 도메인을 포함해서 모두 전송한다. 

 

domain=example.org를 지정해서 쿠키를 생성하면 example.org는 기본이고 dev.example.org도 쿠키가 전송된다. (쿠키 접근)

▶도메인을 생략하면 => 현재 문서 기준 도메인만 적용된다. 

example.org에서만 쿠키 접근하고 dev.example.org는 쿠키 미접근!

---

✔️쿠키의 경로 설정 (Path)

ex) path=/home

이 경로를 포함한 하위 경로 페이지만 쿠키 접근한다. 

 

일반적으로는 path=/ 루트로 지정한다. (일반적으로 한 도메인 안에서 쿠키를 다 전송하기를 원하니까!)

 

---

✔️쿠키의 보안 (Secure, HttpOnly, SameSite)

▶Secure

쿠키는 http, https를 구분하지 않고 전송하는데, Secure를 적용하면 https인 경우만 전송한다. 

 

▶HttpOnly

XSS 공격을 방지한다. 

HttpOnly 설정을 하면 자바스크립트에서 접근 불가!! (document.cookie)

그리고 HTTP 전송에만 사용할 수 있다. 

 

▶SameSite

XSRF 공격을 방지한다. 

요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키를 전송한다. 

브라우저에서 어느정도까지 지원하는지 확인해보기!

 

---

팀 프로젝트 당시에 쿠키에 JWT 토큰을 담아서 사용하려고 했는데 모든 요청에 쿠키 정보를 자동으로 포함한다는 점에서 쿠키를 사용하지 않고 웹 스토리지를 사용해서 로그인 정보를 클라이언트 단에서 관리했습니다. 

 

이번에 쿠키에 대해서 심도있게 공부해보니, 쿠키의 경로 설정을 통해서 이를 제어할 수 있다는 점을 알게 되었습니다.

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓