쿠키의 이유

• http는 stateless
  웹사이트는 유저와 항상 연결되어 있지 않다.
  보통 유저가 웹사이트에 방문하여 서버로 요청을 보내면 잠시 웹사이트와 유저가 연결된다. 이때 서버는 요청받은 것을 응답으로 전해주고 연결이 종료된다.

• 하지만, 유저의 정보가 저장되어야 하는 경우가 있다.
  저장을 위해 존재하는 것이 cookie

쿠키

• 서버가 클라이언트에 데이터를 저장할 수 있다. ((Key : Value)작은 데이터 조각)
• 서버는 쿠키를 이용하여 데이터를 저장하고 원할때 이 데이터를 다시 불러올 수 있다.

  • 서버는 인증정보를 담은 쿠키를 클라이언트에게 전달
  • 클라이언트는 전달받은 쿠키를 요청과 같이 서버에 전달
  • 클라이언트와 서버는 연결된다.

• 쿠키는 오래 유지되고, 인증정보를 탈취하면 매우 위험해질 수 있다.
  따라서 민감정보는 넣지 않는다.
• HTTP Reponse Header 에 Set-Cookie 속성을 이용하여 클라이언트에 쿠키를 제공한다.

쿠키의 조건옵션들

• domain scoped
  일반적으로 같은 도메인 내에서만 쿠키를 주고받을 수 있다.
  단, 다른 페이지에서 '페북과 연결된 버튼같은게 존재한다'가능!
  ==> 예를들어, 링크버튼 등을 통해 어떠한 웹에서든 네이버로 요청을 보내면,
  둘은 연결이 되고 서버는 쿠키를 준다.
• sent automatically
  서버는 원하는만큼 쿠키를 보낼 수 있고, 브라우저는 쿠키를 저장해
• set automarically
• 서버 구현할때 예시. (옵션사용방법)

res.cookie('refreshToken',refreshToken,{
      secure: true,
      httpOnly: true,
      sameSite: 'None'
    })

• Domain/ Path / MaxAge or Expires / Secure / HttpOnly / SameSite
• secure :
  true로 설정된 경우, 'HTTPS' 프로토콜을 이용하여 통신할 때만 쿠키 전송가능.
• HttpOnly :
  true로 설정된 경우, 자바스크립트에서는 쿠키에 접근이 불가
  (디폴트값은 false)
• SameSite:

1. Lax :Cross-Origin 요청이면 'GET' 메소드에 대해서만 쿠키를 전송할 수 있습니다.

2. Strict : Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.

3. None: 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.
   이때 'same-site'는 요청을 보낸 Origin과 서버의 도메인이 같은 경우를 말합니다.

쿠키의 사용

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

쿠키 트래킹

이미지 출처: Thoroughly understand session, cookie, token

1.클라이언트가 서버에 요청한다.
2.서버에서 쿠키를 생성하고, 쿠키를 HTTP Header에 실어 보낸다
3. 서버에서 쿠키를 확인하고, 요청 + 쿠키 를 보낸다.
4. 서버에서 쿠키를 확인하고(인증을 확인) ct에 응답을 보낸다.
5. 브라우저가 종료되어도 쿠키가 만료전이라면 ct는 쿠키를 보관한다.

다음이야기 > SESSION