5.2 Cookie

HTTP 요청은 stateless 하다고 했는데 장바구니는 어떻게 유지되는거지?

: 바로 쿠키 덕분입니다🍪

 

Cookie 란?

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

- 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단

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

 

서버는 쿠키를 통해서 어떤 데이터를 저장하려고 할까요

쿠키의 특성은 삭제하지않으면 남아있다는 속성이 있기때문에 장기간 저장해야하는 옵션데이터를 클라이언트에 저장하기 적합합니다.

e.g. 장바구니, 테마, 로그인 상태 유지

 

쿠키가 클라이언트에 저장되고 자동으로 요청되는 화면

서버가 응답 헤더에 set-Cookie 프로퍼티에 쿠키의 이름, 값, 경로 등의 옵션을 저장합니다.

쿠키가 담긴 응답을 받은 클라이언트는 응답 헤더에 존재하는 set-Cookie를 확인하게 되구요.

다음에 존재하는 매요청시마다 쿠키의 이름과 값을 서버에 전달하게 됩니다.

이런식으로 서버가 쿠키를 저장하면 이후로는 해당 웹사이트를 이용할때 매요청에 자동으로 쿠키가 전송됩니다.

쿠키 내용을 바탕으로 서버는 클라이언트에 저장된 쿠키내용을 통해 로그인 유지, 테마를 보여준다던지 그런현상을 보여줍니다.

쿠키에 다양한 옵션을 설정해줄수있습니다.

 

 

 

 

CSRF :  Cross Site Request Forgery 

사이트 A가 사이트B 에서 사용자가 인증되는 동안 강제적으로 사이트B 에게 원하지않는 포저리된 요청을 하는 경우를 말합니다.

None 옵션은 위험할 수 있기 때문에 HTTPS 프로토콜과 Secure 쿠키 옵션이 필요합니다.

 

서버에서 쿠키가 전송이 되지 않으면서 네트워크 탭에서 set Cookie 옆에 경고 아이콘이 보인다면 SameSite 옵션을 None 으로 설정하는 작업을 통해서 문제해결할 수 있을것이다.

 

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

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)로 나눠집니다.

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

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

4. Secure

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

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

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

5. HttpOnly

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

옵션을 명시하지 않는 경우에는 기본적으로 false로 지정됩니다. 만약 이 옵션이 false인 경우 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로 구분됩니다. 여기서 eTLD+1 이란, .com, .org과 같이 도메인의 가장 마지막 부분을 TLD(Top Level Domain, 최상위 도메인)라고 하는데, 이 최상위 도메인의 바로 왼쪽의 하위 레벨 도메인을 합한 것을 eTLD+1 이라고 합니다. 참고로, 요즘 자주 볼 수 있는 .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차 피해가 일어날 수 있습니다.

참고 자료

MDN - Set-Cookie Attributes

 

💁‍♀️ 쿠키 옵션에 대한 설명이 적절하지 않은 것을 고르세요.

A.domain - 서버와 요청의 도메인이 일치하는 경우 쿠키 전송
B.path - 서버의 요청의 세부 경로가 일치하는 경우 쿠키 전송
C.maxage / expires - 쿠키의 유효기간 설정
D.httpOnly -  HTTP에서만 쿠키 전송 여부 설정
E.secure - HTTPS 에서만 쿠키 전송 여부 설정
F.sameSite - cross-site 요청에 대한 쿠키 전송 여부 설정B.

 

 

🔈 해설

정답 D

 

httpOnly 옵션은 클라이언트에서 DOM을 이용해 쿠키에 접근하는 것을 막아주는 옵션입니다. httpOnly가 true라면 document.cookie를 입력 시 쿠키를 조회할 수 없습니다.

 

---

💁‍♀️ 쿠키의 sameSite 옵션의 설명으로 올바른 것을 모두 고르세요.

 

A.Lax: 사이트가 서로 달라도, GET 요청이라면 쿠키 전송이 가능하다.
B.Strict: 사이트가 서로 다르면, 쿠키 전송을 할 수 없다.
C.None: 사이트가 달라도, 모든(GET, POST, PUT 등등) 요청에 대해 쿠키 전송이 가능하다.C.

 

 

🔈 해설

정답 ABC

 

 

---