Cookie

웹사이트에서 쿠키란?

• 웹 서버가 생성해서 웹 브라우저에 전송하는 작은 데이터 파일을 말한다.
• 웹 브라우저는 전달 받은 쿠키를 사전 정의된 기간 또는 웹사이트에서 유저 세션의 길이만큼만 쿠키를 저장한다.
• 웹 브라우저는 이후의 유저 요청에 쿠키를 첨부한다.
• 쿠키는 웹사이트에 사용자 정보를 제공하여 웹사이트에서 사용자 경험을 개인화할 수 있게 해준다.
• 예를 들어, 전자상거래 웹사이트는 유저의 쇼핑 카트에 어떤 상품이 담겨있는지를 쿠키를 사용해 알 수 있다.
• 게다가 일부 쿠키는 보안을 위해 필수적이다. 예를 들어 인증 쿠키(authentication cookie)가 있다.
• 인터넷에서 사용하는 쿠키는 HTTP cookie 라고도 한다. 쿠키는 HTTP 프로토콜을 사용해 전달된다.

쿠키의 저장 위치

• 웹 브라우저는 유저의 기기에서 지정된 파일에 쿠키를 저장한다.
• 예를 들어 구글 크롬 웹브라우저는 “Cookies”라는 파일에 모든 쿠키를 저장한다.
• 크롬 사용자들은 개발자 도구를 열어 브라우저가 저장한 쿠키들을 볼 수 있다. (Application 탭 → 쿠키 메뉴)

쿠키의 사용 이유

유저 세션(User sessions)

• 쿠키는 웹사이트 활동을 특정 사용자와 연관시켜준다.
• 세션 쿠키는 사용자 세션을 사용자에 대한 연관 데이터 및 콘텐츠와 일치시킨다.
• 예시
  • 유저가 쇼핑몰에 로그인한다.
  • 로그인하면 웹사이트의 서버는 세션 쿠키를 생성해서 유저의 브라우저에 전달한다.
  • 세션 쿠키는 웹사이트가 유저의 계정 정보를 로딩하도록 한다.
  • 유저가 청바지 상품 페이지를 클릭하면 웹 브라우저는 청바지 상품 페이지에 대해 웹사이트에 HTTP 요청을 전달한다. 이 요청에는 유저의 세션 쿠키가 포함되어 있다.
  • 웹사이트도 세션 쿠키를 가지고 있기 때문에 유저가 누구인지 알아볼 수 있다. 따라서 새로운 페이지가 로딩되어도 다시 로그인할 필요가 없다.

개인화(Personalization)

• 쿠키를 사용하면 웹사이트가 사용자 액션 또는 사용자 기본 설정을 기억할 수 있어서, 웹사이트가 유저 경험을 커스터마이징할 수 있게 해준다.
• 예시
  • 유저가 쇼핑몰에서 로그아웃하면, 유저의 닉네임은 쿠키에 저장되어 웹 브라우저에 전달된다.
  • 다음에 같은 유저가 웹사이트에 접속하면, 웹 브라우저는 이 쿠키를 웹 서버에 전달한다.
  • 그러면 로그인 시 마지막으로 사용했던 유저 닉네임을 띄워준다.

추적(Tracking)

• 일부 쿠키는 사용자가 방문한 웹사이트를 기록하고 있다.
• 이 정보는 브라우저가 쿠키를 생성한 서버에서 콘텐츠를 로드해야 할 때, 해당 서버로 전송된다.
• 써드파티 추적 쿠키를 사용하는 경우, 이 프로세스는 브라우저가 해당 추적 서비스를 사용하는 웹사이트를 로드할 때마다 발생한다.
• 예시
  • 추적 쿠키를 유저의 브라우저에 전달했던 웹사이트를 이전에 방문한 적이 있는 경우 이 쿠키는 유저가 현재 청바지 제품 페이지를 보고 있다는 것을 기록할 수 있다.
  • 다음 번에 이런 추적 서비스를 사용하는 웹사이트를 방문하면 청바지 광고를 볼 수도 있다.
• 추적 쿠키를 사용하는 것은 광고뿐만은 아니다.
• 다양한 분석 서비스들 또한 사용자 행동을 익명으로 기록하기 위해 추적 쿠키를 사용한다.

