쿠키와 세션에 대한 정보를 알아보기 전에 http의 특징을 알아봐서 쿠키, 세션이 왜 필요한지를 알아야 합니다.
http의 특징은 connectionless, stateless 입니다.
connectionless(비연결지향)
=> 서버에서는 클라이언트의 요청에 대한 응답을 하고 클라이언트와의 연결을 끊습니다.
http 1.0 에서는 TCP프로토콜을 이용한 요청이 3번 있다면 3-way handshake/4-way handshake 3번을 매번 수행했어야 했습니다.
그래서 http 1.1 에서는 Connection 헤더에 keep-alive라고 설정하면 컨넥션을 유지할 수 있었습니다.
stateless(상태를 가지고 있지 않음)
=> http 통신은 요청을 응답하고 접속을 끊기 때문에 클라이언트의 상태정보를 알수 없었습니다.
만약에 로그인을 하고 나서 다른 페이지를 요청하게 되면 이전에 로그인을 하고 있던 상태를 요청/응답에서는 가지고 있지 않습니다.
로그인을 매 페이지마다 해야한다면 사용자는 큰 불편함을 겪을수 밖에 없습니다.
그래서 쿠키와 세션이 등장하게 되었습니다.
쿠키와 세션을 이용하면 클라이언트의 상태를 관리할 수 있습니다.
쿠키란?
쿠키는 브라우저가 관리하는 메모리에 저장이 되는 key-value 형태의 작은 데이터 파일 입니다.
쿠키는 만료기한을 설정할 수 있습니다.
쿠키는 사용자에 의해 변경될 수 있고 노출되므로 보안이 중요한 값을 설정하는데 주의해야 합니다.(위 변조 주의)
하나의 도메인당 20개의 쿠키를 가질수 있습니다.
하나의 쿠키는 4KB까지 저장이 가능합니다.
key, value, domain, 전송할 경로, 만료기한, httpOnly, secure등으로 구성됩니다.
1. 클라이언트가 서버에 로그인 요청을 합니다.
2. 서버는 클라이언트의 로그인을 처리하고 성공하면 set-cookie를 응답에 추가하여 브라우저에 cookie를 설정해줍니다.
3. 이후에 클라이언트의 요청에는 cookie값이 cookie 헤더에 자동으로 추가가 됩니다.
자동으로 쿠키를 추가해주는 작업은 브라우저에서 처리해주는 작업입니다.
cors에서 쿠키 설정을 위해서는 access-control-allow-credentials: true를 설정,
access-control-allow-origin이 *(wildcard)가 아닌 프론트의 도메인이 설정 되어있어야 합니다!!
세션이란?
브라우저가 종료되기 전까지 클라이언트의 상태를 유지하게 해주는 기술입니다.
세션은 DB에 저장이 됩니다.
세션은 DB에 저장이 되기 때문에 사용자가 많아지면 DB의 자원을 많이 소모하게 됩니다.
1. 클라이언트가 서버에 로그인 요청을 합니다.
2. 서버는 클라이언트의 로그인을 처리하고 성공하면 set-cookie를 응답에 추가하여 브라우저에 cookie를 설정해줍니다. 이때 쿠키에 설정해주는 값은 sessionId 입니다!!
3. 이후에 클라이언트의 요청에는 sessionId cookie값이 cookie 헤더에 자동으로 추가가 됩니다.
자동으로 쿠키를 추가해주는 작업은 브라우저에서 처리해주는 작업입니다.
4. 서버에서는 클라이언트의 요청을 받을때 sessionId 값을 추출하여 유효한지 판단후에 응답을 처리합니다.
쿠키, 세션은 왜 쓰나요??
http의 특성중 stateless를 보완하기 위해 사용합니다.
쿠키, 세션을 통해 클라이언트의 상태를 관리하고 제어할 수 있습니다.
쿠키와 세션의 차이
쿠키는 브라우저 측, 세션은 서버측에 위치하게 됩니다.
쿠키는 탈취와 변조가 가능합니다. 세션은 Id 값만 노출이 되어 있고 서버에서 관리되기 때문에 상대적으로 안전합니다.
쿠키는 브라우저를 종료해도 파일로 남아있습니다. 따라서 만료기한을 설정해주지 않으면 반영구적으로 존재하게 됩니다. 세션은 브라우저 종료시에 삭제합니다.
쿠키는 파일에서 읽기 때문에 상대적으로 속도가 빠르고, 세션은 요청마다 서버에서 처리가 이루어지기 때문에 비교적 느립니다.
[WEB] 쿠키, 세션이란?
웹의 기초중 하나인 쿠키와 세션에 대해 알아봅니다.
chrisjune-13837.medium.com
'네트워크' 카테고리의 다른 글
| 네트워크 HTTP, HTTP 1.1, HTTP 2.0 🔥 (0) | 2022.04.16 |
|---|---|
| html5, 웹 표준 및 웹 접근성 🔥 (0) | 2022.04.13 |
| CORS 🔥 (0) | 2022.04.03 |
| OSI 7 layer 🌱 (0) | 2022.04.01 |
| 로컬에서 CORS policy 관련 에러가 발생하는 이유 😃 (0) | 2022.03.21 |