[NetWork] cookie, session, web storage

cookie, web storage, session

쿠키, 웹스토리지(로컬 스토리지, 세션 스토리지), 세션

쿠키와 웹스토리지가 생긴 이유

HTTP 프로토콜은 무상태(stateless)라는 특성을 가짐
때문에 서버는 클라이언트에서 보내는 요청만으로는 클라이언트가 누구인지 구별할 수 없음
따라서 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요할 때마다 이를 사용해 사용자를 식별하거나 사용자가 이전에 수행한 작업 등을 기억하는 데 사용하기 위해서 생김

무상태
요청과 응답을 주고 받는 사이클이 끝나고 나면 서버와의 연결이 끊어져 상태 정보를 유지하지 않는 특성

Cookie

• 쿠키 하나당 최대 4KB까지 사용가능. 사이트 하나 당 약 20여개를 허용함(브라우저마다 다름).
• 쿠키 생성 단위는 브라우저(브라우저별로 생성된 쿠키는 서로 다르기 때문)
• 문자열만 저장 가능
• 서버가 response header에 set-cookie 에 내용을 넣어 전달하면 브라우저가 자체적으로 브라우저 안에 저장함
• 사용자가 따로 요청하지 않아도 매 요청시 브라우저가 request header에 쿠키를 넣어 자동으로 서버에 쿠키를 전송함
• expires(유효일자)나 max-age(만료 기간) 옵션이 지정되어 있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제됨(세션쿠키)
• expires(유효일자)나 max-age(만료 기간) 옵션이 지정되어있으면 브라우저를 종료해도 쿠키가 삭제되지 않음
• secure : 이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송됨
• samesite : 요청이 외부 사이트에서 일어날 때, 브라우저가 쿠키를 보내지 못하도록 막아줌. csrf 공격을 막는데 유용함
• httpOnly : 이 옵션을 설정한 쿠키는 document.cookie로 쿠키 정보를 읽을 수 없게 됨 -> 크로스사이트 스크립팅(xss) 공격 방지
• 사용목적 : 세션관리(서버에 저장해야할 로그인, 장바구니, 게임 점수 등의 관리), 개인화(사용자 테마, 선호 등), 트래킹
• 사용 예시 : 아이디 저장, 로그인 상태 유지, 일주인간 다시보지 않기창, 최근 검색 상품광고에서 추천, 장바구니

Web Storage(local storage, session storage)

web storage가 생긴 이유

HTML5부터 클라이언트에 데이터를 저장할 수 있게 추가된 저장소
기존에 사용되던 쿠키는 용량제한이 있어 많은 양의 정보를 저장하거나 처리하는데 제한적이었음
또한 쿠키는 서버의 모든 요청에서 HTTP 헤더에 포함되므로 트래픽을 증가시키고 서버의 부담을 줌
이러한 쿠키의 단점을 보완하여 나온 게 웹스토리지임

• Local Storage
  • 브라우저나 os를 종료해도 계속 브라우저에 저장되어 있음
  • 오리진이 같은 경우 로컬스토리지에 저장된 데이터는 모든 탭과 창에서 공유됨
  • 사용 예시 : 지속적으로 필요한 데이터 저장(자동 로그인)
• Session Storage
  • 현재 떠 있는 탭 내에서만 유지됨(각 탭마다 독립적으로 유지됨)
  • 예외 : 한 탭 내에서 여러 개의 iframe을 사용하는 경우
    ex: 한 탭에서 여러 개의 쇼핑 사이트를 iframe으로 열었음 -> 모든 iframe은 동일한 세션 스토리지 공유함 -> 왜냐면 같은 탭내에 있는 iframe들은 동일한 오리진에서 왔다고 보기 때문임
  • 새로고침을 해도 사라지지 않지만 윈도우나 브라우저 탭을 닫을 경우 제거됨
  • 사용 예시 : 일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)

브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요?

탭 이동 시 : 세션스토리지는 동일한 탭 내에서 페이지를 이동하거나 새로고침을 하는 경우에는 그대로 유지됨
탭 종료 시 : 브라우저에서 탭을 종료하는 경우 해당 탭에 연결된 세션스토리지의 데이터는 삭제됨
따라서 세션스토리지에는 일시적인 정보를 저장하는 것이 적합함

Session

사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술

즉, 클라이언트 별로 각각의 상태 정보를 서버에 저장하는 기술임

• 서버에서 클라이언트를 구분하기 위해 각 클라이언트 별로 세션ID를 부여하고, 웹 브라우저가 서버에 접속해 브라우저를 종료할 때까지 세션을 유지함
• 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정가능
• 사용자가 많아질 수록 서버 메모리를 많이 차지하게 됨 -> 서버에 부하가 생길 수 있음
• 쿠키에 비해 보안적인 면에서 좀더 나음(쿠키는 중간에 정보를 탈취할 수 있으므로)
• 브라우저 종료 시 만료기한에 상관없이 종료됨

(클라이언트(브라우저)가 서버에 로그인 요청한다고 가정)
서버는 클라이언트의 요청을 받고 클라이언트의 정보를 담은 세션 생성함
그 후 세션ID를 담은 쿠키 생성 -> HTTP 헤더에 Set-Cookie 옵션을 통해 쿠키를 포함한 응답을 보냄
-> 브라우저는 해당 쿠키를 쿠키에 저장함
(클라이언트가 로그인 후 마이페이지로 이동함)
클라이언트는 쿠키를 꺼내 HTTP 요청에 쿠키를 담아 전송함 -> 서버는 HTTP 요청에 같이 담겨온 쿠키를 읽어 쿠키 안의 세션 ID를 확인해 세션 정보 조회 -> 세션 정보에 있는 사용자 id 등의 식별 정보를 사용해 사용자의 데이터를 데이터베이스에서 조회함 -> 해당 데이터를 클라이언트에게 응답으로 보냄