01. Cookie

---

🔨 1. Cookie 란?

: 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에게 전달하는 작은 데이터

• 즉, 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단으로,
• 해당 도메인에 대해 쿠키가 존재하면 → 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다.
• 사용자 선호, 테마 , 로그인 상태 유지, 장바구니 등 장시간 보존해야 하는 정보 저장에 적합하다.

🍪 Cookie 의 특징

1. 쿠키는 서버에서 클라이언트에 영속성이 있는 데이터를 저장하는 방법이다 → 따라서 서버가 원한다면 서버는 클라이언트의 쿠키를 이용해 데이터를 가져올 수 있다.
2. 쿠키는 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 → 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.

= 즉 서버가 클라이언트에 특정한 데이터를 저장할 수 있다.

• 하지만 데이터를 저장한 이후 아무때나 데이터를 가져올 순 없는데 → 데이터를 저장한 이후 특정 조건들이 만족되어야만 다시 가져올 수 있기 때문이다.
• 특정 조건은 아래와 같이 쿠키 옵션으로 표현할 수 있다.

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

🔨 2. Cookie Options

1. Domain

• 도메인이란 www.google.com과 같이 서버에 접속할 수 있는 이름을 말한다.
• 쿠키 옵션에서의 도메인은 : 서브 도메인 정보, 세부 경로를 포함하지 않는다. → 서브 도메인은 www같은 도메인 앞에 추가로 작성된 부분을 말한다.
• 따라서 요청할 URL이 ttp://www.[localhost.com](http://localhost.com):3000/users/login이라면 → Domain은 localhost.com 이 된다.
• 만약 쿠키 옵션에서 도메인 정보가 존재한다면 → 클라이언트는 쿠키의 도메인 옵션 && 서버의 도메인이 일치해야만 🍪 쿠키를 전송할 수 있다.
  • 이를 통해 naver.com에서 받은 쿠키를 google.com에 전송하는 일을 방지할 수 있다.

2. Path

• Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다.
• ttp://www.[localhost.com](http://localhost.com):3000/users/login이라면 → path(세부 경로)는 /users/login이다.
  • path를 명시하지 않으면 기본설정인 /으로 지정된다.

🍪 Path옵션의 특징

• 설정된 경로(/users)를 포함하는 하위 경로 또는 세부경로(/users/codestates)로 요청을 하더라도 → 쿠키를 서버에 전송할 수 있다.
• 하지만 /**posts/**codestates로 전송되는 요청은 Path옵션(/users)을 만족하지 않기 때문에 → 서버로 쿠키를 전송할 수 없다.

3. MaxAge or Expires

• 쿠키가 유효한 기간을 정하는 옵션으로 → 보안 측면으로 도움이 된다.
• PC방에서 로그인 후 로그아웃을 하지않아도 → 일정 시간이 지나면 자동으로 로그아웃 되는 것과 관련있다.

🍪 `MaxAge`

• 쿠키가 유효한 시간을 초단위로 설정하는 옵션이다.

🍪  `Expires`

• MaxAge 와 비슷하지만 → 언제까지 쿠키가 유효한지 심판의 날을 지정할 수 있다.

• 이때 값은 클라이언트의 시간을 기준으로 하며 → 이후 지정된 시간, 날짜를 초과하면 쿠키는 자동적으로 파과된다.

쿠키는 옵션 여부에 따라 션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나뉜다.

🍪 세션 쿠키

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

🍪 영속성 쿠키

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

4. Secure

• 사용하는 프로토콜에 따른 쿠키 전송여부를 결정하는 옵션이다.
• Secure옵션이 true 로 설정되었다면 → HTTP 를 이용하는 경우에만 쿠키를 전송할 수 있으며,
• Secure옵션이 없다면 → 프로토콜에 상관없이 http:// ~, https:// ~ 모두 쿠키를 전송할 수 있다.

5. HttpOnly

• 자바스크립트에서 브라우저의 쿠키에 접근을 결정한다.
• HttpOnly 옵션을 true로 설정하면 → 자바스크립트로 쿠키에 접근 불가 ❌ (즉 클라이언트가 DOM을 이용해 쿠키에 접근하는걸 막아주는 옵션이다)
• HttpOnly 옵션이 명시되어 있지 않을 경우 false로 지정되고 → <script>document.cookie</script>를 이용해 자바스크립트에서 쿠키 접근이 가능하므로 XSS 공격에 취약하다.
• 따라서 XSS 공격을 받을 수도 있으므로 → 쿠키엔 민감한 정보나 개인 정보는 담지 않는 것이 좋다.

6. Samesite

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

Lax: Cross-Origin 요청이라면 GET메소드에 대해서만 쿠키를 전송할 수 있다. → Cross-Origin 요청(사이트가 달라도 가능) / GET메소드만
Strict: 가장 엄격한 옵션으로, ross-Origin이 아닌 same-site인 경우에만 쿠키를 전송할 수 있다. → same-site인 경우에만(사이트가 다르면 불가)
None: Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있다. 다만 쿠키 옵션 중 Secure옵션이 필요하다
→ 모든 경우 가능(사이트가 달라도) / Secure옵션 필요

⇒ 이때 same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우을 말하며, 이 중 하나라도 다르면 Cross-Origin으로 구분된다.

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

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

🔨 3. 쿠키를 이용한 상태 유지

쿠키의 기본 특성 : 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고 → 클라이언트는 전달받은 쿠키를 서버에 요청과 같이 전송해 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있다.

⚠️ 하지만 기본적으로 쿠키는 오랜시간 유지될 수 있고, httpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.