HTTP 통신과 쿠키(Cookie)

HTTP Request는 기본적으로 상태가 존재하지 않음
따라서 서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없다.
이 때 헤더에 쿠키를 담으면 서버가 Cookie를 읽어 어디서 온 것인지 알 수 있다.

1. Cookie란?

클라이언트에서 저장, 관리하는 데이터들. 브라우저를 닫아도 데이터를 유지할 수 있다.
서버에서 Set-Cookie를 응답해더로 내려주면 클라이언트는 받아서 저장한다.
클라이언트에서 자체적으로 조작할 수 있다. 각 상태에 수명을 정할 수 있다.

Set Cookie

Set-Cookie: 키-값; 옵션
응답 헤더에 담으면 브라우저가 알아서 저장한다.
각 데이터엔 여러 옵션이 존재한다.

• Expires: 쿠키 만료 날짜를 지정한다.
• Secure: HTTPS에서만 쿠키를 전송한다.
• HttpOnly: JavaScript에서 쿠키에 접근 못하도록 막는다.
• Max-Age: 쿠키 수명을 정한다. 이 때 Expires는 무시된다.
• Domain: 도메인이 일치하는 요청만 쿠키가 전송된다.
• Path: 패스와 일치하는 요청만 쿠키가 전송된다.

취약점

• XSS(Cross-Site Script) 공격을 당할 수 있다.
• JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취할 수 있다.
• 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다.

해결법: HTTPS

2. Session란?

HTTP Session Id를 식별자로 사용자를 구분한다.
클라이언트는 HTTP Session Id를 쿠키형태로 저장한다.
서버 자체적으로 기록하고 관리한다.

문제점

세션은 큰 문제점이 있어서 최근에는 인증용도로 사용하지 않는다.

• 세션은 서버에 파일로 저장된다. 만약 사용자가 엄청 많아진다면?
• 서버가 만약 2대라면 세션은 어떻게 관리해야 할까?

이제 서버와 클라이언트간 인증은 별도 토큰을 사용하고 쿠키는 클라이언트 자체적인 지속적인 데이터 관리용도로 많이 사용된다.

3. Web Storage란?

쿠키대신 Local Data를 관리하는 웹표준

• 클라이언트에 데이터를 저장하기 위한 새로운 방법

• HTML5부터 등장했다.

• 쿠키에서 하기 힘든 것들을 지원하기 위해 등장

• Local Storage와 Session Storage가 있다.

  Local Storage

  • 로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
  • 브라우저를 종료해도 계속해서 데이터가 남는다.
  • 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다.
  • 쿠키와 마찬가지로 Key-Value 형태로 저장한다.

  Session Storage

  • 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.
  • 브라우저를 닫는 순간 사라진다.
  • 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
  • 쿠키와 마찬가지로 Key-Value 형태로 저장한다.

// Cookie 관리는 String으로 한다. 불편하다.
document.cookie = 'key=value; key2=value2';

// 데이터를 저장한다.
localStorage.setItem('name', '종현');
console.log(localStorage.getItem('name')); // 종현

// 데이터를 지운다.
localStorage.removeItem('name');
// 데이터를 전부 지운다.
localStorage.clear();

// 데이터를 저장한다.
sessionStorage.setItem('name', '종현');
console.log(sessionStorage.getItem('name')); // 종현

// 데이터를 지운다.
sessionStorage.removeItem('name');
// 데이터를 전부 지운다.
sessionStorage.clear();

*** 이후 찾아볼 주제
IndexedDB: Transactional Local Database, 새로운 웹 브라우저 표준 인터페이스