🔥 학습목표
- 쿠키의 작동 원리를 이해할 수 있다.
- 회원가입 및 로그인 등 유저 인증에 대해 설명할 수 있다.
- 세션의 개념을 이해할 수 있다.
- 쿠키와 세션의 차이점을 설명할 수 있다.
- 세션의 한계를 이해할 수 있다.
🟩Cookie
서버에서 클라이언트에 (영속성 있는) 데이터를 저장하는 방법.
└▶ 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.
└▶ 단순히 서버에서 클라이언트에 쿠키를 전송하는 것 뿐만 아닌, 클라이언트에서 서버로 쿠키를 다시 전송하기도 한다.
🟣 쿠키 옵션
쿠키를 이용하여 클라이언트에 데이터를 저장하고 다시 불러올 수 있다.
하지만 데이터를 아무 때나 가져오면 안 되고, 특정한 조건들이 만족되어야 가져올 수 있다.
이런 조건들을 쿠키 옵션이라고 한다.
아래처럼 http 헤더를 사용하여 쿠키 옵션을 표현할 수 있다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=naver.com'
]이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송할 때 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다.
이후 클라이언트에서 서버에게 쿠키를 전송한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 전송한다.
⬜ Domain
서버에 접속할 수 있는 이름
└▷www.google.com
└▷ 포트, 서브 도메인 정보, 세부 경로 포함x
쿠키 옵션에 도메인이 존재한다면, 클라이언트는 쿠키의 도메인 옵션과 서버의 도메인이 일치해햐 쿠키를 전달할 수 있다.
⬜ Path
서버가 라우팅할 때 사용하는 경로
└▷/users/login
설정된 경로를 포함하는 하위 경로로 쿠키를 서버에 전송할 수 있다.
옵션이 users로 설정되어 있고, 요청하는 세부 경로가 users/mypage인 경우 쿠키를 전송할 수 있다.
⬜ MaxAge or Expires
쿠키의 유효 기간을 정하는 옵션
MaxAge: 유효 시간을 초 단위로 설정.Expires: 언제까지 쿠키가 유효할 것인지 날을 지정. 클라이언트의 시간을 기준으로 하며 날짜 초과시 쿠키는 자동 파괴.
쿠키는 옵션 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠진다.
-
세션 쿠키 :
MaxAge또는Expires옵션이 없는 쿠키. 브라우저가 실행 중일 때 사용할 수 있는 쿠키. 브라우저를 종료하면 해당 쿠키는 삭제된다. -
영속성 쿠키 : 지정한 유효시간만큼 사용 가능한 쿠키.
⬜ Secure
사용하는 프로토콜에 따른 쿠키의 전송 여부 결정 옵션
true인 경우 : HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.- 도메인이
localhost인 경우 : HTTPS가 아니어도 쿠키 전송이 가능하다.
⬜ HttpOnly
자바스크립트로 브라우저의 쿠키에 접근 가능한지 여부 결정
true인 경우 : 자바스크립트로 쿠키 접근 불가defualt:false로 지정.document.cookie를 이용해 자바스크립트로 쿠키 접근 가능. 탈취의 위험 있음.
⬜ SameSite
Cross-Site 요청을 받은 경우 요청 메서드와 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정
└▷ Cross-Origin과 혼동 금지
-
Cross-Origin : 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우
-
Cross-Site : eTLD+1 이 다른 경우
└▷ TLD(Top Level Domain, 최상위 도메인) :.com,.org와 같은 도메인의 가장 마지막 부분
└▷ eTLD+1 : 최상위 도메인의 바로 왼쪽의 하위 레벨 도메인을 합한 것
🌠 Cross-Site의 예시
http://google.com/https://google.com
TLD는.com으로 동일, eTLD+1 또한google.com으로 동일
=> Same-Site
https://site.google.com/https://alldone.google.com
TLD는.com으로 동일, eTLD+1 는site.google.com,alldone.google.com으로 다름.
=> Cross-Site
SameSite 옵션 속성
-
Lax : Cross-Site 요청의 경우 GET 메서드에 대해서만 쿠키 전송 가능.
-
Strict : 가장 엄격한 옵션. Same-Site인 경우에만 쿠키 전송 가능.
-
None : 가장 관대한 옵션. 항상 쿠키를 보내줄 수 있음. 단 쿠키 옵션 중 Secure 옵션이 필요.
🟣 쿠키를 이용한 상태 유지
쿠키 사용 예로, 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달 받은 쿠키를 서버에 요청과 함께 전송하여 상태 유지를 할 수 있다.
단, 쿠키는 기본적으로 오랜 시간 유지될 수 있고, HttpOnly 옵션을 사용하지 않은 경우 자바스크립트를 통해 접근할 수 있기 때문에 민감한 정보는 담지 말아야 한다.
🟩Session
사용자가 인증에 성공한 상태를 세션이라 부른다.
└▶ 서버는 일종의 저장소에 세션을 저장
└▶ 세션이 만들어지면 서버가 클라이언트에게 유일하고 암호화된 ID를 부여
앞서 배운 쿠키는 클라이언트에 저장하는 것이고, 세션은 데이터를 서버에 저장한 뒤 해당 데이터에 대한 ID만 클라이언트에게 제공한다.
이런 ID를 어디에 사용할까?
🟣 세션 기반 인증(Session-based Authentication)
⬜ 로그인 유지
우리는 세션을 사용하여 사용자의 인증 정보를 저장하고 개개인의 웹사이트 이용을 도와준다.
사용자의 이용 순서는 아래와 같다.
- 로그인을 시도한다.
- 올바른 아이디/패스워드를 입력했다면 서버는 인증에 성공했다고 판단한다.
- 클라이언트에게 인증 성공을 증명할 수단인 세션 ID를 제공한다.
- 클라이언트는 쿠키에 암호화된 세션 아이디를 저장한다.
- 인증을 필요로 하는 작업(장바구니 추가, 마이페이지 진입 등)을 요청할 때 세션 아이디를 통해 한 번 더 로그인 하지 않고도 원하는 응답을 받는다.
즉 로그인 상태를 유지하는 거다.
⬜ 로그아웃
- 클라이언트 : 세션 아이디가 담긴 쿠키를 저장하고 있음 → 쿠키를 변경하거나 삭제
res.cookie : 쿠키의 값을 무효한 값으로 변경
res.clearCookie : 쿠키를 삭제
- 서버 : 세션을 저장하고 있음 → 세션 정보를 삭제
Session.destroy(callback) : 아래 express-session 참고
⬜ express-session
Node.js에 세션을 대신 관리해주는 express-session 모듈이 존재한다.
express-session 은 세션을 위한 미들웨어로 Express 서버에서 세션을 위한 공간을 다룰 수 있게 만들어준다.
const express = require('express');
const session = require('express-session');
const app = express();
// 세션 옵션 지정
app.use(
session({
secret: '@alldone', // 비밀키. 이를 이용해 암호화 하여 세션 id 생성
resave: false,
saveUninitialized: true,
cookie: {
domain: 'localhost',
path: '/',
maxAge: 24 * 6 * 60 * 10000,
sameSite: 'none',
httpOnly: false,
secure: true,
},
})
);-
쿠키로 전송 된 세션 아이디는 이에 종속되는 고유한 세션 객체를 가진다. 이는 서버에 저장 된다.
-
세션 객체는 유저별 독립적으로 생성 된 객체이므로 각각 다른 데이터를 저장할 수 있다.
-
클라이언트에 유저의 개인정보를 담지 않고 세션 id를 이용해 유저의 인증 여부를 판단한다.
-
세션 객체는
req.session으로 접근할 수 있으며 이를 통해 세션에 임의의 데이터를 저장하거나 불러올 수 있다.
쿠키, 세션을 공부하다보니 캐시에 대한 개념도 궁금하게 되었는데...
