인증 #1 (쿠키, 세션, 토큰)

오늘은 쿠키에 대해서 알아보겠습니다. 

세션과 토큰은 이후 글에서 뵙겠습니다.

 

 

---

 

쿠키(cookie)란?

먼저, 쿠키의 정의에 대해서 살펴봅시다!

 

MDN

 

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.

 

 

 

Wekipedia

 

쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다.[1] HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 

 

 

JAVASCRIPT.INFO

 

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다.

 

 

 

 

나름대로 정리를 해보면, 쿠키는

1. HTTP의 일부로
2. 서버에 의해 만들어지며,
3. 서버가 브라우저에 전송하는 작은 데이터 조각(문자열)을 사용자가 웹 사이트 방문할 때 자체적인 브라우저에 저장합니다.
4. 저장된 데이터는 동일한 서버에 요청 시, 저장된 데이터(쿠키 내용)와 함께 서버로 보내게 되는데 , 그 이유는
5. 동일한 브라우저에서 들어왔는지 여부를 판단하기 위해서입니다.

 

 

 

 

뭐.. 이런 것들을 하는 것 같습니다..?

 

 

 

쿠키는 언제, 누가, 어떻게 만들었을까요?

쿠키라는 용어는 루 몬툴리가 만들었으며, 유닉스 프로그래머들이 '매직 쿠키'라는 용어에서 착안했다고 한다.

그가 넷스케이프 직원으로 있을 때 전자 상거래 애플리케이션 개발 중에 각 사용자의 컴퓨터 상태를 저장하는 방법을 요청받아 쿠키를 '가상 쇼핑 카트'를 신뢰성 있게 구현할 때 문제에 대한 해결책으로 제공을 하였다고 한다.

 

 

그런데, 왜 쿠키를 사용하는 걸까요?

 

그것은 바로 우리가 http를 이용하고 있기 때문입니다!

 

무슨 말이지?

 

먼저, http는 hyper text transfer protocol의 약자로 hyper text를 주고받기 위한 Protocol(규약 / 규칙)입니다. 

우리는 이 protocol 안에서 정보를 교환할 수 있게 되었습니다.

 

http는 TCP/IP를 이용한 응용 프로토콜로 데이터를 주고받을 수 있게 합니다. 

(TCP/IP를 잘 정리한 글을 소개합니다. 여기 )

 

기본적으로, 정보를 교환하기 위해서는 2명의 주체가 필요합니다. 

예를 들면, 사람이 대화를 하기 위해서 사람이 최소 2명이 있어야 대화가 가능해집니다. 

이렇듯, 정보를 교환하는 주체도 client와 server가 있습니다.

 

보통, client 측에서 서버에게 원하는 정보나 행동을 위해 request(요청)을 합니다. 

request(요청)을 받은 server 측은 해당 요청이 유효하다면, 다시 client 측으로 status code(상태 코드)와 함께 요청한 데이터를 보내줍니다. 이것이 response(응답)입니다.

 

비추어 알 수 있듯이, http를 이용하는 우리 정보를 얻을 수 있습니다. 

그렇지만, 여기서 알아야 http의 특성이 2개가 더 있습니다!

 

http 특성으로 비연결성(connectionless)과 무상태성(stateless)을 지닌다는 내용인데요.

- 비연결성은 http는 연결을 유지하지 않은 채 응답과 요청을 처리하는 특성입니다. 요청에 대한 응답이 끝나면 연결을 끊습니다.

- 무상태성은 비연결성 특성에 의해 현재 통신 상태가 남아있지 않은 것을 의미합니다.

 

 

 

여기서!! 바로!! 쿠키가 등장할 타이밍입니다!!

 

출처: 구글

 

 

 

 

 

쿠키를 이용하게 되면서,  http 통신의 무상태성을 보완해줄 수 있게 되었습니다.

쿠키로 인하여 서버 측에서 클라이언트 측의 값을 저장하고 읽을 수 있게 됩니다.

쿠키는 매우 작은 저장 공간(4KB)을 가지며 일정 기간이 지나면 삭제됩니다. 

 

 

 

