쿠키, 세션, 캐시, 스토리지

😎 쿠키, 세션, 캐시, 스토리지

 

쿠키와 세션을 사용하는 이유와 차이점 요약
HTTP의 connectionless, stateless 프로토콜 로 인해
클라이언트가 서버와 통신을 할 때마다 계속 인증이 필요하기 때문에 사용한다.
쉽게 말해,  쿠키는 클라이언트 / 세션은 서버가 사용자에 대한 인증을 유지하는 것이다.
따라서, Stateful 경우를 대처하기 위해 쿠키와 세션을 사용하고,
쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치이다.
쿠키는 '클라이언트'에 저장하고, 세션은 '서버'에 저장한다.

HTTP 프로토콜의 특징

1. Connectionless 프로토콜 (비연결 지향)

  클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식.

 

2. Stateless 프로토콜

  커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지(저장)하지 않는 특성.

 

 

✅ 쿠키(Cookie)

HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우,

그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.

HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장한 후 필요 시 정보를 참조하거나 재사용할 수 있고,

쿠키는 설정된 만료일에 따라 종료된다.

 

쿠키 특징

1. 이름, 값, 만료일(저장기간), 경로 정보로 구성되어 있다.
2. 클라이언트에 총 300개의 쿠키를 저장할 수 있다.
3. 하나의 도메인 당 20개의 쿠키를 가질 수 있다.
4. 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.

사용 예시

• 팝업창, "오늘 이 창을 다시 보지 않기" 체크 기능

 

쿠키 생명 주기

옵션 max-age와 expires를 통해 만료일을 설정할 수 있다.

• max-age - 유지 시간 설정
  • 사용 예시 : max-age=3600
  • 쿠키 유효 시간을 명시한다. (단위 : 초)
  • 만약 0이나 음수로 지정할 경우 쿠키는 즉시 만료(삭제)된다.
• expires - 만료 시간 설정
  • 사용 예시 : expires=Mon, 3-Apr-2023 12:55:00 GMT
  • 구체적인 만료 날짜를 명시한다.
  • 만료일이 지나면 쿠키는 삭제된다. 

• max-age와 expires 속성 둘 다 지정되었을 경우 max-age가 우선순위를 갖는다.
• 일부 오래된 브라우저(http 1.0만 지원하는)의 경우 max-age를 지원하지 않기 때문에
  하위호환성을 위해 max-age와 expires를 같이 사용한다.
• 세션 쿠키 : 만료 날짜를 생략하면 쿠키는 브라우저 종료 전까지만 유지된다.
• 영속 쿠키 : 만료 날짜를 입력하면 쿠키는 해당 날짜까지 유지된다.

 

 

✅ 세션(Session)

세션은 일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구를 하나의 상태로 보고,

그 상태를 유지시키는 기술이다.

일정 시간은, 사용자가 브라우저를 통해서 웹 서버에 접속한 시점부터

웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다.

즉, 방문자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 이것을 세션이라고 한다.

쿠키와 유사한 방식으로 작동하지만,

쿠키보다 더 많은 데이터를 저장할 수 있고, 브라우저를 닫으면 종료된다.

 

• 세션 특징
  1. 웹 컨테이너에서 생성되어 서버에 정보를 저장한다.
  2. 웹 서버에 저장되는 쿠키라고 볼 수 있다(=세션 쿠키)
  3. 브라우저를 닫거나 서버에서 세션을 삭제했을 때만 삭제가 되므로, 쿠키보다 보안성이 좋다.
  4. 저장 데이터에 제한이 없다. (서버 용량이 허용하는 한)
  5. 각 클라이언트에 고유 Session ID를 부여하고,
     Session ID로 클라이언트를 구분해 각 요구에 맞는 서비스를 제공한다.
• 사용 예시
  • 사이트 내에서 페이지를 이동해도 로그인 유지

 

✅ 쿠키와 세션의 차이

