(SEB_FE) Section3 Unit7 Cookie

쿠키의 작동 원리를 이해할 수 있다
회원가입 및 로그인 등의 유저 인증에 대해 설명할 수 있다.
세션의 개념을 이해할 수 있다.
쿠키와 세션은 서로 어떤 관계이며, 각각이 인증에 있어서 어떤 목적으로 존재하는지 이해할 수 있다.
세션의 한계를 이해할 수 있다.

🍎Cookie

쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법
서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.
즉, "서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단"

즉, "쿠키를 이용한다"는 말은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함 한다.

• 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 HTTP 요청 시 쿠키를 함께 전달한다.

• Cookie는 사용자 선호, 테마와 같이 장기간 보존해야 하는 정보 저장에 적합하다

🍎 Cookie의 특징

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

서버는 쿠키를 이용하여 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있지만,
데이터를 저장한 이후에는 데이터를 저장한 이후 특정 조건들이 만족되어야 데이터를 다시 가져올 수 있다.

이런 조건들은 아래 코드처럼 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있다.

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

🍎 쿠키 옵션 종류

🍒 1. Domain

흔히 사용하는 www.google.com과 같은 서버에 접속할 수 있는 이름

쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않는다.
(서브 도메인: www 같은 도메인 앞에 추가로 작성되는 부분)

• 따라서 요청해야 할 URL이 http://www.localhost.com:3000/users/login이라 하면 여기에서 Domain은 localhost.com이다.

만약 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다.
이를 통해 naver.com에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있다!

🍒 2. Path

세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미

만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login인 경우라면 여기에서 Path, 즉, 세부 경로는 /users/login이 된다.

• 이를 명시하지 않으면 기본적으로 /으로 설정되어 있다.

Path 옵션의 특징은,
설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 서버에 전송할 수 있다는 것!

• 즉 Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/codestates인 경우라면 쿠키 전송이 가능하다.

• 하지만 /posts/codestates로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다.

🍒 3. MaxAge or Expires

쿠키가 유효한 기간을 정하는 옵션

만약 쿠키가 영원히 남아있다면 그만큼 탈취되기도 쉬워지기 때문에 이러한 유효기간을 설정하는 것이 보안 측면에서 중요하다.

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

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

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

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

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

🍒 4. Secure

사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션

Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우만 쿠키 전송 가능.

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

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

🍒 5. HttpOnly

자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정.
즉, 클라이언트에서 DOM을 이용해 쿠키에 접근하는 것을 막아주는 옵션이다.

해당 옵션이 true면, 자바스크립트로(document.cookie) 쿠키에 접근이 불가하다.

🍒 6. SameSite

Cross-Site 요청을 받은 경우,

• 요청에서 사용한 메서드(e.g. GET, POST, PUT, PATCH …)
• 해당 옵션의 조합

위 두가지를 기준으로 서버의 쿠키 전송 여부를 결정하게 된다.
(이때, Cross-Origin과 Cross-Site를 혼동하지 않도록 주의)

🌼Cross-Origin

서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 Cross-Origin으로 구분

• http://codestates.com vs https://codestates.com
  ➡ 프로토콜이 다르므로 Cross-Origin

• https://codestates.com:443 vs https://codestates.com
  ➡ https의 기본 포트는 443이다.
  따라서 도메인, 프로토콜, 포트가 모두 같은 Same-Origin

🌼Cross-Site

eTLD+1이 다른 경우 Cross-Site로 구분

What is eTLD+1? : .com, .org과 같이 도메인의 가장 마지막 부분을 TLD(Top Level Domain, 최상위 도메인)라고 하는데, 이 최상위 도메인의 바로 왼쪽의 하위 레벨 도메인을 합한 것.
참고로, 요즘 자주 볼 수 있는 .io의 경우 바로 왼쪽의 주소를 하나 더 합한 것을 TLD라고 판단

• http://codestates.com vs https://codestates.com
  ➡ 모두 TLD는 .com, eTLD+1은 codestates.com으로 같으므로 Same-Site

• https://code.github.io vs https://states.github.io
  ➡ 두 주소 모두 TLD가 github.io로 같지만, eTLD+1은 각각 code.github.io, states.github.io로 다르므로 Cross-Site

🌼SameSite 옵션에서 사용할 수 있는 속성

• Lax: Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키 전송 가능

• Strict: 단어 그대로 가장 엄격한 옵션으로, Cross-Site가 아닌 Same-Site인 경우에만 쿠키 전송 가능

• None: Cross-Site에 대해 가장 관대한 옵션으로 항상 쿠키 전송 가능. 다만 쿠키 옵션 중 Secure 옵션이 필요하다.

서버에서 위와 같은 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다.

이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 된다

🍎쿠키를 이용한 상태 유지

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

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

이런 인증정보를 이용해 공격자가 유저인척 서버에 요청을 보낸다면 서버는 누가 요청을 보낸 건지 의심하지 않고 이를 인증된 유저의 요청으로 취급하게 되고,
이때 개인정보와 같은 민감한 정보를 공격자가 탈취한다면 2차 피해가 일어날 수 있다.