HTTP Cookie

PeaceSong·2022년 2월 6일
0
post-thumbnail
post-custom-banner

0. Intro

HTTP 쿠키는 굉장히 자주 쓰이는 기술임에도 불구하고 정작 필요할 때에만 뇌내 메모리에 로드하고, 필요없어지면 flush out해버리는 못된 습관을 가지고 있었다. 이번 기회에 아예 그냥 머릿속에 박아두기 위해 포스트로 올려야겠다는 생각을 했다. 만약 또 까먹어버리더라도 여기에 캐시해두면 나중에 몹시 편할 것이기 때문이다 껄껄.

1. 쿠키란?

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The browser may store the cookie and send it back to the same server with later requests. (출처)

이게 중요한데, 쿠키는 어디까지나 stateless한 HTTP 통신을 보조하기 위해 서버가 유저의 브라우저에 갖다 두고, 브라우저가 추후 request를 날릴 때 동봉해서 보내는 데이터이다. 가끔 클라이언트에서 클라이언트쪽에서만 쓰는 데이터를 짱박아두는 용도로도 쓰는 것을 본 적이 있는데 (예를 들어, 팝업의 다시 보지 않기 플래그나 일회성 툴팁의 노출 여부 등) 이런 경우 쿠키보다는 브라우저 내의 localStorage를 쓰는 편이 나을 것이다.

2. 쿠키의 생성과 전송

2.1. 쿠키의 생성

브라우저가 request를 날리면 서버는 response를 준다. 이 때 서버는 생성하고자 하는 쿠키를 response header에 Set-Cookie로 담아서 보낸다.
Set-Cookie의 형식은 아래처럼 key-value 형식으로 되어있다.

Set-Cookie: {cookie-name}={cookie-value}

아래는 실제로 브라우저에서 쿠키를 받아오는 예시이다.

2.2. 쿠키의 전송

브라우저가 서버로 request를 보낼 때 마다, 브라우저는 해당 서버에 맞는 쿠키를 request header에 동봉하여 보낸다.

위에서 받아온 WMONID 쿠키와 JSESSIONID 쿠키를 그대로 딸려보내는 것을 알 수 있다.

3. 쿠키의 수명

서버는 쿠키가 언제 만료되는지를 정의하여 보낼 수 있다. Expires 속성이나 Max-Age 속성을 정의하였다면 Permanent Cookie로 간주되어 Expires 속성에 정의된 날짜가 지나거나, Max-Age 속성에 정의된 시간이 지나면 삭제된다. 만약 두 속성 모두 정의하지 않았다면 Session Cookie로 간주되어, 해당 세션이 끝나면 삭제된다. 이 때 주의해야 할 것은 현재 세션을 정의하는 것은 어디까지나 브라우저이므로, 브라우저가 세션 복원을 하는 등의 행동을 하면 세션 쿠키도 만료되지 않는다.

4. 쿠키의 보안

쿠키는 서버에 의해 생성되지만, 어찌되었든 클라이언트에 저장되는 정보이므로 클라이언트가 열람하거나 수정하는 것도 가능하다. 하지만 사용자의 실수나 악의적인 공격에 의해 쿠키가 수정되는 등의 영 좋지 못한 상황도 발생할 수 있다. 이를 위해 HttpOnly 속성을 명시해주면 브라우저의 Document.Cookies API로 쿠키를 열람하거나 수정하는 것을 막을 수 있다.

아래의 예시를 보면, EnviewLoginID, SITicket, WMONID 쿠키를 제외하고 모두 HttpOnly 쿠키임을 알 수 있다.

여기서 콘솔로 document.cookie를 확인해보면, 과연 이 세 쿠키만 열람할 수 있음을 확인할 수 있다.

또한 Secure 속성이 붙어있으면, HTTP 통신인 경우에는 해당 쿠키를 보내지 않고 HTTPS일 때만 서버에 보내게 된다.

5. Outro

이 외에도 쿠키의 속성들이 여럿 있지만, 내 머리속에 박아둘 내용은 이쯤이면 족할 것 같다. 나머지는 필요할 때마다 검색하고 이 포스트에 캐시해놓으면 되지 않을까? 껄껄껄

마지막으로 세상에서 제일 귀여운 쿠키(현재 이름 쨈, 남성, 땅콩 없음)를 올리고 끝내겠다.

요망한 자식

profile
127.0.0.1
post-custom-banner

0개의 댓글