쿠키와 세션을 사용하는 이유: HTTP 프로토콜의 환경은 "connectionless, stateless"한 특성을 가지고 있다.
비연결성(connectionless): 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징.
무상태성(stateless): 통신이 끝나면 상태를 유지하지 않는 특징
서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다.
따라서 서버는 클라이언트가 누구인지 계속 인증을 해줘야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다.
그런 번거로움을 해결하는 방법이 바로 쿠키와 세션이다
쿠키(Cookie)
- 주로 서버에서 사용
- 요청 시 Headers에 전송(자동으로 전송 CSRF)
- HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. (요약: 서버가 사용자의 웹 브라우저에게 보내는 작은 데이터 조각. 인증, 개인화, 트래킹을 위해 쓰인다.)
HTTP란??
fetch API 로 쿠키 주고받기
axios로 쿠키주고받기
동작순서
사용자가 웹사이트에 접근 → 웹 서버는 쿠키를 생성한다. → 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 사용자에게 돌려준다. → 넘겨받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장) 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다. → 동일 사이트 재방문 시 사용자의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다.
개발자도구 Application 탭
Name: 쿠키이름
Value: 문자 데이터
Domain : 도메인을 명시하여 해당 도메인에서만 쿠키가 전송되게 할 수 있다.
Path : 경로를 명시하여 해당 경로의 요청에서만 쿠키가 전송되게 할 수 있다. 특정 디렉토리에서만 쿠키가 활성화되도록 하고싶을 때 사용한다. (하위 디렉토리에서도 활성화된다.)
Expires : 쿠키 만료 날짜를 알려줄 수 있다.
Max-Age : 쿠키 수명을 알려줄 수 있다. 이 옵션이 있을 경우 Expires이 무시된다.
Size: 쿠키는 최대 20개, 한 사이트의 최대 쿠키 크기는 4KB이다.
HttpOnly : 자바스크립트에서 쿠키에 접근할 수 없도록 한다. XSS를 막기위해 활성화하는 것이 좋다.
Secure: 웹 브라우저가 HTTPS를 사용하는 경우에만 쿠키를 전송할 수 있다.
참고링크
개발자도구 Network 탭
자바스크립트로 쿠키생성
참고링크
쿠키의종류
1. 영구쿠키: 만료기간이 존재하여 만료기간이 끝난 뒤 삭제된다. 브라우저가 종료되도 삭제되지 않는다.
2. 세션쿠키: 브라우저가 종료될때 삭제된다. (expires, max-age를 설정하지 않은 쿠키)
3. First Party Cookie: 같은 도메인에 존재 (예: chanki.com, m.chanki.com)
4. Third Party Cookie: 다른 도메인에서도 존재 (예: chanki.com, eunki.com)
쿠키의 문제점
1. CSRF(Cross-Site Request Forgery): 사이트 간 요청 위조. 쿠키가 자동으로 전송되는 특징을 이용해 사이트에 로그인이 되어 있는 사용자에게 악성스크립트를 실행시켜 비밀번호를 변경하거나 결제요청을 하는 등 악의적인 요청을 하는 것이다.
2. XSS(Cross-Site Scripting): 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다
- 주로 CSRF를 하기 위해서 사용되기 때문에 종종 CSRF와 혼동되는 경우가 있으나, XSS는 자바스크립트를 실행시키는 것이고, CSRF는 특정한 행동을 시키는 것이므로 다르다.
3. 불필요한 트래픽 증가: HTTP요청 시 자동으로 모든 쿠키를 전송하는 쿠키의 특징때문에.
위 문제점은 쿠키옵션을 설정해 해결할 수 있다. "HttpOnly, SameSite"
세션(Session)
세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
동작순서
사용자가 웹사이트에 접근 → 웹 서버는 사용자에게 사용자정보가담긴 session ID를 발급한다 → 사용자가 다시 서버에 요청할때, 발급받은 session ID를 서버에 전달하고 서버는 서버 메모리에 있는 ID와 사용자가 전달한 session ID를 매칭시켜 요청한 정보를 전달한다.
쿠키와 세션의 차이점
1. [속도] 쿠키는 세션보다 빠르다.
2. [저장 위치] 쿠키는 사용자의 브라우저에 저장, 세션은 서버 메모리에 저장.
3. [보안] 보안상 세션이 쿠키보다 우수하다.
4. [상태] 쿠키는 브라우저를 종료해도 만료기간에 의해 삭제되지만 세션은 브라우저를 종료하면 사라진다.
Web Storage
HTML5에는 데이터를 클라이언트로 저장할 수 있는 자료구조인 Web Storage 스펙이 포함되어 있다. Web Storage는 키/값(key-value) 형태로 데이터를 저장해서 key를 기준으로 조회하는 패턴이다. 그리고 영구 저장소(Local Storage)와 임시 저장소(Session Storage)를 따로 두어 데이터의 지속성을 구분할 수 있기 때문에 환경에 맞게 선택하여 사용할 수 있다.
사실 기존 웹 환경에서 사용하는 쿠키(Cookie)와 매우 유사하지만 쿠키의 단점을 극복하는 개선점 등이 추가되어 도입되었다. 하지만 여전히 웹 환경에서 쿠키는 유효하고 많이 쓰이고 있다. 웹 스토리지의 등장이 절대 쿠키를 배제한다는 의미는 아니다.
참고링크
댓글