쿠키와 세션은 모두 사용자를 식별하고 추적하는 데 사용된다는 점은 같다.
세션도 결국 쿠키를 사용하기 때문에 쿠키와 세션은 비슷한 역할을 하며, 동작 원리도 비슷하다.

• 큰 차이점은 사용자의 정보가 저장되는 위치이다. 
  쿠키는 클라이언트에서 데이터를 저장하고, 세션은 서버에서 데이터를 저장한다.
• 쿠키는 데이터가 클라이언트에 저장되기 때문에
  변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하다.
• 세션은 쿠키를 이용해서 클라이언트에 session-id만 저장하고,
  이것으로 클라이언트를 구분하여 서버에서 처리하기 때문에 비교적 보안성이 높다.
• 차이점 중 중요한 요소는 라이프 사이클이다.
  쿠키는 파일로 저장되기 때문에 브라우저를 종료해도 정보 유지가 가능하고,
  만료기간을 지정해서 특정 기간까지만 유지할 수도 있다.
• 세션도 만료기간을 정할 수 있지만, 브라우저가 종료되면 만료기간에 상관없이 삭제된다.
• 속도 면에서는 클라이언트에 저장하는 쿠키가 더 우수하다.
  쿠키는 클라이언트에 정보가 있기 때문에 서버에 요청 시 속도가 빠르고
  세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 속도가 느리다.

쿠키와 세션의 차이점 중

저장 위치와 보안성도 중요하지만

가장 중요한 것은 라이프사이클이다.

라이프사이클에 따라서 특정 시점에 사용할 수 있냐 없냐가 달라지기 때문이다.

 

Q. 그렇다면 보안에 취약한 쿠키를 왜 사용할까?

세션이 쿠키에 비해 보안이 우수한 편이지만 쿠키를 사용하는 이유는,
세션은 서버에 저장되는데 서버 자원에는 한계가 있고, 속도가 느려질 수 있기 때문에 
자원관리 차원에서 쿠키와 세션을 적절한 상황 및 기능에 따라 병행 사용하여

서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.

 

 

✅ 캐시

• 캐시는 웹 페이지를 빠르게 렌더링할 수 있도록 도와주는 임시 저장소이다.
• 쿠키/세션이 사용자의 인증을 도와주는 것과 대비되는 저장소이다.
• 캐시는 이미지, 동영상, CSS, Javascript 파일이나 데이터를 미리 복사해 놓은 리소스 파일들의 임시 저장소이다.
• 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.
• 메모리 저장공간은 속도가 빠를수록 용량이 작고, 가격이 비싸다.
• 같은 웹 페이지를 접속할 때 사용자의 PC에서 데이터를 로드하므로
  서버를 거치지 않아도 되기 때문에 렌더링이 빨라진다.

Q. 데이터를 모두 캐시에 저장해서 사용하면 렌더링이 더 빨라지겠지?

캐시는 저장 공간이 크지 않기 때문에 모든 데이터를 담기는 어렵다.

그래서 보통 캐시는 지역성을 나누어 분류한다.

 

시간적 지역성

특정 데이터가 한번 접근되었을 경우 가까운 미래에 또 한번 해당 데이터에 접근할 가능성이 높은 것을 말한다.
즉, 한 번 접근했던 데이터는 재사용할 가능성이 있다는 의미이다.
이 경우 캐시에 저장해놓고 여러 번 사용하게 되면 메모리에 접근하는 횟수가 줄어든다.
따라서 캐시는 반복적으로 사용되는 데이터가 많을수록 높은 효율성을 낼 수 있다.

 

공간적 지역성

특정 데이터와 가까운 주소가 순서대로 접근되었을 경우를 말한다.

CPU 캐시나 디스크 캐시의 경우에는 한 메모리 주소에 접근할 때 그 주소외에도 해당 블록을 전부 캐시에 가져온다.
이 때 메모리 주소를 특정한 순서(오름차순, 내림차순 등)로 접근한다면

