쿠키(Cookie)의 개념과 작동원리

 

 

Naver 등 특정사이트에 로그인하는 것은 본질적으로 “나는 해당 사이트에게 내 정보를 줄 수 있을 정도로 믿고 있다.”와 같다.

• 내 아이디, 비밀번호뿐만 아니라 심지어는 나의 주소, 카드번호, 계좌의 비밀번호 등을 알려주기도 한다.

 

사용자는 어떻게 이런 특정 웹사이트들을 신뢰할 수 있을까?
아니, 웹사이트들은 사용자에게 신뢰를 주기 위해 어떻게 정보를 안전하게 보호하고 있을까?

 

Cookie의 개념

 

쿠키가 쓰이는 상황

1. 의류 쇼핑몰 사이트에서 다양한 상품들을 장바구니에 넣을 때
   • HTTP 요청은 stateless한데, 어떻게 다른 페이지를 탐색하고 돌아와도 장바구니가 유지가 되는 것이지?
   • 즉, 어떻게 유저의 정보가 유지가 되는 것이지?
2. 어떤 사이트를 들어갔을 때마다 뜨는 팝업에 '오늘 보지 않기'를 체크했을 때
3. 어떤 사이트에 로그인을 하면서 '로그인 상태 유지'를 체크했을 때
4. 내가 검색한 상품과 관련된 광고가 다른 사이트에 방문했을 때도 광고 배너에 뜰 때
5. 어떤 사이트를 처음 방문했을 때, "고객님의 쿠키정보를 저장하려고 하는데 허락하시겠습니까?" 등의 필수 팝업이 뜨며 회사가 필요한 마켓팅 정보를 쿠키에 저장하기도 한다.

 

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

• 즉, 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단이다.
• 쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장한다.
  • 영속성(persistence)은 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 의미한다.
  • 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.
  • 해당 도메인에 대해 쿠키가 존재하면 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다.

 

프로그램 수신 후 변경하지 않은 채로 반환하는 데이터의 패킷을 의미하는 매직 쿠키라는 용어에서 비롯됐다고 한다.

• 쿠키는 삭제하지 않으면 사라지지 않는다.
• 그렇기 때문에 사용자 선호, 테마 등 장시간 보존해야 하는 정보 저장에 적합하다.

 

크롬 설정탭 '쿠키' -> 어디서 어떻게 내 컴퓨터에 정보를 주고 있는지 브라우저 설정을 통해 확인도 가능하다.

• 쿠키는 브라우저 설정창에 가면 금방 노출이 되는 것을 확인할 수 있다.
  • 보안상 위험 변조도 쉽다
  • 따라서 암호화한 내용으로 채워져 있다.  

 

쿠키의 작동원리

 

서버가 쿠키를 저장하게 되면, 매 요청시마다 쿠키의 이름과 값을 서버에 전달하게 된다. 

• 그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고
• 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.

 

 

쿠키의 특징

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

 

앞서 언급한 것처럼 서버는 쿠키를 이용하여 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있다.

• 하지만 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없다.
• 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문이다.
• 이런 조건들은 아래 코드처럼 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/user123인 경우라면 쿠키 전송이 가능하다.
• 하지만 /posts/user123로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다.

3. MaxAge or Expires

: 쿠키의 유효기간 설정

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

• 만약 쿠키가 영원히 남아있다면 그만큼 탈취되기도 쉬워지기 때문에 이러한 유효기간을 설정하는 것이 보안 측면에서 중요하다.
  • 예) PC방에 가서 로그아웃을 안 한 경우 서버에서 쿠키에 MaxAge 또는 Expires 옵션을 통해 유효 기간을 지정한다면 일정 시간 후 자동 소멸될 수 있다.
• MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션이다. (마치 쿠키에게 시한부 옵션을 주는 것과 비슷)
• Expires는 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정할 수 있다.
  • 이때 옵션의 값은 클라이언트의 시간을 기준으로 한다.
  • 이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴된다.

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

