Cookie / Session
Cookie
- 쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법
- 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있습니다.
- 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함
Cookie 특징
- 서버가 클라이언트에 특정한 데이터를 저장할 수 있습니다.
- 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없습니다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문입니다.
Cookie 옵션
1. Domain
- 도메인이라는 것은 여러분들이 흔히 사용하는 www.google.com과 같은 서버에 접속할 수 있는 이름
- 쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다. 여기서 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분
- ttp://www.localhost.com:3000/users/login 이라 하면 여기에서 Domain은 localhost.com
- 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있습니다.
- naver.com에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있습니다.
2. Path
- Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미
- http://www.localhost.com:3000/users/login 인 경우라면 여기에서 Path, 즉 세부 경로는 /users/login
- 명시하지 않으면 기본적으로 / 으로 설정되어 있습니다.
- 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있습니다.
- Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/codestates 인 경우라면 쿠키 전송
- /posts/codestates로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없습니다.
3. MaxAge or Expires
- 쿠키가 유효한 기간을 정하는 옵션
- 쿠키가 영원히 남아있다면 그만큼 탈취되기도 쉬워지기 때문에 이러한 유효기간을 설정하는 것이 보안 측면에서 중요
- MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션
- Expires은 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정
- 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠집니다.
- 세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키입니다. 브라우저를 종료하면 해당 쿠키는 삭제됩니다.
- 영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키입니다.
4. Secure
- 사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션
- Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있습니다.
5. HttpOnly
- 자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정
- 당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가
- 명시되지 않는 경우 기본으로 false로 지정 / 옵션이 false인 경우 document.cookie를 이용해 자바스크립트에서 쿠키접근이 가능하므로 XSS 공격에 취약
6. SameSite
- Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션(e.g. GET, POST, PUT, PATCH …)의 조합을 기준으로 서버의 쿠키 전송 여부를 결정
- Lax: Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있습니다.
- Strict: 단어 그대로 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.
- None: Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.
- same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우 / 하나라도 다르다면 Cross-Origin으로 구분
- 서버에서 이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송
- 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 됩니다.
쿠키를 이용한 상태 유지
- 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 같이 전송하여 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있습니다.
- 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험
Axios
- Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
- Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함
Fetch API vs Axios
| Axios | Fetch API |
|---|
| 써드파티 라이브러리로 설치가 필요합니다. | 빌트인 API라 별도의 설치 필요없습니다. |
| 자동으로 JSON데이터 형식으로 변환됩니다. | .json() 메서드를 사용해야 합니다. |
Axios 사용법
npm install axios
GET 요청
axios.get("url"[,config])
Session
로그인
- 서버: 사용자가 인증에 성공했음을 알고 있어야 합니다.
- 클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 합니다.
- 사용자가 인증에 성공한 상태는 세션이라고 부릅니다.
- 서버는 일종의 저장소에 세션을 저장합니다.
- 주로 in-memory(자바스크립트 객체를 생각하면 됩니다), 또는 세션 스토어(redis 등과 같은 트랜잭션이 빠른 DB)에 저장합니다.
- 세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데(그림에서 3번), 보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달합니다. (그림에서 4번)
- 이때 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용합니다. 쿠키에는 서버에서 발급한 세션 아이디를 저장합니다.
- 쿠키를 통해 유효한 세션 아이디가 서버에 전달되고, (그림에서 5번) 세션 스토어에 해당 세션이 존재한다면 (그림에서 6번) 서버는 해당 요청에 접근 가능하다고 판단합니다. (그림에서 7,8번)
- 쿠키에 세션 아이디 정보가 없는 경우, 서버는 해당 요청이 인증되지 않았음을 알려줍니다.
로그아웃
- 세션 아이디가 담긴 쿠키는 클라이언트에 저장되어 있으며, 서버는 세션을 저장하고 있습니다. 그리고 서버는 그저 세션 아이디로만 인증 여부를 판단
- 서버: 세션 정보를 삭제해야 합니다.
- 클라이언트: 쿠키를 갱신해야 합니다.
- 서버는 클라이언트의 쿠키를 임의로 삭제할 수 없습니다. 대신, set-cookie로 클라이언트에게 쿠키를 전송할 때 세션 아이디의 키값을 무효한 값으로 갱신할 수 있습니다.
express-session
- Node.js에는 이런 세션을 대신 관리해 주는 express-session 이라는 모듈이 존재
const express = require('express');
const session = require('express-session');
const app = express();
app.use(
session({
secret: '@codestates',
resave: false,
saveUninitialized: true,
cookie: {
domain: 'localhost',
path: '/',
maxAge: 24 * 6 * 60 * 10000,
sameSite: 'none',
httpOnly: false,
secure: true,
},
})
);
- express-session를 사용해 위와 같이 세션의 옵션을 지정할 수 있음
- 세션의 경우 secret 옵션의 비밀키를 이용해 암호화해 세션 id라는 것을 생성 / 이것을 클라이언트에게 쿠키로 전송
- 쿠키로 전송된 세션 id는 이에 종속되는 고유한 세션 객체를 가지며 이는 서버에 저장
- 세션 객체는 유저별로 독립적으로 생성된 객체이므로 유저별로 각각 다른 데이터를 저장할 수 있습니다.
- 클라이언트에 유저의 개인정보를 담지않고도 서버가 클라이언트의 세션 id를 이용해 유저의 인증여부를 판단할 수 있습니다.
- 세션 객체는 req.session으로 접근할 수 있으며 앞서 말했듯 이를 통해 세션에 임의의 데이터를 저장하거나 불러올 수 있습니다.
