UX·UI - FrontEnd Dev. Story

프론트엔드/정보 용어

웹 브라우저 쿠키(cookie) / 세션(Session) 개념 차이점

클로이겅쥬 2021. 1. 11. 17:10
반응형

 

 

 

인터넷을 사용하다보면 쿠키 관련된 정보를 묻거나 설정하는거에 대해 많이 나온다.

그래서 자주 접하는 쿠키(cookie) / 세션(session)이 무엇인지 정리했다.

 

 

 

* 쿠키(영어: cookie)란 


:: 사용자가 어떠한 웹사이트를 방문할 경우,

그 사이트가 사용하고있는 서버를 통해 브라우저에서의 정보들을 사용자의 컴퓨터에 저장되는 작은 텍스트 파일.

 

ex) 웹 사이트에 접속할때마다 쿠키와 세션을 통해 로그인 상태를 유지할 수 있다.

 

쿠키는 사용자 웹 브라우저에 저장하며 데이터 형태는 Key, Value 형태로 String문이며, 4kb이상 저장 불가.

브라우저마자 저장되는 쿠키는 다르다(크롬, 익스플로러, 사파리, 파이어폭스 등 각각 다름)

 

 

 

 

 

1. 쿠키 종류

1) 기술적 쿠키

검색하는 주체가 사람인지 아니면 어플리케이션인지 이용자 구분 기능 수행

 

2) 분석 쿠키

어떤 종류 검색하는지, 많이 검색하는지, 시간, 언어 등의 정보를 수집

 

3) 광고쿠키

검색내용, 국가, 언어에 따라 광고 게재

 

 

 

 

2. 쿠키 용도

- 쿠키로인해 페이지 이동 시 로그인 다시 하지않고 사용자 정보를 유지 가능.

 

1) ID 정보 저장 > 로그인 상태 유지

2) 최근 검색한 정보 광고 추천

3) 쇼핑몰 장바구니 저장 기능

4) 하루 / 7일간 등 일정 기간 다시 보지않기 체크(쿠키 날짜 기록 계산)

 

 

* 브라우저가 종료되더라도 쿠키를 유지하고자하면 Permanent를 사용한다.

쿠키 생성 시 Expires or Max-Age 옵션을 추가한다.

 

*1) Expires : 쿠키가 만료될 날짜 지정

*2) Max-Age : 현재시간 기준으로 얼마동안 쿠키를 유지할지 지정

 

 

 

 

 


 

 

 

 

* 세션(Session)이란?


:: 인터넷을 사용하면 Google 페이지는 접속 시 마다 로그인 상태를 유지하고 있다.

이는 쿠키를 통해 사용자의 정보들을 쿠키에 저장하게 된다.

 

페이지 이동 시 쿠키를 통해 로그인 정보를 서버에 전달하고

서버에서는 해당 사용자를 식별하여 로그인 상태를 유지할 수 있다.

 

이 방식은 다만, 쿠키가 노출되는 보안 문제를 방지하기 위해 세션(Session)이 있다.

세션은 비밀번호 같은 인증 정보를 쿠키에 저장하지 않고 사용자의 식별자인 JSESSIONID(Session ID)로 저장한다.

서버에서는 인증 정보와 같이 이 ID에 해당하는 로그인 상태, 시간, 닉네임, 만료기한 등 정보를 저장한다.

서버는 해당 세션ID로 정보를 관리하기 때문에 훨씬 보안상 안전할 수 있다.

 

 

1. 세션 동작 원리

1) 클라이언트 > 서버 Request 요청(Session ID 미존재)

 

2) 서버 > 클라이언트로 Session ID 쿠키 값 체크 후, 없을경우 새로 생성해서 응답

 

3) 클라이언트는 전달받은 Session ID 값을 매 요청마다 Header 쿠키에 담아서 전달

 

4) 서버는 Session ID로 사용자 식별

 

5) 클라이언트가 로그인 요청 시 서버에서는 session을 로그인한 사용자 정보로 갱신하고 새로운 Session ID를 발급하여 응답

 

6) 클라이언트가 이후에 사용자의 Session ID 쿠키를 요청과 함께 전달하고 서버에서도 해당 로그인 사용자로 식별

 

7) 클라이언트 종료(브라우저 종료) 시 Session ID 제거, 서버에서도 Session 제거

 

 

 

 

 

 

2. 세션 특징

1) Session ID는 브라우저 단위로 저장되고, 브라우저 종료 시 제거

2) 로그아웃 시 새로운 대상으로 인식하여 새로운 Session 생성

3) 로그인 여부, 닉네임 등 관련 정보를 Session에 같이 담으면 해당 정보를 DB에서 매번 조회할 필요가 없어 효율성 증가

 

 

 

 

 

 

 출처 : lovefor-you.tistory.com/247

반응형