본문 바로가기

[Web] 쿠키를 알아보자

 

 

들어가며

언젠가 쿠키는 무엇이고, 쿠키를 활용해서 어떤 것을 할 수 있는지 누군가 물었던 적이 있습니다. 쿠키는 단순하게 브라우저에서 저장하고 싶은 것을 담는 거 아니야?라고 단순하게 생각하고 있었는데, 다른 이에게 쿠키를 설명한다면 어떻게 설명할 수 있을까, 그리고 쿠키를 서버 개발에서 어떻게 활용할 수 있을까 제대로 정리해봐야겠다고 생각했습니다. 더 늦기 전에, 웹의 기초에 대해 쌓고 싶어서 개념을 정리해보고자 합니다. 무지를 반성하는 마음으로 이 글을 적습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

쿠키

쿠키란 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫습니다. 로컬 스토리지와 세션 스토리지가 나오기 이전, 쿠키는 브라우저에 저장소 역할을 했습니다. 쿠키는 만료 기한이 있는 키-값 저장소입니다. 만약 쿠키에 대한 정보를 알고 싶다면 어떻게 해야 할까요?

 

document.cookie; // _ga=GAX.X.XXXXXXXXX; _gid=GAX.X.XXXXXXXXX; _gat=1

 

document.cookie 하면 현재 쿠키 정보가 나옵니다. (httponly 플래그로 자바스크립트에서 쓸 수 없게 막아둔 쿠키는 나오지 않습니다) 이런 특징이 있는 쿠키는 4kb의 용량 제한이 있습니다. (1KB는 1024바이트이며, 한글자당 보통 2Byte니까 512글자 정도 쓸 수 있는 용량)

 

이런 쿠키에는 다음과 같이 4가지 종류가 있습니다.

 

Session Cookie 보통 만료시간(Expire date) 설정하고 메모리에만 저장되며 브라우저 종료시 쿠키를 삭제.
Persistent Cookie 장기간 유지되는 쿠키(예를 들어 Max-Age 1년), 파일로 저장되어 브라우저 종료와 관계없이 사용.
Secure Cookie HTTPS에서만 사용, 쿠키 정보가 암호화 되어 전송.
Third-Party Cookie 방문한 도메인과 다른 도메인의 쿠키 보통 광고 베너 등을 관리할 때 유입 경로를 추적하기 위해 사용.

 

이런 쿠키는 매 서버 요청마다 서버에 같이 전송됩니다. 왜 서버에 쿠키가 전송될까요?

 

 

그것을 알기 위해서는 HTTP 요청에 대해 먼저 간단히 알아야 합니다. HTTP 요청은 Stateless, 즉 무상태성을 띄고 있습니다. 예를 들어서 브라우저에서 서버로 나에 대한 정보를 가져오라는 GET / me라는 요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구에게서 오는지 알 수 없습니다. 그래서 응답을 보낼 수 없습니다. 이때 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어서 내가 누군지 파악할 수 있습니다. 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송되는 겁니다. 

 

하지만 서버에 쿠키가 계속 전송되는 것이 문제가 되기도 합니다. 만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용합니다. 4kb 중에는 서버에 필요하지 않은 데이터들도 있을 것입니다. 그렇게 되면 데이터 낭비가 발생합니다. 이 문제를 해결하기 위해 항상 서버에서 필요하지 않은 데이터를 로컬 스토리지와 세션 스토리지에 저장해서 사용합니다.

 

이런 쿠키는 Set-Cookie를 활용해서 사용하면 됩니다. Set-Cookie는 서버에서 클라이언트한테 쿠키를 저장하라고 명령하는 응답 헤더입니다. 

 

Set-Cookie: hello=const

 

Set-Cookie를 위와 같이 활용한다면, hello라는 키에 값을 const로 해서 보낼 수 있습니다. 이런 쿠키를 사용할 때 활용하면 좋은 옵션들이 있습니다. 

 

