🌱 [Web] cookie & session

🌊 cookie & session

 

cookie

HTTP 프로토콜의 무상태성을 보완해주는 도구. 원래 보안이 목적이 아니지만 요즘은 인증, 보안의 용도로 자주 사용한다. 

쿠키는 서버에서 클라이언트에 전송하는 작은 데이터 조각이다. 쿠키는 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있으며 반대로 클라이언트에서 서버로 쿠키를 다시 전송할 수도 있다.

쿠키를 이용하면 상태가 없는(statelss) HTTP 프로토콜에서 상태 정보를 기억시켜주어 사용자의 로그인 상태를 유지할 수 있다. 

 

팝업창 오늘 하루 보지 않기

로그인 상태

추천광고

 

쿠키의 목적

• 세션 관리 (session management)
  • 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 개인화 (Personalization)
  • 사용자 선호, 테마 등의 셋팅
• 트래킹 (Tracking)
  • 사용자 행동을 기록하고 분석하는 용도

 

영속성이란?
어떤 상태나 성질이 지속되는 것을 의미한다. 영속성 있는 데이터는 시스템이 종료되거나 재시작되더라도 계속해서 보존된다. 

서버는 쿠키를 이용하여 데이터를 저장하고 특정 조건을 만족하면 이 데이터를 다시 불러와 사용할 수 있습니다. 이러한 조건은 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있습니다.

 

'Set-Cookie': [
	'cookie=yummy',
    'Secure=Secure; Secure',
    'HttpOnly=HttpOnly; HttpOnly',
    'Path=Path; Path=/cookie',
    'Domain=Domain; Domain=dreamogu.com'
]

 

쿠키 옵션 종류

1.Domain

도메인은 흔히 서버에 접속할 수 잇는 이름을 말한다. 쿠키 옵션에서의 도메인은 포트 및 서브 도메인, 세부 경로를 포함하지 않습니다. 예를 들어 요청해야할 URL이 dreamogu59.tistory.com/login이면 도메인은 tistory.com이 된다.

쿠키 옵션에 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야 쿠키를 전송할 수 있다.

 

2. Path

Path는 서버가 라우팅할 때 사용하는 세부 경로를 의미한다. Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있다.

 

3. MaxAge or Expires

쿠키의 유효 기간을 정하는 옵션. 쿠키가 영원히 남아있다면 보안에 문제가 생길 수 있으므로 유효기간을 설정한은 것이 보안 측면에서 중요하다.

 

세션 쿠키 : MaxAge, Expires 옵션이 없는 쿠키로 브라우저가 실행 중일 때 사용할 수 있는 임ㅇ시 쿠키. 브라우저를 종료하면 해당 쿠키를 삭제한다.

영속성 쿠키 : 브라우저의 종료 여부와 상관 없이 유효시간만큼 사용 가능한 쿠키

• MaxAge : 쿠키가 유효한 시간을 초 단위로 설정
• Expires : MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 구체적인 날을 지정할 수 있다. 이때 옵션의 값은 클라이언트의 시간을 기준으로 한다. 지정된 시간, 날짜를 초과하면 쿠키는 자동으로 삭제된다. 

4. Secure

사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션. 
Secure 옵션을  true로 설정하여 사용하게 되면 HTTPS에서만 쿠키를 전송할 수 있다. 

단 예외로, 도메인 localhost는 개발 단계에서 자주 사용하므로 HTTPS가 아니어도 쿠키 전송이 가능하다.

 

5. HttpOnly

기본값은 false로, 자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정한다. 해당 옵션이 true일 경우 자바스크립트로 쿠키에 접근 불가. 

옵션을 명시하지 않은 경우엔 document.cookie를 이용해 쿠키가 탈취될 수 있다.

 

6. SameSite

Cross-site 요청을 받은 경우, 요청에서 사용한 메서드(GET, POST, PUT, PATCH ...)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정한다. (Cross-Origin과 Cross-Site는 다른 것)

• Cross-Origin : 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 Cross-Origin으로 구분된다.
• Cross-Site : eTLD+1이 다른 경우 Cross-Site로 구분된다. 
  → eTLD+1이란? .com, .org과 같은 도메인 가장 마지막 부분을 TLD(Top Level Domain, 최상위 도메인)이라 하는데, 이 최상위 도메인의 바로 왼쪽 하위 레벨 도메인을 합친 것을 eTLD+1이라고 한다. .io의 경우 바로 왼쪽의 주소를 하나 더 한 것을 TLD라 판단.
  • http://dreamogu.com와 https://dreamogu.com
    TLD : .com
eTLD+1 :  dreamogu.com
→ 두 주소의 TLD 와 eTLD+1이 같으므로 Same-Site이다.
  • https://ogu.github.io와 https://dream.github.io
    TLD : github.io
eTLD+1 : ogu.github.io, dream.github.io로 다르므로 Cross-Site이다. 
• SameSite 옵션 
  • Lax : Corss-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송
  • Strict : Cross-Site가 아닌 Same-Site인 경우에만 쿠키를 전송
  • None : 항상 쿠키를 내보낼 수 있으나 쿠키 옵션 중 Secure 옵션이 필요하다.

서버에서 이러한 옵션을 지정한 후 서버 → 클라이언트로 쿠키를 처음 전송하게 되면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다. 이후 클라이언트에서 서버로 쿠키를 전송할 때 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 전송한다.

 

 

쿠키를 이용한 상태 유지

이러한 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달 받은 쿠키를 서버에 요청과 함께 전송하여 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있다.

 

단, 쿠키는 오랜 시간 유지할 수 없으며 보안에 취약하므로 민감한 정보를 담는 것은 위험하다. 

 

 

 

session

사용자가 인증에 성공한 상태를 session이라 부르고, 이를 서버에 저장해두고 관리한다. 세션이 만들어지면 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데, 보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달한다.

 

쿠키를 통해 세션 아이디가 서버에 전달되고, 세션 스토어에 해당 세션이 존재한다면 서버는 해당 요청에 접근이 가능하다고 판단한다. 쿠키에 세션 아이디 정보가 없을 경우, 해당 요청은 인증 되지 않았음을 알려준다. 

 

 

 

 

cookie와 session의 장단점

	설명	접속 상태 저장 경로	장점	단점
Cookie	http의 stateless한 것을 보완해주는 도구	클라이언트	서버 부담 ↓	쿠키 그 자체는 인증 ❌
Session	접속 상태를 서버가 가짐(stateful) 접속 상태와 권한 부여를 위해 세션 아이디를 쿠키로 전송	서버	신뢰할 수 있는 유저인지 서버에서 추가 확인 가능	하나의 서버에서만 접속 상태를 가지므로 분산에 불리

 

 

MDN HTTP 쿠키, 코드스테이츠 자료 를 참고하였습니다.