Cookies And Sessions

들어가며

웹 개발에서 상태를 유지하는 것은 인터렉티브 하고 사용자 친화적인 애플리케이션을 만드는 데 매우 중요하다. 상태관리는 웹 애플리케이션이 서로 다른 페이지나 유저 인터렉션 사이에서도 정보를 기억하는 능력을 말한다. 이 목적에 맞는 두 개의 기본 기술이 쿠키와 세션이다. 웹 개발자는 이 기술들이 어떻게 구현되어 있고 관리되는지 이해하고 있어야 한다. 이 포스팅은 쿠키와 세션의 차이점, 동작방식, best practice를 설명한다.

쿠키란 무엇인가?

쿠키는 웹서버에 의해 브라우저에 저장되는 작은 데이터 조각이다. 쿠키는 유저의 로그인 정보다 설정값등을 기억하고 있다. 이러한 정보들을 통해 유저는 웹 애플리케이션을 이용하며 개인화된 경험을 할 수 있다.

쿠키의 목적

• 유저의 세션 추적
• 유저의 설정정보 저장
• 개인화된 유저 경험
• 로그인 상태 유지

쿠키는 어떻게 동작하는가?

유저가 웹사이트에 방문하면 서버는 유저의 브라우저에 쿠키를 보낼수 있다. 이때 ‘Set-Cookie’라는 HTTP 헤더를 이용한다. 그러면 브라우저는 이 쿠키를 저장하고 이후 동일한 도메인으로 요청할 때마다 서버로 다시 보낸다.

쿠키의 타입

1. Session Cookies(세션 쿠키): 사용자가 브라우저를 닫으면 삭제되는 임시쿠키이다. 일반적으로 세션 정보를 저장하는 데 사용된다.
2. Persistence Cookies(영구 쿠키): 영구 쿠키는 만료날짜가 존재하며, 수동으로 삭제될 때까지 사용자의 기기에 남아있다. 로그인 정보, 사용자 기본 설정 등을 기억하는 데 사용된다.

쿠키의 보안 특성

1. Secure: HTTPS 연결을 통해서만 쿠키가 전송되도록 강제한다.
2. HttpOnly: 자바스크립트를 통해서는 액세스할 수 없게 하여 크로스 사이트 스크립팅 공격으로부터 보호한다.
3. SameSite: 사이트 간 요청 위조(CSRF) 공격을 방지하는데 도움이 된다.

쿠키 설정 및 검색

쿠키는 JavaScript를 사용하거나 HTTP 헤더를 이용해서 저장되고 추출될 수 있다. 아래는 예제 코드이다.

// 쿠키 세팅
document.cookie = "username=gildong; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 추출
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};
console.log(getCookie('username'));

세션이란 무엇인가?

세션은 사용자와 웹사이트의 상호 작용에 대한 정보를 보관하는 서버 측 저장소이다. 클라이언트 디바이스에 저장되는 쿠키와 달리 세션 데이터는 서버에 저장된다. 각 사용자에게 고유한 세션 식별자(세션 ID)가 할당되며, 일반적으로 사용자 브라우저의 쿠키에 저장된다.

세션의 목적

• 여러 페이지에서의 유저 상태 유지
• 민감한 정보를 서버에 안전하게 저장
• 단일 세션 내에서 유저 활동 추적

세션은 어떻게 동작하는가?

사용자가 웹사이트를 방문하여 세션을 시작하면 서버는 고유한 세션 ID를 생성하고 세션 데이터를 서버에 저장한다. 이 세션 ID는 클라이언트의 브라우저로 전송되며 쿠키에 저장되는 경우가 많다. 이후 요청이 있을 때마다 브라우저는 이 세션 ID를 서버로 전송하고, 서버는 해당 세션 데이터를 검색한다.

예시:

@RestController
@RequestMapping("/session")
class SessionController {

    @GetMapping("/set")
    fun setSession(request: HttpServletRequest): String {
        val session = request.getSession(true)
        session.setAttribute("username", "gildong")
        return "Session data set!"
    }

    @GetMapping("/get")
    fun getSession(request: HttpServletRequest): String {
        val session = request.getSession(false)
        return if (session != null) {
            val username = session.getAttribute("username") as String?
            "Logged in as $username"
        } else {
            "No session found"
        }
    }
}

Set session: http://localhost:8080/session/set

Get session: http://localhost:8080/session/get

Cookies vs Sessions

주요 차이점

• 저장위치: 쿠키는 클라이언트 측에 저장되는 반면 세션은 서버 측에 저장된다.
• 보안: 세션은 일반적으로 클라이언트 측에 민감한 데이터를 노출하지 않으므로 더 안전하다.

쿠키 사용 사례

• 사용자 기본 설정 기억
• 분석을 위한 사용자 행동 추적
• 민감하지 않고 빠른 접근이 필요한 데이터의 저장

세션 사용 사례

• 사용자 인증, 인가 관리
• 민감한 데이터 저장
• 여러 페이지에서의 사용자 상태 유지

모범 사례

• 쿠키와 세션 데이터를 보호하기 위해 HTTPS를 사용한다.
• 적절한 쿠키 속성을 사용한다.
• 민감한 데이터는 짧은 만료 시간을 사용한다.

결론

쿠키와 세션은 웹 개발에서 사용자 상태와 데이터를 관리하기 위한 필수 도구다. 쿠키는 클라이언트 측에 정보를 저장하는 방법을 제공하는데 반면 세션은 보다 안전한 서버측 솔루션을 제공한다. 안전하고 효율적인 웹 애플리케이션 개발을 위해 이 둘의 차이점을 잘 알고 있어야겠다.