쿠키와 세션

개발 log·2021년 10월 24일
0

JS 지식

목록 보기
23/36
post-thumbnail

이 글을 쓰게 된 이유

브라우저의 저장소를 얘기하면 항상 빠지지 않고 언급되는 것이 쿠키와 세션 스토리지, 로컬 스토리지이다, 그리고 항상 결론은 쿠키는 보안이 좋지 않으니 웹 스토리지를 사용하라는 것이었다.

하지만 아직까지 쿠키가 많이 사용되는 것을 볼 수 있는데 그 이유가 궁금하여 쿠키에 대해 조사해 보았다.

이 글에서는 쿠키와 세션에 대해서만 다루고 다음 글에서 웹 스토리지를 다루며 결론을 말할 예정이다.

쿠키란?

서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일(최대 4KB)
HTTP에서 클라이언트의 상태정보를 클라이언트의 PC에 저장했다가 필요시 정보를 참조하거나 재사용할 수 있다.


쿠키의 등장 배경

쿠키는 HTTP 환경에서 상태를 유지하기 위한 기술이다.

HTTP의 stateless(무상태성)하고 conectionless(비연결성)하다는 특징 때문에

쿠키는 서버에서 저장해서 사용할 수 있기 때문에 주로 서버에서 사용
HTTP 요청시 Headers에 실려서 서버로 전송되는 특징이 있음
이 때 samesite=strict 옵션을 사용하면 같은 도메인에서 만들어진 쿠키만 전송하게 됨


영구 쿠키 vs 세션 쿠키

영구 쿠키(Persistent Cookie)세션 쿠키(Session Cookie)
만료 기간OX
삭제 시점만료기간이 끝난 후브라우저 종료 시

쿠키의 옵션

옵션 이름설명기본값
path=/mypathURL path의 접두사로 해당 경로 or 하위 경로에 있는 페이지만 쿠키에 접근 가능현재 경로
domain=site.com쿠키에 접근 가능한 domain 지정쿠키를 설정한 도메인
expires=Tue, 19 Jan 2038 03:14:07 GMT유효일자 옵션과거로 지정하면 쿠키 삭제
max-age=3600expire옵션의 대안, 쿠키 만료기간 설정가능(초)0or음수값 사용 시 쿠키 삭제
securesecure옵션이 설명된 경우 https에서 설명한 쿠키는 http에서 접근할 수 없음프로토콜을 따지지 않기 때문에 http, https 모두 쿠키를 읽을 수 있음
samesite크로스 사이트 요청 위조(XSRF)공격을 막기 위해 만들어진 옵션samesite=strict(기본값) 사이트 외부에서 요청을 보낼 때 절대 쿠키가 전송되지 않음, samesite=lax 외부에서 요청을 보낼 때 브라우저가 쿠키를 보내는 걸 막지만 안전한 HTTP메서드인 경우와 작업이 최상위 레벨 탐색에서 이루어질 때(브라우저 주소창에서 URL을 변경하는 경우) 쿠키가 전송 됨

쿠키의 동작 순서

  1. 클라이언트가 페이지 요청
  2. 웹 서버가 쿠키 생성
  3. 쿠기에 정보를 담아 HTTP화면을 돌려줄 때 클라이언트에게 반환
  4. 넘겨 받은 쿠키는 클라이언트가 가지고 있다가 서버에 요청할 때 요청과 함께 쿠키 전송
  5. 동일 사이트 재방문 시 클라이언트의 PC에 해당 쿠키가 있는 경우 요청 페이지와 함께 쿠키 전송

쿠키 사용 예시

  1. 방문했던 사이트에 재방문 시 아이디와 비밀번호 자동 입력
  2. 팝업창에서 n일 동안 이 창을 다시 보지 않기 체크
  3. 스크롤 값 저장


세션이란?

사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시간동안 같은 사용자(브라우저)로부터 전달받는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술

즉, 사용자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 그것을 세션이라 한다.


세션 특징

  1. 웹 서버에 상태를 유지하기 위한 정보 저장
  2. 웹 서버에 저장되는 쿠키
  3. 브라우저를 닫거나 서버에서 세션을 삭제했을때만 삭제가 되므로 쿠키에 비해 보안은 좋다.
  4. 저장 데이터가 쿠키보다 훨씬 크다(서버용량에 의해 결정됨)
  5. 클라이언트의 고유 session-id를 부여

세션의 동작 순서

  1. 클라이언트가 페이지 요청
  2. 웹 서버는 접근한 클라이언트의 Request-Header 필드인 Cookie를 확인하여 클라이언트가 해당 session-id를 보냈는지 확인
  3. session-id가 존재하지 않는다면 서버는 session-id를 생성해 클라이언트에게 반환
  4. 서버에서 클라이언트로 돌려준 session-id를 쿠키를 사용해 서버에 저장
  5. 클라이언트는 재접속 시 해당 쿠키를 이용하여 session-id값을 서버에 전달

세션 사용 예시

  1. 화면이 이동해도 로그인이 풀리지 않고 로그아웃하기 전까지 유지

세션을 쓰면 되는데 쿠키를 쓰는 이유

세션이 쿠키에 비해 보안이 높지만 쿠키를 사용하는 이유는 세션은 서버에 저장되고 서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당하다.
이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여 서버 자원의 낭비를 방지하며 웹 사이트의 속도를 높일 수 있다



쿠키와 세션의 차이

  1. 세션도 쿠키를 사용하기 때문에 동작원리가 비슷하다.
  2. 가장 큰 차이점은 사용자의 정보가 저장되는 위치이다 쿠키는 서버의 자원을 전혀 사용하지 않고 세션은 서버의 자원을 사용한다.
  3. 보안면에서는 세션이 더 우수하고 요청 속도면에서는 쿠키가 더 우수하다, 세션은 서버의 처리가 필요하기 때문이다.
  4. 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어 보안에 취약하지만 세션은 쿠키를 이용해서 session-id만 저장하고 그것으로 구분하여 서버에서 처리하기 때문에 비교적 보안성이 좋다.
  5. 세션은 브라우저가 종료되면 삭제되며 쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 정보가 남아 있을 수 있다, 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때까지 유지된다.

참조 사이트1
참조 사이트2

profile
프론트엔드 개발자

0개의 댓글