이번 주부터 HTTPS 작동방식과 인증방식을 배우는데요, 로그인, 로그아웃 기능을 구현하는 방법을 학습할 수 있을 것 같습니다. 서버를 찍먹해볼 수 있는 시간이라 이번 유닛을 기대했었는데, 왠걸..? 막상 배워보니 제대로 이해하지 못하는 저를 발견할 수 있었습니다.

그래서 배운 개념과 과제 코드 진행과정을 설명하면서 한 번 더 공부할 수 있는 시간을 가져보려고 합니다.👏🏻

🍪 Cookie

: 서버에서 클라이언트에 일방적으로 전달하는 데이터
(중요한 것은 서버 ➡️ 클라이언트!)


쿠키가 유저에게 어떻게 도움이 되는걸까? 예시를 들어보자면,

쇼핑몰 사이트를 둘러보면서 여러 개의 옷들을 장바구니에 넣고 여러 페이지를 돌아다녀도 장바구니가 유지되는걸 알 수 있습니다. 어떻게 가능한 걸까요? 이게 바로 쿠키 덕분에 가능한 겁니다.


Cookie의 특징

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

서버는 쿠키를 이용해서 데이터를 저장하고 데이터를 다시 불러와 사용할 수 있습니다. (단, 특정 조건들이 만족되어야 가져올 수 있습니다.)

특정 조건들은 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있습니다.

🤔 쿠키 옵션에는 뭐가 있는거지?


주로 사용하는 쿠키 옵션에 대해서 알아보겠습니다.

Domain

  • 쿠키 옵션에서의 도메인 👉🏻 포트 및 서브 도메인, 세부 경로를 포함하지 않습니다.
    • 서브 도메인이란? www같은 도메인 앞에 추가로 작성되는 부분
    • 요청해야 할 URL이 http://www.localhost:3000/users/login이라면 도메인은? 👉🏻 localhost:3000
  • 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있습니다.
    • 이를 통해 naver.com에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있습니다.

Path

  • 세부 경로
  • 서버가 라우팅할 때 사용하는 경로를 의미합니다.
    • 만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login인 경우라면 여기에서Path는? 👉🏻 /users/login
  • 설정된 경로를 포함하는 하위 경로로 요청하더라도 쿠키를 전송할 수 있습니다.
    • 만약 Path가 /users/로 설정되어있고, 요청 경로가 /users/codestates라면 쿠키 전송 가능⭕️

MaxAge or Expires

  • 쿠키에 유효한 기간을 정하는 옵션
  • MaxAge: 유효한 시간을 초 단위로 설정하는 옵션
  • Expires: 언제까지 쿠키가 유효한지 클라이언트의 시간을 기준으로 설정하는 옵션
  • 옵션 여부에 따라 세션 쿠키와 영속성 쿠키로 나눠집니다.
    • 세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키
    • 영속성 쿠키: 브라우저의 종료와 상관없이 지정된 유효시간만큼 사용가능한 쿠키가

Secure

  • 사용하는 프로토콜에 따른 쿠키의 전송여부를 결정하는 옵션
  • Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있습니다.
  • Secure 옵션이 없다면? 👉🏻 프로토콜에 상관없이 즉, https든 http든 모두 쿠키를 전송할 수 있습니다.
    - 단, 도메인이 localhost인 경우에는 HTTPS가 아니어도 쿠키 전송이 가능합니다.

HttpOnly

  • 브라우저 쿠키에 접근이 가능한지 여부를 결정
  • 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가합니다.
  • 옵션을 명시하지 않는 경우에는 기본적으로 false로 지정됩니다.
    • document.cookie로 접근가능⭕️
    • 접근이 가능하다는 것은 쿠키가 탈취될 위험도 크다는 얘기!

SameSite

  • Cross-Site 요청을 받은 경우, 요청에서 사용한 메서드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 됩니다.

  • SameSite 옵션

    • Lax: Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송
    • Strict: Cross-Site가 아닌 Same-Site인 경우에만 쿠키를 전송
    • None: Cross-Site에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있습니다.(다만, 쿠키 옵션 중 Secure 옵션이 필요)

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

Cross-Origin Cross-Site
차이점 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 eTLD+1이 다른 경우(.com, .org)
예시 http://codestates.com vs https://codestates.com https://code.github.io vs https://states.github.io

🤔 이 옵션들을 사용해서 쿠키를 서버에서 클라이언트로 전송하는건가? 정답은 Yes!


서버에서 클라이언트로 쿠키를 전송하면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아서 전송합니다.

반대로 클라이언트에서 서버에 쿠키를 전송해야한다면 어떻게 해야할까요? 요청 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 쿠키를 전송합니다.

👉🏻 서버에서 클라이언트로는 Set-Cookie, 클라이언트에서 서버로는 Cookie