개요

HTTP는 stateless 성격을 가지는 프로토콜로 상태를 유지하지 않는다. 따라서 각 요청-응답은 독립적이다.
이로 인해 서버 확장성이 증가함에 따라 서버 부하는 감소한다.

대부분의 서비스들은 인증을 통해 서비스를 이용할 수 있게하는 기능이 거의 필수적이다.
하지만 HTTP의 성격상 HTTP 통신만을 통해서 특정 사용자를 식별하기 어렵다. 이러한 동작을 가능하게 하기위해선 사용자 식별 정보를 웹 브라우저, 즉 클라이언트단에 데이터를 저장한다. 그리고 서버에게 데이터를 보냄으로서 독립된 HTTP 요청이더라도 동일한 사용자로부터 온 요청임을 판단하게 할 수 있다.

저장하는 방식으로는 Cookie, Local Storage, Session Storage 총 3가지가 있고 각기 다른 특징을 가진다. 때문에 각기 다른 요구사항에 적합한 기술이 있을 것이다. 이를 위해 특징을 알아보도록하자.

Cookie

• 윈도우, 창이 닫혀도 유지된다.
• 만료기간을 설정할 수 있다.
• Cookie가 http 요청 시 자동으로 헤더에 설정되어 전달된다.
• 서버단에서 setCookie 헤더를 통해 유저 브라우저 cookie값을 직접 설정할 수 있다.
  클라이언트단에서도 cookie에 접근해서 수동으로 설정가능하다.
• Secure: HttpOnly
  • 쿠키 설정 시 옵션으로, 스크립트 상에서 cookie를 접근하는 것을 제한한다.
  • 설정되지 않은 Cookie는 XSS에 취약하므로 데이터의 성격을 판단해서 Secure 설정을 고려하도록 해야한다.
• Scope
  • Domain과 Path를 기준으로 쿠키에 대한 접근 범위를에 대해 설정할 수 있다.
  • Domain: 미지정시 동일한 도메인이라면 접근할 수 있다. 지정 시에는 서브 도메인까지도 접근을 가능케한다.
  • Path: 지정한 Path부터 시작해 하위 디렉토리들에서 접근 가능하다.
  • 지정된 scope에서 쿠키에 접근하여 서버에 보내고, 이를 통해 통신하게된다. 외부 scope에서는 접근하지 못한다.
  • 모든 도메인에서 접근가능한 쿠키는 CSRF에 취약하므로 이에 유의해야한다.
    
• 저장공간 4KB
• 세션 관리 개인화 트래킹

Local Storage

• 윈도우, 창이 닫혀도 유지된다.
  • origin (프로토콜+도메인+포트)이 같은 경우 어떤 창이든 탭이든 데이터를 공유한다.
• 만료기간 설정이 불가능하므로 수동적으로 삭제해야한다. (쿠키와의 차이점!)
• 필요한 경우에만 전달가능하다.
• 기본적으로 객체 조작이 스크립트를 통해서 수행된다. (or 개발자도구를 통해 직접 수정할 수 있다)
• 저장공간 5MB

Session Storage

• 현재 탭이 종료되면 사라진다. ( Local storage보다 접근할 수 있는 범위가 더 좁다)
• 새로고침해도 데이터는 유지된다.
• 객체 조작이 스크립트를 통해서 수행된다. (or 개발자도구를 통해 직접 수정할 수 있다)
• 저장공간 5MB

참고

Cookies - MDN Docs
LocalStorage와 Session Storage
사이트간 스크립팅 - 위키백과
사이트 간 요청 위조 - 위키백과