• 세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키 
  • 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키이다.
  • 브라우저를 종료하면 해당 쿠키는 삭제된다.
  • 클라이언트가 종료되면 세션이 종료되고 그 후 세션 쿠키가 제거한다.
  • 하지만 많은 웹 브라우저에는 모든 탭을 저장하고 다음에 브라우저를 사용할 때 복원하는 세션 복원 기능이 있다. : MDN - Set-Cookie Attributes
• 영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키 

4. Secure

: HTTPS 프로토콜에서만 쿠키 전송 여부 설정

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

• 만약 Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.
• Secure 옵션이 없다면 프로토콜에 상관없이 http://www.google.com 또는 https://www.google.com에 모두 쿠키를 전송할 수 있다.
• 단, 도메인이 localhost인 경우에는 HTTPS가 아니어도 쿠키 전송이 가능하다.
  • 개발 단계에서는 localhost를 사용하는 경우가 많기 때문에 생긴 예외이다.

5. HttpOnly

: 스크립트의 쿠키 접근 가능 여부 설정

클라이언트에서 DOM을 이용해 쿠키에 접근하는 것을 막아주는 옵션이다.

• 자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정한다.
• 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 document.cookie를 입력시 쿠키를 조회할 수 없다.
  • 브라우저만 쿠키에 접근이 가능하다.

 

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

6. SameSite

: CORS 요청의 경우 메서드 및 옵션에 따라 쿠키 전송 여부 설정

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

 

---

* Cross-Origin과 Cross-Site를 혼동하지 않도록 주의 

• Cross-Origin : 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 Cross-Origin으로 구분된다.
  • http://google.com vs https://google.com
    ⇒ 프로토콜이 다르므로 Cross-Origin 
  • https://google.com:443 vs https://google.com
    ⇒  https의 기본 포트는 443이다. 따라서 도메인, 프로토콜, 포트가 모두 같은 Same-Origin 
• Cross-Site : eTLD+1이 다른 경우 Cross-Site로 구분된다. 여기서 eTLD+1 이란, .com, .org과 같이 도메인의 가장 마지막 부분을 TLD(Top Level Domain, 최상위 도메인)라고 하는데, 이 최상위 도메인의 바로 왼쪽의 하위 레벨 도메인을 합한 것을 eTLD+1 이라고 한다. 참고로, 요즘 자주 볼 수 있는 .io의 경우 바로 왼쪽의 주소를 하나 더 합한 것을 TLD라고 판단한다.
  • http://google.com vs https://google.com
    ⇒ 두 주소 모두 TLD는 .com, eTLD+1은 google.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

 

CSRF 공격

CSRF(Cross-Site Request Forgery)는 악성 웹 사이트 공격 유형이다. 

• CSRF 공격을 원클릭 공격 또는 세션 라이딩이라고도 한다. 
• 이 공격 유형은 웹 사이트가 신뢰하는 사용자로부터 권한 없는 요청을 전송한다.

---

 

SameSite 옵션에서 사용할 수 있는 속성은 다음과 같다. (옵션에 따른 쿠키 전송 여부)

• Lax : Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송할 수 있다.
• Strict : 단어 그대로 가장 엄격한 옵션으로, Cross-Site가 아닌 Same-Site인 경우에만 쿠키를 전송할 수 있다.
• None : Cross-Site에 대해 가장 관대한 옵션으로 모든 메서드 요청에 대해 항상 쿠키를 보내줄 수 있다.
  • 다만 쿠키 옵션 중 Secure 옵션이 필요하다.
  • 즉, HTTPS 프로토콜 사용이 필수적이다.
  • 팁) 서버에서 쿠키전송이 되지 않으면서 네트워크 탭에서 set cookie 옆에 경고 아이콘이 보인다면 SameSite 옵션을 None으로 설정하면 해결할 수 있다.

 

---

 

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

 

쿠키를 이용한 상태 유지

 

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

• 하지만 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.
• 이런 인증정보를 이용해 공격자가 유저인척 서버에 요청을 보낸다면 서버는 누가 요청을 보낸 건지 의심하지 않고 이를 인증된 유저의 요청으로 취급하게 된다. 이때 개인정보와 같은 민감한 정보를 공격자가 탈취한다면 2차 피해가 일어날 수 있다.

 

참고 자료

MDN - Set-Cookie Attributes