[CS] 브라우저 쿠키 알아보기

쿠키

• HTTP 쿠키는 서버가 사용자의 브라우저에 전송하는 작은 데이터 조각을 말함
  • 브라우저는 데이터 조각을 저장해 놨다가 같은 서버에 재요청 시 데이터와 함께 쿠키를 전송함
  • 쿠키는 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할때 주로 사용
  • 이를 통해 사용자의 로그인 상태를 유지할 수 있음
  • stateless HTTP 프로토콜에서 상태 정보를 기억할때 주로 사용

쿠키의 주된 목적

1. 세션관리
   • 로그인 정보, 장바구니, 게임 스코어 등 정보 관리
2. 개인화
   • 사용자 선호, 테마 등의 세팅
3. 트래킹
   • 사용자 행동 기록, 분석 용도

과거 클라이언트 측에 정보 저장 시 쿠키를 주로 사용했으나 현재는 modern storage APIs (로컬, 세션스토리지, Index DB 등)를 사용하는것이 권장된다고 함, 모든 요청마다 쿠키가 함께 전송되기 때문에 성능 저하의 원인이 될 수 있기 때문

쿠키 만들기

• HTTP 요청 수신 시 서버는 응답과 함께 Set-Cookie 헤더를 전송함
  • 쿠키는 브라우저에 의해 저장되며, 이후 쿠키는 같은 서버에 의해 만들어진 요청들의 쿠키 HTTP 헤더안에 포함되어 전송
  • 만료일, 지속시간 등을 명시할 수 있으며, 만료된 쿠키는 더이상 보내지지 않음
  • 특정 도메인, 경로 제한을 설정할 수 있으며, 이는 쿠키가 보내지는 것을 제한할 수 있음

set-cookie와 Cookie 헤더

• set-cookie http 응답 헤더는 서버로부터 사용자 에이전트로 전송

Set-Cookie: <쿠키이름>=<쿠키값>

• 이 서버 헤더는 클라이언트에게 쿠키를 저장하라고 전달

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

• 이제 서버로 전송되는 모든 요청과 함께, 브라우저는 Cookie 헤더를 사용하여 서버로 이전에 저장했던 모든 쿠키들을 회신함

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

쿠키의 라이프타임

• 세션 쿠키 (Expires, Max-Age 속성이 없는 쿠키), 현재 세션이 끝날때 삭제됨
  • 브라우저는 현재 세션이 끝나는 시점을 정의하며, 어떤 브라우저는 재시작 시 세션을 복원해 세션 쿠키가 무기한 존재할 수도 있음
• 영속 쿠키 (Expires 속성에 명시된 날짜에 삭제 or Max-Age 속성에 명시된 기간 이후 삭제)

Set-Cookie: id=adsda;Expires=Wed, 21 Oct 2015 07:28:00 GMT;

쿠키 만료시점 설정시, 만료 시점의 시간, 날짜는 서버가 아닌 클라이언트의 시간을 기준으로 함

Secure과 HttpOnly 쿠키

• Secure 쿠키는 HTTPS 프토토콜 상에서 암호화된 요청일 경우에만 전송

  • 이런 특성에도 불구하고, 민감한 정보는 저장하면 안됨

  • 본질적으로 쿠키는 안전하지 않고, 보안을 별도로 제공하지는 않기 때문

  • XSS 공격을 방지하기 위해 HttpOnly 쿠키는 Document.cookie API에 접근할 수 없음

    • 서버에 전송되기만 할 뿐임

Set-Cookie: id=asdsad; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly;

쿠키의 스코프

• Domain 그리고 Path 는 쿠키의 스코프를 정의함 (어떤 URL을 쿠키가 보내야 하는지)
• Domain은 쿠키가 전송되게 될 호스트들을 명시.
  • 만약 명시되지 않는다면 현재 문서 위치의 호스트 일부를 기본값으로 함 (서브 도메인은 포함 X). 도메인이 명시되면, 서브도메인들은 항상 포함
  • 만약 Domain=mozilla.org이 설정되면, 쿠키들은 developer.mozilla.org와 같은 서브도메인 상에 포함되게 됨.
• Path는 Cookie 헤더를 전송하기 위하여 요청되는 URL 내에 반드시 존재해야 하는 URL 경로 %x2F("/") 문자는 디렉티브 구분자로 해석되며 서브 디렉토리들과 잘 매치됨
  • 만약 Path=/docs이 설정되면, 다음의 경로들은 모두 매치될 것
    • /docs
    • /docs/Web/
    • /docs/Web/HTTP

SameSite 쿠키

• SameSite 쿠키는 쿠키가 cross-site 요청과 함께 전송되지 않았음을 요구하게 만들어, cross-site 요청 위조 공격(CSRF)에 대해 어떤 보호 방법을 제공.

Document.cookie를 사용한 JavaScript 접근

새로운 쿠키들은 Document.cookie를 사용해 만들어질 수도 있으며, HttpOnly 플래그가 설정되지 않은 경우 기본의 쿠키들은 JavaScript로부터 잘 접근될 수 있음

document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

쿠키 만들기 (클라이언트에서)

document.cookie = "username=user123; max-age=86400; path=/; Secure";

쿠키 옵션들

• max-age: 쿠키의 유효 기간을 초 단위로 설정
• expires: 쿠키가 만료될 날짜를 명시적으로 설정
• path: 쿠키의 적용 범위를 지정
• domain: 쿠키가 전송될 도메인을 지정
• Secure: HTTPS 연결에서만 쿠키가 전송
• HttpOnly: JavaScript로 쿠키를 읽지 못하도록 방지해 보안을 강화
• SameSite : 쿠키가 다른 사이트 간 요청에 포함되는 방식을 제한