쿠키의 동작과정(https://drsggg.tistory.com/388)

 

 

 

쿠키의 라이프 타임

방금 위에서 쿠키는 일정 기간이 지나면 삭제가 된다고 했는데 

이렇듯, 쿠키는 만료 시점 기준으로 2가지 종류로 나눠볼 수 있습니다.

브라우저가 종료 시 삭제되는 session cookies와 지정된 만료일에 삭제되는 persistent cookie가 있습니다.

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

 

 

쿠키는 어떻게 만들어질까요?

주로 웹 서버에 의해 만들어지는데, 서버가 http 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 그리하여, 쿠키가 만들어지게 되며, 쿠키를 생성한 서버(사이트) 접속 시마다, 브라우저(클라이언트)는 쿠키 내용을 Cookie 요청 헤더에 넣어 함께 전달합니다. 

 

 

쿠키는 어디에 쓰일까요?

쿠키는 브라우저와 서버의 통신에서 클라이언트 식별과 같은 인증에 많이 쓰입니다. 

 

쿠키는 주로 세 가지 목적을 위해 사용이 됩니다. 

1. 세션 관리(session) 2. 개인화(personalization) 3. 트래킹(tracking)

 

1. 세션 관리의 예로, 서버에 저장해야 할 로그인, 장바구니, 게임 스코어와 같은 정보가 있습니다.

2. 개인화의 예로, 사용자 선호, 테마 등의 세팅이 있습니다.

3. 트래킹의 예로, 사용자의 행동을 기록/분석하는 용도가 있습니다.

 

 

 

쿠키에게 여러 가지 옵션이 있습니다

 

path, domain, samesite, expire, max-age, secure, httpOnly, 

 

path => cookie 헤더를 전송하기 위한 url 경로입니다.

domain => 쿠키에 접근 가능한 도메인을 지정합니다.

samesite => XSRF 공격을 막기 위해 만들어졌습니다.

expire => 유효 일자, max-age로 만료 기간을 지정할 수 있습니다.

secure => https 통신하는 경우에만 쿠키가 전송됩니다.

httpOnly  => XSS 공격을 방지할 수 있습니다. 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 합니다.

 

자세한 문법이나 내용은 구글링 해보세요!

 

 

 

쿠키의 과거와 현재

과거에는 쿠키를 사용하는 것이 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었다고 합니다. 

하지만, 지금은 modern storage APIS를 사용해 정보를 저장하는 것을 권장합니다.

그 이유는, 매번 요청할 때마다 쿠키와 함께 전송하게 되어 성능이 저하되는 원인이 된다고 합니다. 

 

정보를 클라이언트 측에 저장하려면, Modern APIs의 종류인 웹 스토리지 API(localStorage와 sessionStorage)와  IndexedDB를 사용하면 됩니다!

 

 

 

 

 

 

localStorage

localStorage는 sessionStorage와 마찬가지로 별도의 저장 공간으로 브라우저가 다시 열리거나 닫힐 때에도 유지됩니다.

 

persistent cookies와 비슷하며 세션 스토리지와 마찬가지로 서버에서 접근할 수 없기 때문에, 클라이언트에서 값에 접근하여 서버에 전달해줘야 합니다. (아래 코드 참조)

 

5MB의 상당히 큰 저장공간을 가집니다.

 

 

sessionStorage

sessionStorage는  페이지 기간 유지가 가능하도록 하기 위해 별도로 분리된 저장소지만 페이지 relad와 restore르 포함한 브라우저를 열었을 때에 한하여 유지됩니다. 쿠키와 다르게 서버에서 접근할 수 없기 때문에, 값을 꺼내어 서버에 전달해줘야 합니다.

 

5~10MB의 상당히 큰 저장공간을 가집니다.

 

 

 

IndexedDB API

IndexedDB API는 사용자의 브라우저 안에 데이터를 영구적으로 저장하게 해주는 방법 중 하나입니다

 

files/blobs를 포함한 구조화된 데이터의 상당한 양을 클라이언트 사이드 저장소에 대한 저장하기 위한 저수준 API이며, 높은 성능 검색이 가능하여 데이터를 고성능으로 탐색할 수 있습니다. 

 

 

자세한 문법이나 내용은 구글링 해보세요!

 

 

정리

쿠키는 HTTP 일부로, 브라우저에 접속할 때 서버가 사용자의 브라우저에 식별정보와 상태정보를 저장하여 사용하며, http의 비연결성으로 인한 무상태성을 보완합니다

쿠키 한 개당 4kb이며 클라이언트에 300개까지 저장이 가능합니다. 주로, 장바구니 기능, 자동 로그인 체크, 팝업 표시에 사용됩니다. 단점으로 클라이언트 사이드에 저장되어 사용되어 외부의 공격에 취약하다는 보안적인 이슈가 있습니다.. 

 

 

 

여기까지 쿠키에 대해서 알아보았고, 다음 시간에는 세션과 토큰에대해 알아보겠습니다!

감사합니다! :))

 

 

 

참고한 레퍼런스

JAVASCRIPT.INFO | ko.javascript.info/cookie

MDN | developer.mozilla.org/ko/docs/Web/HTTP/Cookies

MDN | developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

MDN | developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Wikipedia | ko.wikipedia.org/wiki/HTTP_%EC%BF%A0%ED%82%A4#cite_note-1

Javable | woowacourse.github.io/javable/post/2020-08-31-where_to_store_token/

sally's law | bit.ly/3f4PVyx