Cookie] 정의

쿠키는 서버가 어떤 데이터를 브라우저 측에 저장한 후, 다시 그 데이터를 받아오는 기술 혹은 데이터라고 정의합니다.

이를 주고받기 위해서는 Http프로토콜 상 Http 헤더를 통해 송수신하도록 정의되어 있습니다.

사진과 같이 dev-tool에서 쉽게 확인할 수 있습니다.

 

dev tool

 

쿠키는 단순히 name과 value로 이루어진 단순한 문자열입니다.

브라우저는 서버에 request 보내고, 서버는 response를 날려줍니다.

이 response에는 사용자가 요청한 request에 해당하는 데이터들 뿐만 아니라 브라우저에서 저장하고자 하는 쿠키가 들어올 수 있습니다.

 

 

 

 

서버 Set-Cookie

서버에서 쿠키를 만들어 보낼 때 아래와 같이 설정해 주면 됩니다.

Set-Cookie: Name=Value
Set-Cookie: Name=Value

 

서버는 Set-Cookie라는 응답 헤더에 브라우저가 받아야 하는 쿠키정보를 명시해 줍니다.

하나의 Set-Cookie에는 하나의 쿠키만 담을 수 있고, 여러 개의 쿠키를 보낼 수 있습니다.

 

dev-tool Set-Cookie

이렇게 받은 쿠키는 컴퓨터의 하드에 저장하게 됩니다. 

동일한 서버에 요청할 때, 저장해 놓은 쿠키를 Request헤더에 실어서 보내게 됩니다.

 

 

---

 

 

클라이언트 Cookie

브라우저에서는 아래와 같이 정의하여 쿠키를 담아서 보내게 됩니다.

Cookie: Name=Value; Name=Value; ...

 

dev-tool Cookie

이런 형태로 쭉 붙여서 보내게 됩니다.

 

 

---

 

 

요약

예를 들어, 제 블로그에 진입했다고 생각합니다. 

https://wanga-story.tistory.com/  티스토리 서버에서

Set-Cookie: host=wanga 
Set-Cookie: title=Cookie

 

라는 쿠키를 2개 보냈다고 가정합시다.

그러면 사용자는 이제 제 블러그에 머무는 한, 어떤 게시글을 봐도 매번 같은 쿠키를 티스토리 서버에 보내게 됩니다.

Cookie: host=wanga; title=Cookie;

 

그렇게 되면 서버는 이제 쿠키값을 읽어서 원하는 방향으로 사용할 수 있게 됩니다.

 

데이터를 브라우저에 저장해 놨다가 서버에서는 브라우저로부터 요청이 들어올 때,

데이터와 함께 요청을 받아 사용할 수 있게 되는 것입니다.

 

Set-Cookie는 서버가 브라우저로 쿠키를 보내는 것으로 일회성이지만,

Cookie헤더를 통해 서버로 쿠키를 보내는 것은 일정 시간 동안 반복되는 작업입니다.

 

 

728x90

 

 

유효기간

서버에서 처음 쿠키를 만들어서 보낼 때, 유효기간을 설정해서 보낼 수 있습니다.

미설정으로 디폴트는 브라우저의 세션이 종료될 때 함께 사라지게 됩니다.

이를 세션 쿠키라고 합니다.

 

유효기간을 설정한 쿠키를 영속 쿠키라고 합니다.

이는 브라우저 세션등과 무관하게 특정 기간이나 특정 시점까지 쿠키가 유효합니다.

• expires: 만료일이 되면 쿠키 삭제
• max-age: 초단위로 정하며, 0이나 음수로 지정하게 되면 쿠키 삭제

Set-Cookie: Key=Value; Expires=종료시점
Set-Cookie: Key=Value; Max-Age=유효 기간

 

expires

max-age

dev-tool 보면 Set-Cookie 끝에 이렇게 값이 설정돼 있는 걸 볼 수 있습니다.

 

 

---

 

 

적용범위

쿠키는 도메인에 따라 제한되기 때문에, 도메인 진입으로 생성된 쿠키는 계속해서 보내게 됩니다.

하지만 이를 좀 더 세밀하게 하여 원하는 URL에 방문할 때에만 쿠키를 보낼 수 있게 제어할 수 있습니다.

 

• Domain을 명시하게 되면, 도메인 + 서브도메인까지 쿠키의 범위가 확장
• Path를 명시하면 해당 도메인의 특정 경로로 쿠키의 범위를 축소

Set-Cookid: Key=Value; Domain=도메인
Set-Cookid: Key=Value; Path=경로

 

Cookie

사진을 보시면, 마지막에 적혀있습니다.

path=/; 로 설정돼 있는 거 봐서는 해당 도메인 전부 보낼 것으로 보입니다.

domain=google.com; 으로 설정돼있는거 봐서는 google.com의 서브 도메인 전부 쿠키를 공유할 것으로 예상됩니다.

 

 

---

 

 

Cookie 단점

쿠키의 단점에 대해 보겠습니다.

• 유실되기 쉬움
• 변조가 쉬움
• 보안, 해킹에 위험
• 항상 서버에 쿠키를 전송하기 때문에 네트워크 트래픽을 유발

이를 대체하기 위해 Local Storage, Sesstion Storage를 사용함으로써,

굳이 서버에서 읽을 필요가 없는 데이터는 브라우저에 저장하여서 사용하게 됩니다.

 

 

---

 

 

Cookie 보안 개선

단점을 갖고 있음에도 쿠키를 사용해야 된다면 속성 옵션을 사용하면 그나마 괜찮아질 것입니다.

Secure와 HttpOnly 옵션입니다.

Set-Cookid: Key=Value; Secure
Set-Cookid: Key=Value; HttpOnly

 

Secure는 브라우저가 https 프로토콜 상에서만 서버로 쿠키를 보내게 됩니다.

네트워크 상가 탈취되었을 때를 대비하게 됩니다.

 

HttpOnly 이 속성이 명시된 쿠키는 JS에서 document.cookie로 쿠키에 접근할 수 없습니다.

 

 

---

 

 

Cookie에 대한 내용이 많아 사용되는 이유는 다음 게시글에서 설명하겠습니다.