캐시에 이미 저장된 같은 블록의 데이터를 접근하게 되므로 캐시의 효율성이 크게 향상된다.
즉, 가져올 블록안에 앞으로 사용할 데이터들이 모여있는 것을 말한다.

필요한 데이터가 모여있다면 한번만 메모리에 접근해도 필요한 데이터들을 가져올 수 있다는 것이다.
만약 데이터가 모여있지 않다면

Cache Miss 확률이 높아지고 메모리에 여러 번 접근하게 되어 효율성이 떨어진다.

 

Cache Hit : 필요한 데이터가 Cache Memory 내에 들어와 있는 경우
Cache Miss : 접근하고자 하는 데이터가 없을 경우

 

캐시의 활용

1. 브라우저 캐시

- 브라우저 또는 HTTP요청을 하는 Client Application에 의해 내부 디스크에 Cache된다.

- Cache된 Resource를 공유하지 않는 한 개인에 한정됨.

- 브라우저의 뒤로가기 버튼이나 이미 방문한 페이지를 재 방문하는 경우 효율성 극대화

 

2. 프록시 캐시

- 브라우저 캐시와 동일한 원리로 동작하며 Client나 Server가 아닌 네트워크 상에서 동작한다.

- 큰 회사나 IPS의 방화벽에 설치되며 대기시간 & 트래픽 감소, 접근정책 & 제한 우회, 사용 로그등 작업

- 한정된 수의 클라이언트을 위해 무한대의 웹서버의 컨텐츠를 캐쉬

  

3. 게이트웨이 캐시 Gateway Caches (REVERSE OR SURROGATE PROXY)

- 서버 앞 단에 설치되어 요청에 대한 캐쉬 및 효율적인 분배를 통해 가용성, 신뢰성, 성능등을 향상시킨다.

- Encryption / SSL acceleration, Load balancing, Serve/cache static content, Compression등을 작업

- 무한대의 클라이언트들에게 한정된 수(또는 하나)의 웹서버 컨텐츠를 제공한다.

 

 

 

✅ 로컬/세션 스토리지  (웹 스토리지)

만약, 쿠키 정보가 많아진다면 HTTP 헤더의 용량은 계속 커지게 된다.

이 문제점을 해결하기 위해 html5에서는 쿠키 대신 storage라는 개념이 등장한다.

• 웹 스토리지는 HTML5를 지원하는 브라우저에서만 사용할 수 있다.
• key와 value를 저장할 수 있다.
• 웹 스토리지는 서버에 전송되지 않고 클라이언트에 저장한다.
• 쿠키의 용량은 4kb인데 비해 웹 스토리지는 하나의 도메인당 5mb를 사용할 수 있다.

	로컬 스토리지	세션 스토리지
데이터 유지	브라우저, 탭 종료해도 데이터 유지	브라우저, 탭 종료 시 데이터 삭제
사용예시	자동 로그인	일회성 로그인
주의사항	비밀번호와 같은 중요 정보는 저장하지 않는다

 

 

❗ 정리

쿠키, 세션, 캐시, 스토리지 모두 특정 상황에 필요에 따라 사용하는 '저장소'의 개념이다.

쿠키는 로컬에 저장하고, 세션은 서버에 저장하며, 라이프사이클의 차이가 중요하고,

쿠키의 용량문제를 해결하기 위해서 html5에서는 storage라는 것이 등장했다.

필요 목적에 따라 데이터 유지의 차이가 있는 로컬 또는 세션 스토리지를 사용할 수 있다.

캐시는 웹페이지를 빠르게 랜더링할 수 있도록 도와주는 리소스 파일들의 임시 저장소이다.

상황에 따라 알맞게 사용하면 된다.

 

 

 

참고

쿠키 : https://ko.javascript.info/cookie

쿠키 세션 : https://dev-coco.tistory.com/61

캐시 : https://developer.mozilla.org/ko/docs/Web/HTTP/Caching

웹 스토리지 : https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API