- 학습일 : 2024.02.10
- 참고 URL
학습 내용
쿠키란
- 쿠키 : 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부
- 주로 웹 서버에 의해 만들어짐
- 서버가 HTTP 응답 헤더(header)의
Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장
- 서버가 HTTP 응답 헤더(header)의
- 무엇을 위해 존재하나? ⇒ 클라이언트 식별과 같은 인증에 가장 많이 쓰임
- 사용자가 로그인하면 서버는 HTTP 응답 헤더의
Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. - 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP
Cookie헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냅니다. - 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별합니다.
- 사용자가 로그인하면 서버는 HTTP 응답 헤더의
document.cookie는 쿠키에 접근할 수 있도록 해줍니다.
- 쓰기는 해당 쿠키의 값만 갱신합니다.
- 쿠키 이름과 값은 꼭 인코딩해야 합니다.
- encodeURIComponent(쿠키 이름 또는 값)
- 쿠키 하나가 차지하는 용량은 최대 4KB까지이고, 사이트 하나당 약 20여 개를 허용합니다(브라우저에 따라 다름).
쿠키 옵션:
path=/의 기본값은 현재 경로이고, 설정한 경로나 그 하위 경로에서만 쿠키 정보를 볼 수 있습니다.domain=site.com옵션에 아무런 값을 입력하지 않았다면 쿠키를 설정한 도메인에서만 쿠키 정보를 얻을 수 있습니다. 명시적으로 도메인 주소를 설정한 경우엔, 해당 도메인의 서브 도메인에서도 쿠키 정보를 얻을 수 있습니다.expires/max-age는 쿠키의 만료 시간을 정해줍니다. 이 옵션이 없으면 브라우저가 닫힐 때 쿠키도 같이 삭제됩니다.secure는 HTTPS 연결에서만 쿠키를 사용할 수 있게 합니다.samesite는 요청이 외부 사이트에서 일어날 때, 브라우저가 쿠키를 보내지 못하도록 막아줍니다. XSRF 공격을 막는 데 유용합니다.
추가 사항:
- 브라우저에 따라 서드 파티 쿠키를 허용하지 않을 수 있습니다. Safari는 기본적으로 서드 파티 쿠키를 금지합니다.
- 사용자가 EU 국가 거주자인 경우 GDPR을 준수해야 합니다. 따라서, 사용자 추적 시 반드시 동의를 얻어야 합니다.
학습 코드
/* 쿠키 쓰기 */
// // 특수 값(공백)은 인코딩 처리해 줘야 합니다.
// let name = "my name";
// let value = "John Smith";
// let add = "AddValue";
// // 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다.
// document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + "&&&" + encodeURIComponent(add);
// alert( document.cookie ); // my%20name=John%20Smith&&&AddValue
// =============================================================
/* domain */
//// 서브 도메인에서도 메인 도메인에서 생성한 쿠키 정보 얻어오기
// document.cookie = "user=111; domain=127.0.0.1";
// alert(document.cookie);
// =============================================================
/* expires와 max-age */
//// 지금부터 하루 후인 Expire 지정
// let date = new Date(Date.now() + 86400e3);
// date = date.toUTCString();
// document.cookie = "user=222; domain=127.0.0.1; expires=" + date;
// alert(document.cookie);
// max-age >>> 5초 지정
// 만료 기간을 5으로 지정하여 쿠키를 바로 삭제함
document.cookie = "user=333; max-age=1";
alert(document.cookie);쿠키의 정의
HTTP의 일종으로 사용자가 어떤 웹 사이트를 방문할 경우, 해당 사이트가 사용하고 있는 서버에서
사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
HTTP에서 클라이언트의 상태정보를 쿠키 형태로 클라이언트 PC에 저장하였다가 필요 시 정보를 참조하거나 재사용할 수 있다.
쿠키의 특징
Key-Value쌍으로 구성되어 있는 데이터 파일이다.- 쿠키이름, 쿠키값, 만료시간, 전송할 도메인명, 전송할 경로, 보안연결여부, HttpOnly여부로 구성되어 있다.
- 도메인 당 20개의 쿠키를 가질 수 있다.
- 하나의 쿠키는 4KB(= 4096 byte)까지 저장이 가능하다.
쿠키의 작동 방식
- 클라이언트가 서버에 로그인 요청
- 서버는 클라이언트의 로그인 요청의 유효성을 확인하고(아이디와 비밀번호 검사) 응답헤더에
set-cookie:를 통해 쿠키를 추가하여 응답 - 클라이언트는 이후 서버에 요청할 때 전달받은 쿠키를 자동으로 요청헤더에 추가하여 요청한다. 헤더에 쿠키값을 자동으로 추가하여 주는데 이는 브라우저에서 처리해주는 작업이다.
쿠키의 기한이 정해져 있지 않고 명시적으로 지우지 않는다면 반 영구적으로 쿠키가 남아있다.
정리
보안과 인증은 현시대에 있어서 매우 필수이다.
그렇기 때문에, HTTP 프로토콜의 특징이자 약점을 보호하기 위해 쿠키를 사용한다.
이외에도 쿠키는 주로 다음과 같은 목적으로 사용한다.
- 세션 관리(Session Management)
- 로그인, 사용자 닉네임, 접속 시간, 장바구니 등의 서버가 알아야할 정보들을 저장
- 개인화(Personalization)
- 사용자마다 다르게 그 사람에 적절한 페이지를 보여줄 수 있다.
- 트래킹(Tracking)
- 사용자의 행동과 패턴을 분석하고 기록
느낀점
보안과 인증은 현시대에 있어서 매우 필수이다. 또한, 개인의 특성에 맞추어 데이터를 보여주는 것 역시 중요한 요소이다.
그것과 관련된 기능을 수행하는 쿠키를 배웠다.
CS 지식에서도 핵심이고, 또 회사 면접에서도 자주 나오는 쿠키에 대해 더 자세히 배울 수 있어 좋았다.
#Software Engineer #IRISH