쿠키 학습하기

무상태성이 특징인 HTTP는 쿠키를 이용하여 사용자 정보를 브라우저에 저장한다. → 사용자의 로그인 정보 저장이 가능해진다.

쿠키란 무엇일까 ?

• 쿠키는 어떤 웹 사이트에 접속했을때, 서버가 → 클라이언트에게 일방적으로 전달하는 작은 데이터를 말한다.
• 클라이언트는 이 데이터를 저장하여 사용자의 상태를 기억한다. 즉 서버가 웹 브라우저에 정보를 저장하고 불러오는 수단이 된다.
• 일단 도메인에 쿠키가 전달되면, 클라이언트는 도메인에게 http 요청 시 쿠키를 함께 전달한다. 서버는 이 쿠키를 이용해 사용자 상태를 다시 읽어온다.

어디에 사용하면 좋을까 ?

쿠키는 삭제하지 않는한 사라지지 않는 특성이 있다. 이 특성을 고려한다면 장기간 보존해야하는 정보를 저장하는데 유용하게 쓰일 수 있다.

• 사용자가 선택한 개인 테마
• 로그인 정보
• 장바구니 정보 등

쿠키 전달 로직

• 서버 → 응답 헤더 : Set-cookie에 담아 보낸다.
• 클라이언트 → 서버 : 다음 매응답부터 자동으로 cookie가 함께 전송된다.
• 단 데이터를 저장한 이후 아무때나 데이터를 가져올 수는 없다. 특정 조건들이 만족되어야 다시 가져올 수 있다.

조건 예시

// 서버 -> 클라이언트로 쿠키를 "처음" 전송할때 헤더에 아래 프로퍼티를 담아 전송한다. 
// 이후 클라이언트 -> 서버 요청 + 쿠키를 함께 전송하여,
// Stateless한 인터넷 연결을 Stateful하게 유지하게 해준다. 
'Set-Cookie':[
            'cookie=yummy', 
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=codestates.com'
        ]

• 도메인 : 클라이언트에서는 쿠키의 도메인 옵션과 서버의 서브 도메인이 일치해야만 쿠키를 전송할 수 있다. (그래서 naver.com 에서 받은 쿠키를 google.com에 전송하지 않는다. )
• Path : 서버가 라우팅할 때 사용하는 세부 경로(+ 그 하위경로)가 일치한다면 전송한다.
• MaxAge or Expires : 쿠키의 유효한 기간을 정한는 옵션으로 클라이언트의 시간을 기준으로 한다.
  • MaxAge : 초 단위
  • Expires : 기한
  • 이를 기준으로 쿠키를 세션 쿠키 영속성 쿠키 로 나눌 수 있다.
    • 세션 쿠키 : 브라우저가 실행 중일때 사용하는 임시쿠키. MaxAge, Expires 옵션이 없는 쿠키다.
    • 영속성 쿠키 : 브라우저의 종료 여부와 상관 없이 MaxAge, Expires에서 지정한 유효시간만큼 사용 가능한 쿠키.
• Secure : true → HTTPS를 이용하는 경우에만 쿠키 전송이 가능하다. (단, 도메인이 localhost인 경우에는 HTTPS가 아니여도 쿠키 전송이 가능하다. 개발 단계에서는 localhost를 사용하는 경우가 많기 때문에 생긴 예외이다.)
• HttpOnly : true → true로 설정하면 javascript로 쿠키 접근이 불가능하다. 기본은 false라서 document.cookie를 이용하면 접근가능하여 탈취의 위험이 있다.

• SameSite : Cross-Origin 요청을 받은 경우 요청 옵션을 기준으로 쿠키 전송 여부 결정
  • Lax : Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있습니다.
  • Strict : 단어 그대로 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.
    • same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우이다.
  • None : Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.