56일차

JiHun·2023년 6월 29일

부트캠프

목록 보기
45/56

Cookie

네트워크 통신은 무상태성(stateless)이라는 속성을 가지고 있다.
클라이언트가 서버에 통신을 할 때 네트워크는 클라이언트의 상태를 저장하지 않는다. 따라서 통신을 계속 할 때마다 상태를 전달해줘야 서버는 클라이언트의 상태를 알 수 있다. 이를 위해서 쿠키라는 방법을 사용한다.

클라이언트 사이드에서 영속성 있는 데이터를 저장한다. 서버는 클라이언트의 쿠키를 가져와 클라이언트의 상태를 읽는다.

옵션 종류

서버가 클라이언트의 특정한 데이터를 저장해서 이 데이터를 불러와서 사용할 수 있다.
저장한 이후 아무 때나 데이터를 가져올 수 없고 특정 조건들이 만족되어야 다시 가져올 수 있다.

Domain

세부경로 제외하고 www.google.com 에서 www. 앞 부분 google.com 부분을 말한다.
클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다. 이를 통해 설정된 도메인에서만 쿠키를 사용할 수 있게 한다.

Path

세부경로를 설정하는 옵션 종류다.
설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 서버에 전송할 수 있다.

MaxAge or Expires

쿠키의 유효기간을 정하는 옵션이다. 보안상 적절한 조지다.
MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션
Expires는 언제까지 쿠키가 유효한지 클라이언트의 시간을 기준으로 지나게 되면 쿠키는 자동으로 파괴된다.

Secure

프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션이다. true로 설정된 경우 HTTPS 이용하는 경우에만 쿠키를 전송할 수 있다.
Secure 옵션이 없으면 http나 https에 모두 쿠키를 전달할 수 있다.

HttpOnly

자바스크립트로 브라우저의 쿠키에 접근이 가능할지 여부를 결정한다. true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가하다.
false일 경우 document.cookie를 이용해 자바스크립트로 쿠키에 접근할 수 있으므로 쿠키가 탈취될 위험이 있다.

SameSite

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

Cross-Origin과 Cross-Site를 혼동하지 말자

  • Cross-Origin: 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 Cross-Origin으로 구분
  • Cross-Site: eTLD+1이 다른 경우 Cross-Site로 구분된다.
    • TLD(Top Level Domain, 최상위 도메인).com,.org, .kr, .io 같이 도메인의 가장 마지막 부분을 의미한다.
    • eTLD(Effective Top-Level Domain, 유효 최상위 도메인): 세분화 된 TLD. .co.kr, .github.io등을 eTLD라고 판단한다.
    • eTLD+1: eTLD 바로 왼쪽의 하위 레벨 도메인을 함한 것을 말한다.
    • https://code.github.io vs https://states.github.io
      두 주소 모두 eTLD가 github.io로 같지만, eTLD+1은 각각 code.github.io, states.github.io로 다르므로 Cross-Site다.
  • Lax: Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송할 수 있다.
  • Strict: Cross-Site가 아닌 Same-Site인 경우에만 엄격하게 쿠키를 전송할 수 있다.
  • None: Cross-Site에 대해 관대한 옵션으로 항상 쿠키를 보내줄 수 있다.

Session

로그인을 한다고 가정해보자.
회원가입할 때, 아이디와 비밀번호를 적어 제출하고, 서버에 저장되어있을 것이다.
로그인할 때, 일치하는 아이디와 비밀번호를 적으면 서버는 인증에 성공했다고 판단한다.
다음번에 로그인할때마다 아이디와 비밀번호를 입력해서 로그인 과정을 다시 거쳐야 할까?
"인증이 성공했음"이라는 문구만 가지고 매번 로그인할 필요가 없을 것이다.

사용자가 인증에 성공한 상태를 세션이라고 부른다.
웹 사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용한다. 쿠키에는 서버에서 발급한 세션 아이디를 저장한다.

그 이후 다시 쿠키를 통해서 네트워크 통신을 할 때,
쿠키를 통해 유효한 세션 아이디가 서버에 전달되고 세션 스토어에서 해당 세션이 존재한다면 서버는 해당 요청에 접근 가능하다고 판단한다.

로그아웃

클라이언트 사이드에서는 쿠키에 세션 아이디 정보를 저장하고 있고, 서버는 세션을 저장하고 있다.

  • 서버: 세션 정보를 삭제해야 한다
  • 클라이언트: 쿠키를 변경하거나 삭제해야 한다.
profile
안녕하세요. 프론트엔드 개발자 송지훈입니다.

0개의 댓글