쿠키(Cookie)와 세션(Session), 웹 스토리지(Web Storage)는 웹 개발에서 사용되는 데이터 저장 및 상태 유지를 위한 메커니즘이다.

쿠키(Cookie)

쿠키는 웹 서버와 웹 브라우저 간에 상태 정보를 저장하고 교환하기 위한 작은 데이터 조각이다. 주로 사용자 인증, 상태 유지, 개인화 등의 목적으로 활용된다. 쿠키는 클라이언트(브라우저)에 저장되며, 클라이언트가 서버에 요청할 때마다 서버로 함께 전송된다.

쿠키는 웹 애플리케이션에서 클라이언트의 상태를 유지하고, 사용자 경험을 개선하기 위해 필요한 정보를 저장하는 용도로 사용된다. 예를 들어, 로그인 상태를 유지하거나 사용자의 설정 및 선호도를 저장할 수 있다.

쿠키의 동작 원리

1. 웹 서버에서 클라이언트로 쿠키를 생성하여 응답 헤더에 포함시킨다. 이때 쿠키는 키-값 쌍으로 구성된다.

2. 클라이언트는 쿠키를 받아서 브라우저의 쿠키 저장소에 저장한다.

3. 클라이언트가 다음에 해당 웹 서버에 요청을 보낼 때, 저장된 쿠키를 요청 헤더에 포함시켜 서버에 전송한다.

4. 서버는 클라이언트로부터 받은 쿠키를 확인하여 해당하는 상태 정보를 사용한다.

쿠키의 특징

• 클라이언트 측에 저장되기 때문에 브라우저를 종료해도 유지된다.

• 만료 기간을 설정하여 일정 기간 동안 유효하게 할 수 있다. 만료 기간을 설정하지 않으면 세션 쿠키로 취급되어 브라우저 종료 시 삭제된다.

• 도메인과 경로에 바인딩하여 해당 도메인과 경로에서만 사용할 수 있도록 제한할 수 있다.

• 보안 측면에서는 쿠키를 잘못 사용하면 개인 정보 노출과 쿠키 변조 등의 위험성이 있으므로 적절한 보안 조치가 필요하다.

• 브라우저마다 쿠키 저장소의 크기 제한이 있으므로 너무 많은 데이터를 쿠키에 저장하는 것은 지양해야 한다.

쿠키의 종류

• 세션 쿠키(Session Cookie): 세션 쿠키는 웹 브라우저가 종료될 때까지만 유효한 임시 쿠키다. 브라우저를 닫으면 삭제되고 주로 사용자 인증 세션 관리를 위해 사용된다.

• 영속 쿠키(Persistent Cookie): 영속 쿠키는 설정된 만료일까지 유효한 쿠키로, 웹 브라우저가 종료되어도 계속해서 유지된다. 사용자 로그인 정보를 기억하거나, 기본 설정을 저장하는 데 사용된다. 만료일이 설정되어 있지 않은 경우, 브라우저를 종료해도 유지된다.

• 보안 쿠키(Secure Cookie): 보안 쿠키는 암호화된 연결(HTTPS)를 통해서만 전송되는 쿠키다. 주로 사용자 인증과 관련된 정보를 안전하게 전송하고 저장하기 위해 사용된다.

• HTTPOnly 쿠키: HTTPOnly 쿠키는 JavaScript로 접근할 수 없는 쿠키다. 주로 XSS 공격을 방지하기 위해 사용되며, 쿠키의 안전성을 강화한다.

• 써드파티 쿠키(Third-Party Cookie): 써드파티 쿠키는 현재 방문 중인 웹 사이트의 도메인과 다른 도메인에서 설정된 쿠키다. 주로 광고 추적, 분석, 개인화 등을 위해 사용되며, 사용자 동의가 필요하다.

세션(Session)