쿠키의 종류

세션 쿠키(Session cookies)

• 세션 쿠키는 웹사이트가 유저 세션을 추적하는 것을 도와준다.
• 세션 쿠키는 유저 세션이 종료되면 삭제된다.
  • 예를 들어 유저가 웹사이트에서 로그아웃하거나 웹사이트를 종료하는 경우
• 세션 쿠키는 만료일을 가지고 있지 않아서, 세션이 끝나면 삭제되어야 한다는 것을 브라우저에게 알린다.

지속 쿠키(Persistent cookies)

• 세션 쿠키와 달리, 영구 쿠키는 미리 결정된 시간만큼 유저의 브라우저에 유지된다.
• 이 시간은 하루, 한 주, 몇 달 또는 몇 년이 될 수도 있다.
• 지속 쿠키는 항상 만료일을 포함하고 있다.

인증 쿠키(Authentication cookies)

• 인증 쿠키는 유저 세션을 관리하는 것을 도와준다.
• 유저가 브라우저에서 계정에 로그인할 때 인증 쿠키가 생성된다.
• 인증 쿠키는 유저 계쩡 정보를 쿠키 식별자 문자열과 연결하여 민감한 정보가 정확한 유저 세션에 전달되도록 한다.

추적 쿠키(Tracking cookies)

• 추적 쿠키는 추적 서비스에 의해 생성된다.
• 추적 쿠키는 유저 행동을 기록한다.
• 브라우저는 추적 서비스를 사용하는 웹사이트를 로드할 때 웹사이트의 추적 서비스에 이 기록을 전송한다.

좀비 쿠키(Zombie cookies)

• 좀비 쿠키는 삭제된 후에 재생성된다.
• 좀비 쿠키는 브라우저의 일반적인 쿠키 저장 위치의 외부에서 자신의 백업 버전을 생성한다.
• 이 백업 버전을 사용해서 제거된 후에도 브라우저에 다시 나타난다.
• 좀비 쿠키는 부적절한 광고 또는 공격자에 의해 사용되는 경우가 있다.

쿠키가 유저 개인 정보에 주는 영향

• 쿠키는 광고 목적으로 유저의 탐색 활동을 기록하기 위해 사용될 수 있다.
• 하지만 많은 유저들은 온라인 활동이 추적당하는 것을 원하지 않고, 추적 서비스가 수집한 데이터로 어떤 일을 하는지에 대해 잘 알지 못한다.
• 쿠키 기반 추적이 특정 유저의 이름 또는 기기와 연결되지 않은 경우, 유저의 브라우징 활동 기록을 실제 신원과 연결하는 것이 가능할 수도 있다.
• 이런 정보는 아주 다양한 경로로 사용될 수 있는데, 원하지 않는 광고, 유저 모니터링, 스토킹 등 다양하다.

• 개인 정보 보호법은 쿠키 사용을 관리한다.
• 따라서 유저는 웹사이트에서 쿠키를 사용하기 전에 “정보에 입각한 동의”를 제공해야 한다. 즉 유저는 웹사이트에서 쿠키를 사용하는 방식에 대해 통지를 받고 쿠키 사용에 동의해야 한다는 것이다.
• 이런 개인 정보 보호법 때문에 현재 많은 웹사이트에서 사용하는 쿠키를 검토하고 제어할 수 있는 쿠키 배너를 표시한다.

localStorage와 sessionStorage

localStorage 와 sessionStorage 는 브라우저 내에 키-값 쌍을 저장할 수 있게 해주는 웹 스토리지 객체이다.

localStorage

• localStorage 는 자바스크립트가 만료일을 설정하지 않고 웹 브라우저에 키-값 쌍을 저장할 수 있게 해주는 프로퍼티이다.
• localStorage 는 문자열만 저장할 수 있다.
• 배열이나 객체를 저장하려면 문자열로 변환해야 한다.
  • JSON.stringify() 메서드 사용
• 브라우저에 저장된 데이터는 브라우저 창이 닫힌 후에도 계속 저장되어 있다.

localStorage 저장 위치

