[CS] HTTP vs 쿠키 vs 세션 vs 웹스토리지

Lemon·2023년 5월 22일
CSTIL
1

CS

목록 보기
17/17
post-thumbnail

🍋HTTP 프로토콜

HTTP는 Hypertext Transfer Protocol의 약자이다. 인터넷을 통해 데이터를 전송하는 데 사용되는 프로토콜이다. HTTP는 World Wide Web의 기반이며 클라이언트(웹 브라우저)와 서버(웹 서버) 간의 통신을 가능하게 한다.

특징

  • 비연결성 Connectionless
    • 한 번의 HTTP 통신으로 요청 응답이 오간 이후에 통신을 끊는다.
  • 무상태성 Stateless
    • 통신과 관련된 상태는 남지않는다.

장점

  • 자원 낭비를 줄일 수 있다.

단점

  • 클라이언트를 식별할 수 없다.

사용자가 로그인 요청을 한 뒤 응답을 받았다고 하더라도, 다음 요청에 로그인된 정보는 통신 어디에도 남지 않는다.
그렇기 때문에 서버 입장에서 네트워크 요청이 왔을 때 이 요청이 어떤 사용자의 요청인지 알 수 없다. 심지어 브라우저 새로고침을 누를 때마다 로그인을 해야한다.

이렇게 상태값을 가지지 않는 HTTP 통신 환경의 문제를 세션과 쿠키가 해결할 수 있다.
브라우저에는 다양한 종류의 데이터를 저장할 수 있는 공간을 제공한다. 쿠키, 로컬 스토리지, 세션 스토리지 등이 있다.
세션과 쿠키는 브라우저에서 동작하는 기술이기 때문에 웹 브라우저 환경에서만 사용한다.


🍋쿠키

쿠키(Cookies)란 클라이언트가 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 파일을 말한다.

쿠키는 웹 서버와 통신 과정에서 특정 정보를 저장하기 위한, Key - Value 형태의 유효기간을 가진 데이터이다.

  1. 웹 서버에서는 클라이언트(웹 브라우저)에게 특정 데이터를 남기고 싶을 때 응답 HTTP 헤더에 Set-Cookie: 데이터를 기록한다.
  2. 브라우저는 자동으로 HTTP 헤더의 쿠키 정보를 읽고 웹 서버의 도메인에 매칭해서 저장한다.
  3. 나중에 웹서버에 HTTP 요청을 날리게 되면 자동으로 쿠키를 헤더에 담아서 전송한다.
    크롬 브라우저에서 개발자 도구 - Application 탭을 확인해보면 다음처럼 쿠키의 형태를 확인할 수 있다.

쿠키는 도메인(웹 사이트) 별로 쿠키를 다양하게 둘 수 있다. 우리가 네이버, 쿠팡 등 다양한 도메인의 웹 서비스에서도 인증 정보나 장바구니 상태를 유지할 수 있는 건 도메인별로 쿠키가 유지되기 때문이다.

💡쿠키는 보통 다음처럼 사용된다.

  • 서버 세션 관리 → 인증
  • 트래킹 (행동, 패턴 분석)
  • 사용자 개인화

특징

  • 브라우저에서 저장되는 키와 같이 들어있는 작은 파일이다.
  • 브라우저의 상태 정보를 로컬에 저장했다가 참조한다.
  • 브라우저 탭 간 공유가 가능하다.
  • 브라우저에 300개까지 쿠키 저장이 가능하다.
  • 하나의 도메인당 20개 값만 가질 수 있다.
  • 하나의 쿠키값은 4KB까지 저장 가능하다.
  • Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
  • 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 -Request Header를 넣어서 자동으로 서버에 전송한다.

단점

  • 보안에 취약한다.
    - 요청 시 쿠키의 값을 그대로 보내어 유출 및 조작당할 위험이 존재한다.
  • 용량 제한이 있어 많은 정보를 담을 수 없다.
  • 웹 브라우저마다 쿠키에 대한 지원 형태가 다르기때문에 브라우저 간 공유가 불가능하다.
  • 쿠키의 사이즈가 커질수록 네트워크 부하가 심해진다.

🍋세션

🗣️ 쿠키와 세션의 차이점, 장단점을 비교하는 경우가 있는데, 애초에 스콥이 다르다.
세션은 서버에서 저장하고, 쿠키는 클라이언트가 저장한다. ⇒ 인증 구현할때 이런방식으로 하는 것

세션은 클라이언트와 서버 간의 네트워크 연결에 대한 정보를 담고 있는 객체이다
세션은 서버 쪽에서 관리하는 객체로, 클라이언트와의 연결에 대한 정보(비밀번호 등의 인증 정보)를 담아서 서버 측에 저장하고 관리한다. 이때 세션을 저장하기 위해선 별도의 세션 스토리지를 구현하곤 한다.

