HTTP Cookies and Session

쿠키와 세션 사용하는 이유?

HTTP프로토콜의 특징에서 비롯되는 약점을 보완하기 위해 사용한다.

먼저 http프로토콜의 특징이자 약점을 살펴보자.

HTTP프로토콜

 

1. Connectionless. Protocol 비연결지향

클라이언트가 서버에 요청했을때, 그 요청에 맞는 응답을 보낸 후 연결을 끊는다.

 

2. Stateless Protocol (상태정보 비유지) 

클라이언트의 상태정보를 가지지 않는 서버처리방식.

클라이언트와 첫번째 통신에서 데이터를 주고받았다 해도, 두번째 통신에서 이전데이터를 유지하지 않는다.

 

BUT, 실제로는 데이터유지가 필요한 경우가 많다.

정보가 유지되지 않으면 매번 페이지 이동시 마다 로그인을 해야하거나 장바구니에서 상품을 선택했는데 구매페이지에서 상품의 정보가 사라지거나 하는 경우가 발생할 것이다.

이 때문에 Stateful 경우를 대처하기 위해서 쿠키와 세션을 사용한다.

 

서버와 클라이언트 통신 시 통신이 연속적으로 이어지지 않고 한번 통신 후 끊어지게 된다. 따라서 서버는 클라이언트가 누구인지 계속 인증을 해야하는데 이는 매우 귀찮고 번거로운 일이기도 하고 웹페이지의 로딩을 느리게한다.

이러한 문제점을 해결하는 방법이 쿠키와 세션이다. 

 

즉, 클라이언트와 서버 통신시 정보를 유지하기 위해 사용하는 것이 쿠키와 세션이다.

 

HTTP 쿠키

HTTP 쿠키는 서버가 웹 브라우저로 전송하는 작은 데이터 조각이다. 웹 브라우저는 이 조각을 저장했다가, 동일한 서버에 다시 요청을 할 때 이 쿠키를 같이 전송해준다. 따라서 서버에서 어떤 요청이 브라우저에서 들어왔는지를 판단할 때 사용하기도 한다.

 

쿠키는 세 가지 목적에서 사용된다.

• 세션 관리 : 서버에 저장해야할 로그인, 장바구니 등 정보 관리
• 개인화 : 사용자 선호, 테마, 추천 등
• 트래킹 : 사용자 행동 기록 및 분석

클라이언트에서 login을 하면(req), 서버가 set-cookie를 브라우저로 보내준다(res)

1. 클라이언트가 서버에 로그인 요청
2. 서버는 요청을 처리해서 응답 헤더에 set-cookie를 추가해서 응답.
3. 클라이언트는 그 다음부터 서버에 요청할 때, 쿠키를 헤더에 추가하여 요청
4. 서버는 쿠키를 보고 클라이언트에 응답.

사용예:인터넷쇼핑장바구니, 재방문시 아이디/비번 자동입력, 오늘 이창을 다시보지않기 등에 사용

 

이름, 값, 만료일, 경로정보 로 구성됨.

클라이언트에 총 300개의 쿠키 저장 가능.

하나의 도메인당 20개의 쿠키를 가질 수 있다

하나의 쿠키는 4 kb까지 저장 가능

Session

인증을 여러 번 하지 않는 이유 중 하나가 보안에 취약하다는 점 때문이다. 클라이언트가 서버로 "나 인증할테니 쿠키 줘"를 여러 번 하면 개인 정보를 보내야 하는데, 이 과정에서 탈취가 일어날 수도 있기 때문이다. 이를 위해 세션(Session)을 사용한다.

세션은 일정 시간 동안, 같은 사용자 상태를 일정하게 유지시키는 기술이다. 웹 서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장하는 것이다. 서버에 저장되기 때문에 사용자 정보를 노출하지 않을 수 있다.

• 클라이언트는 서버로 http 요청을 한다.
• 서버는 접근한 클라이언트의 쿠키를 확인해서, 클라이언트가 해당 SessionId를 보내왔는지 확인한다.
• 만일 보내지 않았으면, 서버는 새롭게 SessionId를 생성해서, 클라이언트에게 set-cookie값으로 SessionId를 보낸다.
• 그 다음부터 요청을 할 때, 전달받은 SessionId 쿠키를 자동으로 헤더에 추가해서 요청을 한다.
• 요청헤더의 SessionId값을 저장된 세션저장소에서 찾아보고 유효한지 확인 후에 요청을 처리하고 응답해준다.

사용예:화면이동해도 로그인이 풀리지 않고 로그아웃전까지 유지,세션을 체크하여 관리자/사용자 여부 판단 등등 .. 

 

쿠키와 세션차이

구분	쿠키  Cookie	세션 Session
저장위치	클라이언트(로컬)	서버
라이프사이클 (만료시점)	쿠키 저장시 설정 (브라우저가 종료되더라도 만료시점이 지나지않으면 자동삭제되지 않음)	브라우저 종료시 삭제 (기간 별도 지정 가능)
보안	로컬에 저장되어 탈취,변조 위험 존재. 비교적 취약	서버에 저장되므로 안전
속도	빠름	제공받은 세션아이디를 이용해서 서버에서 다시 데이터를 참조해야 하므로 비교적 느림

Then, 어떤경우에 쿠키를 사용할까? 

 

세션이 쿠키에 비해 보안이 높지만 쿠키를 사용하는 이유는 세션은 서버에 저장되어

서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당하다. 효율적인 자원관리를 위해 쿠키와 세션을 적절히 병행사용하여 효율적이고 빠른 웹사이트를 유지할 수 있다

출처: https://cheershennah.tistory.com/135 [Today I Learned. @cheers_hena 치얼스헤나]

https://ledgku.tistory.com/72 

https://velog.io/@kante/HTTP-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98

 

 

express실제 적용

npm i bycrypt 암호화

npm i express-session body-parser cookie-parse 쿠키 세션 더하기

쿠키사용

cookieParser, bodyParser, initialize session

 

 

Axios.defaults.withCredential과 useEffect로 리프레쉬시 get하기

백엔드에서 get api