• 구글 크롬에서 웹 스토리지 데이터는 유저 프로필의 서브폴더 안의 SQLite 파일 내부에 저장된다.
• 서브폴더의 위치는 아래와 같다.
  • 윈도우 - \AppData\Local\Google\Chrome\User Data\Default\Local Storage
  • 맥OS - ~/Library/Application Support/Google/Chrome/Default/Local Storage
  • 파이어폭스의 경우 webappsstore.sqlite 라는 SQLite 파일에 스토리지 객체를 저장한다. 이 파일도 유저 프로필 폴더에 위치한다.

Window.localStorage란?

• localStorage 메커니즘은 Window.localStorage 프로퍼티를 통해 사용할 수 있다.
• Window.localStorage 은 자바스크립트의 Window 인터페이스의 한 부분으로, DOM 도큐먼트를 포함하는 window를 나타낸다.
• Window.localStorage 는 읽기전용 프로퍼티로 데이터를 저장하기 위해 사용한 로컬 스토리지 객체에 대한 참조를 반환한다.

localStorage 제한 사항

localStorage 의 제한 사항이 존재한다.

• localStorage 에 민감한 유저 정보를 저장하지 않는다.
• 정보가 브라우저에만 저장되기 때문에 서버 기반 데이터베이스를 대체할 수 없다.
• localStorage 는 데이터 보호 수단이 없어서 보안이 떨어지므로 웹페이지에서 어떤 코드라도 접근할 수 있다.
• localStorage 는 동기적으로 동작한다.

sessionStorage

• sessionStorage 는 브라우저 내에 키-값 쌍을 저장할 수 있게 해주는 웹 스토리지 객체이다.
• sessionStorage 객체는 세션동안만 데이터를 저장한다. 그 의미는 브라우저가 닫히면 sessionStorage 에 저장된 데이터가 삭제된다는 의미이다.
  • 페이지 세션은 웹브라우저가 켜져 있는 동안 지속된다.
  • 새로운 탭에서 웹페이지를 열면 웹브라우저는 새로운 세션을 생성한다.
  • 동일한 URL로 여러 탭을 여는 경우, 웹브라우저는 각 탭에 대해 sessionStorage 를 분리해서 생성한다.
  • 따라서 다른 탭에 저장된 데이터에 접근할 수 없다.
  • 탭을 닫으면 웹브라우저는 세션을 종료하고 sessionStorage 의 데이터를 모두 삭제한다.
• sessionStorage 에 저장된 데이터는 페이지의 프로토콜을 따른다.
  • http 와 https 로 같은 사이트에 접근했을 때에도 서로 다른 sessionStorage 가 생성된다.
• sessionStorage 데이터는 서버 세션에 연결되므로, sessionStorage 데이터는 페이지가 서버로부터 요청된 경우에만 사용할 수 있다.
  • 서버 없이 로컬로 실행되는 페이지에서는 sessionStorage 를 사용할 수 없다.

sessionStorage 사용 이유

• 웹 애플리키에션의 유저 인터페이스 상태를 저장하기 위해 사용한다.
  • 유저가 페이지로 다시 돌아왔을 때, sessionStorage 에서 유저 인터페이스 상태를 복원할 수 있다.
• sessionStorage 는 히든 input 필드나 URL 파라미터를 사용하는 것 대신에 페이지 사이에 데이터를 전달하기 위해 사용할 수도 있다.

localStorage와 sessionStorage 비교

공통점

• 키-값이 반드시 문자열이어야 한다.
• 저장 제한 용량은 5MB 정도이다. 브라우저마다 상이하다.
• 파기되지 않는다.
• origin(프로토콜, 도메인, 포트)에 묶여 있다.

차이점

localStorage	sessionStorage
origin이 같은 탭, 창 전체에서 공유된다.	origin이 같은 브라우저의 탭에서 공유된다.
브라우저를 종료해도 데이터가 유지된다.	페이지를 새로 고침해도 데이터가 유지된다. 탭이나 브라우저를 종료하면 데이터가 삭제된다.

참고

• What are cookies? | Cookies definition
• localStorage in JavaScript: A complete guide
• JavaScript sessionStorage
• localStorage와 sessionStorage