💡일반적으로 세션을 사용해서 HTTP 통신을 하는 경우 아래와 같은 흐름을 따른다.
1. 클라이언트가 서버와 연결을 시도하면 서버는 해당 연결에 대한 정보를 세션 저장소에서 찾는다.
2. 세션 저장소에 정보가 존재하지 않는다면 새로운 세션을 만들고 저장한다.
3. 클라이언트에게 생성된 세션 정보를 쿠키 혹은 다른 방식으로 넘긴다. (보통 쿠키에 넘김)
4. 클라이언트는 해당 정보를 (쿠키 등에)저장하고 있다가, 이후 요청에 세션 정보를 포함하여 요청을 보낸다.

👉🏻 좀 더 간단한 보통의 흐름은 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 인증 정보는 서버에 저장하고, 클라이언트 식별자인 JSESSIONIS를 쿠키에 담는다. 이후 클라이언트 요청을 보낼때마다 JSESSIONIS의 유효성을 판별해 클라이언트를 식별한다.

일반적으로 서버에서는 세션을 관리할 때 ID로 관리하고, 접속 시간에 제한을 두곤 한다. 

"session_id": {
    "user_id": "grab",
    "role": "Admin",
    "created_at": "2021-08-11 18:32:01",
    "expire_time": "2021-08-11 19:32:01",
}

세션은 일반적으로 사용자에 대한 식별이 필요할 때 사용한다.
로그인뿐만 아니라 동시 접속 탐지, 접근 기록 수집 같은 다양한 곳에 세션을 활용할 수 있다

특징

  • 사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버측에서 관리한다.
  • 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다.
  • 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능하다.
  • 데이터를 서버에 두기 때문에 쿠키보다 보안이 좋다.
  • 사용자가 많아질수록 서버 메모리를 많이 차지한다.

장점

  • 서버가 클라이언트의 웹 브라우저에 의존하지 않아도 된다.
  • 쿠키를 포함한 요청이 외부에 노출되어도 세션 ID 자체는 유의미한 개인 정보를 담지 않는다.
  • 각 사용자마다 고유한 세션 ID가 발급되기 때문에, 요청이 들어올 때마다 회원 정보를 확인(로그인)할 필요가 없다.

단점

  • 헤커가 세션 ID를 중간에 탈취하여 클라이언트인 척 위장할 수 있다.
  • 서버에서 세션 저장소를 사용하기 때문에, 요청이 많아질 경우 서버에 부하가 생긴다.

🍋 웹스토리지

  • 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있으며, 같은 Storage 객체를 상속하기 때문에 메서드가 동일하다.
  • 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다.
  • 간단한 Key - Value 스토리지 형태이다.
  • 쿠키와 달리 자동 전송의 위험성이 없다.
  • 오리진(Origin)(도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF로 부터 안전하다.
  • 쿠키보다 큰 저장 용량을 지원한다.
    • 모바일 2.5MB, 데스크탑 5~10MB
  • 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.
    • 웹 스토리지 객체 조작은 JavaScript 내에서만 수행한다.
  • 오직 문자형(string) 데이터 타입만 지원한다.

1. 로컬 스토리지

  • 영구성 : 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있다.
    • 단, 동일한 브라우저를 사용할 때만 해당된다.
  • 지속적으로 필요한 데이터를 저장한다.
    • 자동 로그인 등

2. 세션 스토리지

  • 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우에 제거된다.
  • 일시적으로 필요한 데이터를 저장한다.
    • 일회성 로그인 정보, 입력폼 저장 등

🍋세션과 쿠키의 차이

인증에 대한 정보를 어디에 저장하느냐에 있다.
쿠키 : 클라이언트 쪽에 저장 → 인증에 대한 모든 정보가 클라이언트에 저장한 쿠키에 있다.
세션 : 서버쪽에 저장 → 모든 정보가 서버 쪽에서 관리하는 별도의 세션 저장소에 있다.

🗣️ 세션과 쿠키는 서로 대립하는 관계가 아니다.
쿠키는 브라우저에 특정 데이터를 저장하는 방식이지만,
세션은 클라이언트/서버 구조에서 연결 정보(객체)를 저장하는 방식이다.
보통 함께 사용한다.
예를들어 서버쪽에서 세션객체 만들어서 연결에 대한 정보를 담고있으면, 그것을 쿠키형식으로 브라우저에 쏴주면 (set-cookie로 헤더에 넣어주면) 브라우저 쿠키에 저장한다.


🍋정리

  • 쿠키는 브라우저가 사용하는 임시저장소 중 하나로 Key-Value 형태로 데이터를 담는다.
  • 세션은 클라이언트와 서버 간의 네트워크 연결에 대한 정보를 담고있는 객체로, 서버에서 생성하고 관리한다. 쿠키와 마찬가지로 보통 Key-Value 형태로 데이터를 담는다.
  • 이 둘은 대립된 관계라기보단, 모두 활용하여 인증을 구현하게 된다.

🔗참고 링크
https://velog.io/@leemember/프론트엔드-기술-면접-단골-개념들-정리-네트워크-CS-편-그-외-질문
https://velog.io/@whitebear/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0JWT-%ED%99%95%EC%8B%A4%ED%9E%88-%EC%95%8C%EA%B3%A0-%EA%B0%80%EA%B8%B0

profile
Lemon
프론트엔드 개발자 가보자고~!!
이전 포스트

[개발 기본 지식] Node.js란?

0개의 댓글