서버에서 클라이언트에 데이터를 저장하는 방법 중 하나로 http의 stateless 특징을 보완해주는 도구로 작은 문자열을 저장합니다.
서버가 원한다면 서버는 클라이언트에서 쿠키를 이용하여 데이터를 가져올 수 있습니다.
데이터 저장 이후 아무 때나 데이터를 가져올 수는 없으며, 특정 조건들이 만족하는 경우에만 다시 가져올 수 있습니다.
쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만을 의미하지 않고, 클라이언트에서 서버로 쿠키를 전송하는 것도 포함합니다.
서버는 일방적으로 브라우저에 응답의 헤더를 이용 해 쿠키를 줄 수 있습니다.
쿠키를 저장할 때에는 헤더를 이용합니다 (사용헤더: cookie, set-cookie)
stateless
각각의 요청은 독립적이기 때문에 이전 요청에 대한 것을 기억하지 않습니다.
로그인 정보도 기억하지 못하기 때문에 로그인 정보를 쿠키에 저장합니다
connect.sid=session_id (키 = 값)
다른 도메인 간 쿠키 전송
요청 / 응답 헤더를 적절하게 설정해주면 다른 도메인이더라도 쿠키가 전송됩니다.
1) 클라이언트
axios.post(주소, 데이터, { withCredentials: true })
// withCredentials: true로 설정해 주어야 합니다
axios.get("https://localhost:4000/users/userinfo", {
withCredentials: true,
})2) 서버
app.use(cors({
origin: true,
credentials: true
}))
// withCredentials: true로 설정해 주어야 합니다- credentials : Access-Control-Allow-Origin을 true로 만들어주는 옵션
주로 사용되는 쿠키 옵션
1) Domain
도메인: 서버에 접속할 수 있는 이름
쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다
예시: naver.com (서브 도메인: www와 같이 도메인 앞에 추가로 작성되는 부분)
쿠키 옵션에 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있습니다
예시:
요청해야 하는 URL : http://www.localhost.com:3000/users/login
도메인: localhost.com
2) Path
세부 경로는 서버가 라우팅할 때 사용하는 경로로, 명시하지 않으면 기본으로 / 로 설정됩니다
설정된 path를 전부 만족하는 경우 요청하는 path가 추가로 더 존재하더라도 쿠키를 서버에 전송할 수 있습니다
예시:
요청해야 하는 URL : http://www.localhost.com:3000/users/login
Path, 세부 경로: /users/login
- path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/login인 경우 쿠키 전송이 가능합니다
- 하지만 /users/login으로 전송되는 요청은 path 옵션을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없습니다
3) MaxAge or Expires
쿠키가 우효한 기간을 정하는 옵션으로 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴됩니다
MaxAge: 앞으로 몇초 동안 쿠키가 유효한지 설정합니다
Expires: 클라이언트의 시간을 기준으로 언제까지 유효한지 date를 지정합니다
두 옵션이 모두 지정되지 않는 경우, 브라우저 탭을 닫아야만 쿠키가 제거됩니다
4) Secure
쿠키를 전송해야 할 때 사용하는 프로토콜에 따른 쿠키 전송 여부를 결정합니다
해당 옵션이 true로 설정된 경우, HTTPS 프로토콜을 이용하여 통신하는 경우에만 쿠키를 전송할 수 있습니다
5) HttpOnly
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정합니다
해당 옵션이 true로 설정된 경우, 자바스크립트에서는 쿠키에 접근이 불가능합니다
명시되지 않는 경우 기본으로 false로 지정 - 이 경우 자바스크립트에서 쿠키에 접근이 가능하므로 'XSS' 공격에 취약합니다
6) SameSite
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정합니다
옵션 지정 후 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 전송합니다
이후 클라이언트 혹은 서버에서 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 전송합니다
SameSite 옵션
Lax : Cross-Origin 요청이면 GET 메소드에 대해서만 쿠키를 전송할 수 있습니다
Strict : Cross-Origin이 아닌 same-site인 경우에만 쿠키를 전송할 수 있습니다
None : 항상 쿠키를 보내줄 수 있지만, 쿠키 옵션 중 Secure 옵션이 필요합니다 (https일때만 사용 가능합니다 secure:true)
쿠키를 이용한 상태 유지
쿠키의 특성을 이용해 서버는 클라이언트에 인증 정보를 담은 쿠키를 전송합니다
클라이언트는 전달받은 쿠키를 요청과 같이 전송하여 stateless한 인터넷 연결을 stateful하게 유지합니다
하지만 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험합니다
만약 해당 인증정보를 탈취하여 서버에 요청을 보낸다면, 서버는 누가 요청을 보낸 건지 상관하지 않고 인증된 유저의 요청으로 취급하기 때문에 개인 유저 정보 같은 민감한 정보에 접근이 가능합니다
