1. Cookie

1-1. Cookie 란?

• HTTP 프로토콜의 무상태성(Stateless)를 보완해주기위해, 서버가 클라이언트에 특정한 데이터를 저장하고 불러올 수 있는 수단.
  • HTTP 프로토콜의 무상태성 : 서버가 아닌 클라이언트가 상태를 갖고 있어, 서버 확장성이 높은 장점이 있으나 클라이언트가 추가 데이터를 전송해야 하고 데이터가 Stateful 에 비해 상대적으로 큰 단점이 있음.
• 쿠키 사용 목적
  1. 세션 관리(서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리)
  2. 개인화(사용자 선호, 테마 등의 세팅)
  3. 트래킹(사용자 행동을 기록하고 분석하는 용도-> 추천광고 띄울때 등)

1-2. Cookie 이용법

• 로그인 상태 유지, 인증정보, 사용자 선호, 테마 등 장시간 보존해야하는 정보 저장에 적합 (쿠키의 특성 : 삭제하지 않으면 사라지지 않음.)
• 인증 정보 보안을 위해서 hashing 처리가 되어있는데, 이것만으로는 불안(JS 로 쿠키에 접근 가능함)

1-3. Cookie 전달 방법

• 기본적으로는 HTTP 헤더를 사용해서 보낼 수 있음.
• 클라이언트가 페이지를 요청하고, 웹서버는 쿠키를 생성해서 응답에 포함해서 줌.
• 서버가 응답 헤더의 Set-Cookie 라는 프로퍼티에 생성한 쿠키의 이름, 값, 경로 등의 옵션을 저장해서 클라이언트에게 응답함.
• 쿠키가 포함된 응답을 받은 클라이언트는 HTTP 응답헤더에 있는 Set-Cookie 를 확인하고 로컬 PC 에 쿠키를 저장해놓음.
• 이후로는 클라이언트가 동일 사이트에서 재요청 시 클라이언트에 저장되어있던 쿠키내용(cookie)을 담아서 보내게 됨

'Set-Cookie':[
            'cookie=yummy',
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=codestates.com'
        ]

참고 사이트 :
MDN - Set-Cookie

1-4. Cookie Options

1. Domain

• 도메인 : 서버 주소. URL 중 www.google.com 의 부분
• 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있음

2. Path

• Path : 서버가 라우팅할때 사용하는 세부 경로. URL 중 www.google.com/login 의 부분
• 서버와 request 의 세부 경로(path)가 일치하는 경우 쿠키를 전송하는 옵션

3. MaxAge or Expires Options

• 쿠키의 유효기간을 설정하여 일정 시간 이후에 쿠키가 자동 소멸되게 설정하는 옵션(설정해놓으면 브라우저가 종료되어도 유효기간 안에는 쿠키를 저장하고 있음)
• MaxAge : 쿠키의 유효시간을 초 단위로 설정하는 옵션.
• Expires : 쿠키가 유효한 시간을 날짜, 시간으로 설정(클라이언트의 시간 기준)
  • 세션 쿠키 :MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키.(브라우저를 종료 시 해당 쿠키 삭제)
  • 영속성 쿠키:브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키.

4. HTTP Only Options

• 자바 스크립트의 쿠키 접근 가능 여부 결정
• 기본 false 로 설정되어 있으며, 이 경우 document.cookie 로 접근 가능함(쿠키 탈취 위험 있음!)
• true 인 경우 자바스크립트로 쿠키에 접근 불가능함(무조건 넣어주기!)

5. Secure

• 사용하는 프로토콜에 따른 쿠키 전송 여부를 결정하는 옵션
• true 일 경우 HTTPS 를 이용하는 경우에만 쿠키 전송 가능함.
• secure 옵션이 없다면 http 에도 쿠키 전송 가능.
• 단, 도메인이 localhost 인 경우에는 HTTPS 가 아니어도 쿠키 전송 가능함(개발 단계에서 localhost 를 많이 사용해서 생긴 예외)

6. SameSite

• Cross-Origin 요청을 받은 경우, 요청에서 사용한 메소드(e.g. GET, POST, PUT, PATCH …)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정함
• CSRF 를 막는데 아주 효과적인 옵션.
  • CSRF(Cross Site Request Forgery) : 인증을 하는 동안 사용자가 원치않는 리퀘스트를 하게 만드는 해킹 공격.
• sameSite='Lax' : Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키 전송 가능
• sameSite='Strict' : 가장 엄격한 옵션, Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송
  • same-site : 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우(이 중 하나라도 다르면 Cross-Origin!)
• sameSite=’none’ : 항상 쿠키를 보내줄 수 있음, 그러나 HTTPS 프로토콜과 Secure 쿠키 옵션이 필수!

2. Session

2-1. Session 이란?

• 사용자가 인증에 성공한 상태.(클라이언트가 웹 서버에 접속한 시점~웹 브라우저를 종료하여 연결을 끝내는 시점)

• 세션 동작 순서

  • 클라이언트가 서버에 페이지를 요청함
  • 서버는 클라이언트의 Request-header Cookie 를 확인하여, 클라이언트가 해당 세션의 ID 를 보냈는지 체크함
  • 세션 아이디가 없으면 서버가 세션 객체를 생성해서 유일하고 암호화된 세션 ID를 부여하고, 세션 스토어나 in-memory 같은 저장소에 세션을 저장함.
  • Set-Cookie 메소드를 통해서 암호화된 세션 아이디를 클라이언트에 전달해줌(세션 성공을 증명할 수단)
  • 클라이언트는 쿠키로 암호화된 세션 아이디를 저장함. 저장한 세션 아이디로 로그인 유지, 같은 아이디의 유저의 장바구니에 아이템 추가 등의 추가 작업을 수행함.
  • 쿠키를 통해 유효한 세션 아이디가 서버에 전달되고, 세션 스토어에 해당 세션이 존재한다면 서버는 해당 요청에 접근 가능하다고 판단함

express-session

• 세션을 대신 관리해주는 Node.js 모듈
• GitHub: express-session

3. 쿠키와 세션

• 쿠키는 HTTP 의 무상태성을 보완해주고, 클라리언트에서 접속상태 관리
  • 장점: 서버 부담이 덜어짐(비용 절감), 가벼움.
  • 단점 : 쿠키 자체는 인증이 아님
• 세션은 접속상태를 서버가 관리, 접속상태와 권한 부여를 위해 세션 아이디를 쿠키로 전송
  • 장점: 쿠키를 사용하면 브라우저에 저장되기 때문에 신뢰할수 없는 사용자더라도 서버에서 접속을 끊어줄 수 없는데, 세션을 사용하면 로그인 상태를 서버에서 끊어줄 수 있음(신뢰할수 있는 유저인지 서버에서 추가로 확인 가능⇒ 은행 등 보안이 필요한 곳에서 많이 사용함)
  • 단점 : 하나의 서버에서만 접속상태를 가지므로 분산에 불리함