Cookie 와 Session

내가 만든 쿠키~~~
http header 에 담기지~!

인터넷에서 자주 보이는 쿠키!
쿠키의 개념은 아래와 같습니다.

서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법

서버는 클라이언트의 쿠키를 이용해서 데이터를 가져올 수 있습니다.

쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하는것이 아니라, 서버로 쿠키를 다시 전송하는 과정을 포함합니다.

서버는 쿠키를 이용해서 데이터를 저장할 수 있지만, 저장한 이후에는 아무때나 데이터를 가져올 수 없습니다.
특정조건이 만족되어야 가져올 수 있답니다.

조건의 종류들은 http헤더를 사용해서 쿠키옵션으로 표현해줍니다.

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

---

쿠키옵션종류🍪

1. 도메인

   도메인은 www.naver.com과 같은 서버에 접속할 수 있는 이름 입니다.

   www.naver.com 에서 정확히 도메인은 naver.com이 됩니다.

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

2. Path

   '경로'란 뜻이죠!
   만약 url이 'www.naver.com/users/login'이라면, 세부경로는 /users/login이 됩니다.

   path의 옵션은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있습니다.

3. MaxAge or Expires

   쿠키가 유효한 기간을 정하는 옵션입니다.

   MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션입니다. 마치 쿠키에게 시한부 옵션을 주는 것과 비슷하다고 볼 수 있습니다.

   Expires는 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정할 수 있습니다. 이때 옵션의 값은 클라이언트의 시간을 기준으로 합니다. 이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴됩니다.

   쿠키는 위 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠집니다.

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

   영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키입니다.

4. Secure

   사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션입니다. 만약 Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있습니다.

   Secure 옵션이 없다면 프로토콜에 상관없이 http또는 https에 모두 쿠키를 전송할 수 있습니다.

   단, 도메인이 localhost 인 경우에는 HTTPS가 아니여도 쿠키 전송이 가능합니다. 개발 단계에서는 localhost를 사용하는 경우가 많기 때문에 생긴 예외입니다.

5. HttpOnly

   자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정합니다. 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가합니다.

   옵션을 명시하지 않는 경우에는 기본적으로 false로 지정됩니다. 만약 이 옵션이 false인 경우 document.cookie를 이용해 자바스크립트로 쿠키에 접근할 수 있으므로 쿠키가 탈취될 위험이 있습니다.

6. SameSite

   Cross-Origin 요청을 받은 경우, 요청에서 사용한 메소드(e.g. GET, POST, PUT, PATCH …)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 됩니다. 사용 가능한 옵션은 다음과 같습니다.

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

세션

사용자가 인증에 성공한 상태를 말합니다.

• 서버는 일종의 저장소에 세션을 저장합니다.
• 세션이 만들어지면, 세션을 구분하는 세션아이디 도 만들어지는데, 보통 세션 성공을 증명할 때 이러한 세션아이디를 사용합니다.

그리고!

웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용하게 됩니다.

쿠키를 통해서 유효한 세션 아이디가 서버에 전달되고,
세션 스토어에 해당 세션이 존재한다면,
서버는 해당 요청에 접근이 가능하다고 판단합니다.

하지만 쿠키에 세션 아이디가 없을 때, 서버는 해당 요청이 인증되지 않았음을 알려줍니다.

---

그렇다면 로그아웃은 어떻게 구현할까요?

1. 클라이언트가 쿠키를 갱신하거나 삭제한다.
2. 서버가 세션정보를 삭제한다.

위 두가지가 모두 구현되어야 합니다.

로그아웃 버튼을 눌렀을때, 클라이언트는 쿠키를 갱신하거나 삭제한 후에,
서버에서 세션정보를 삭제하고, 클라이언트는 상태 끌어올리기를 통해서 로그아웃된 화면을 보여줍니다.

클라이언트에서 세션 정보를 없애기 위해서는

1. res.cookie로 쿠키의 값을 무효한 값으로 갱신
2. res.clearCookie로 쿠키를 삭제

하는 방법이 있습니다.