- Expires: 쿠키 만료 날짜를 알려줄 수 있습니다.
- Max-Age: 쿠키 수명을 알려줄 수 있습니다. Expires는 무시됩니다.
- Secure: https에서만 쿠키가 전송됩니다.
- HttpOnly: 자바스크립트에서 쿠키에 접근할 수 없습니다. XSS 요청을 막으려면 활성화해두는 것이 좋습니다.
- Domain: 도메인을 적어주면 도메인이 일치하는 요청에서만 쿠키가 전송됩니다. 가끔 도메인이 다른 쿠키들이 있는데, 이런 쿠키들은 써드 파티 쿠키로 여러분을 추적하고 있는 쿠키입니다. 구글이나 페이스북 같은 곳이 써드 파티 쿠키를 적극적으로 사용합니다.
- Path: 패스를 적어주면 이 패스와 일치하는 요청에서만 쿠키가 전송됩니다.

 

예를 들면 다음과 같이 가능합니다.

 

Set-Cookie: const=babo; Expires=Wed, 21 Oct 2011 07:28:00 GMT; Secure; HttpOnly

 

쿠키는 XSS 공격과 CSRF 공격 등에 취약하기 때문에 HttpOnly 옵션을 켜두고 사용하는 것이 좋고, 쿠키를 사용하는 요청은 서버 단에서 검증하는 로직을 꼭 마련해두는 것이 좋습니다. 여기서 XSS과 CSRF에 대해 알고 싶다면 아래를 참고해주세요.

 

 

[보안] XSS 공격이란? (feat node.js)

들어가며 개발을 하다 보면, 보안 공격에 대해 알아야 하는 경우가 종종 있었습니다. 그럴 때마다, 설마 나중에 서비스를 만들 때 보안 공격이 들어올까? 생각했지만, 이런 생각 자체가 위험할

overcome-the-limits.tistory.com

 



이런 쿠키는 사이트 당 20개, 모두 합쳐 300개가 최대이며, 웹 브라우저를 변경할 경우 다른 웹브라우저에서 저장한 쿠키값을 사용할 수 없다는 단점이 있습니다. 그리고 사용자가 보안상의 문제로 거부할 경우 사용이 불가능하다는 단점도 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

공부를 하며 그동안 아주 기초적인 것들을 제대로 공부하지 않았다는 것을 깨닫습니다. 좋은 기술을 배우는 것도 좋지만, 기술의 기반이 되는 기초적인 지식을 먼저 쌓는 것이 중요하다는 것을 다시금 깨달았습니다. 기초가 튼튼한 개발자가 되고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

 

(HTTP) 알아둬야 할 HTTP 쿠키 & 캐시 헤더

안녕하세요. 이번 시간에는 쿠키 & 캐시 전용 헤더만 따로 알아보겠습니다. 웹 자원을 효율적으로 쓰기 위해서는 캐싱이 중요합니다. 똑같은 데이터를 계속해서 내려 받을 필요는 없죠. 쿠키는

www.zerocho.com

 

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키

안녕하세요. 이번 시간에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보겠습니다. 이름만 봐도 각각의 기능이 뭔지 대충 알겠죠? 영어에 약하신 분들을 위해 간단히 설

www.zerocho.com

 

웹 스토리지 (Web Storage)의 특성과 사용법

1. 웹 스토리지와 쿠키 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키

untitledtblog.tistory.com

 

쿠키, 세션, 로컬 스토리지, 세션스토리지, indexedDB, 캐시

쿠키 쿠키란? 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨

tristan91.tistory.com

 

[시큐어코딩] 쿠키 및 세션관리

[시큐어코딩] 쿠키 및 세션관리 1. 쿠키 (Cookie) - Statless 프로토콜인 HTTP 통신 시 서버가 사용자 정보를 유지하기위해 생성해서 응답 헤더에 붙여 클라이언트에게 전송하는 정보 - 쿠키 정보는

coyagi.tistory.com