세션은 클라이언트와 서버 간의 상태 정보를 유지하기 위한 메커니즘이다. 쿠키와 마찬가지로 사용자 인증, 상태 유지, 개인화 목적으로 활용된다. 세션은 서버 측에서 유지되며, 클라이언트는 세션 식별자를 사용하여 서버에 상태 정보를 요청하고 전달한다.

세션은 보통 사용자 인증과 상태 유지에 주로 활용된다. 사용자가 로그인하면 서버에서 해당 사용자 세션을 생성하고, 로그아웃하거나 세션 만료 시에는 세션을 삭제한다. 세션은 서버 측에서 관리되기 때문에 브라우저 종료와 관계없이 유지되며, 서버의 리소스를 활용하여 상태 정보를 보다 안전하게 유지할 수 있다.

세션의 동작 원리

1. 클라이언트가 서버에 요청을 보내면, 서버는 클라이언트에게 고유한 세션 식별자를 부여합니다.

2. 클라이언트는 세션 식별자를 쿠키 형태로 저장하여 다음 요청 시에 서버에 전달한다.

3. 서버는 세션 식별자를 통해 클라이언트를 식별하고 해당 세션에 저장된 상태 정보를 활용한다.

세션의 특징

• 서버 측에 저장되기 때문에 클라이언트가 브라우저를 종료하면 세션 정보는 유지되지 않는다.

• 보안 측면에서는 세션 식별자가 노출되지 않도록 적절한 보안 메커니즘을 사용해야 한다.

• 세션은 일정 시간 동안 유효하며, 클라이언트의 요청이 없는 일정 시간이 경과하면 세션은 만료될 수 있다.

• 세션은 서버 측에서 관리되므로 쿠키보다 더 많은 데이터를 저장할 수 있다.

• 다중 서버 환경에서는 세션을 공유하기 위해 추가적인 구성이 필요할 수 있다.

스토리지(Storage)

스토리지는 클라이언트 측에서 데이터를 임시 또는 영구적으로 저장하기 위한 메커니즘이다. 웹 브라우저에서는 로컬 스토리지와 세션 스토리지라는 두 가지 스토리지 메커니즘을 제공한다.

스토리지는 일반적으로 키-값 쌍의 형태로 데이터를 저장한다. JavaScript의 Storage API를 사용하여 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하고, 필요한 경우 데이터를 조회하고 수정할 수 있다. 스토리지는 클라이언트 측에서 데이터를 유지하고 활용하기 위한 간단하고 편리한 방법을 제공하며, 주로 웹 애플리케이션의 상태 정보나 사용자의 기본 설정과 같은 데이터를 저장하는 데 활용된다.

로컬 스토리지(Local Storage)

• 로컬 스토리지는 클라이언트 측에서 데이터를 영구적으로 저장하는 데 사용된다.

• 저장된 데이터는 브라우저를 종료하고 재시작해도 유지된다.

• JavaScript를 사용하여 로컬 스토리지에 데이터를 저장하고, 필요할 때 데이터를 조회, 수정, 삭제할 수 있다.

• 로컬 스토리지는 도메인별로 별도로 관리되기 때문에 동일한 도메인 내에서는 여러 웹 페이지에서 공유할 수 있다.

세션 스토리지(Session Storage)

• 세션 스토리지는 클라이언트 측에서 데이터를 임시로 저장하는 데 사용된다.

• 저장된 데이터는 브라우저 세션이 유지되는 동안에만 유효하며, 브라우저를 종료하면 데이터가 삭제된다.

• 로컬 스토리지와 마찬가지로 JavaScript를 사용하면 세션 스토리지에 데이터를 저장하고, 필요할 때 데이터를 조회, 수정, 삭제할 수 있다.

• 세션 스토리지는 로컬 스토리지와 마찬가지로 도메인별로 별도로 관리되며, 동일한 도메인 내에서 여러 웹 페이지에서 공유할 수 있다.

참고
[Browser] Cookie 톺아보기
쿠키, 로컬 스토리지, 세션 스토리지