HTTP - Cookie

이번 포스트에서는 HTTP Cookie에 대해서 알아보려고 합니다.

 

쿠키에 대해서는 다들 한번쯤은 들어보신 적이 있을 것입니다.

그리고 일부 사이트에 들어가면 쿠키 허용에 대한 문구도 종종 볼 수 있죠.

이런 쿠키에 대해서 조금 적어보려고 합니다.

 

일단 쿠키를 왜 쓰는지, 어떤 방식으로 쓰이는지 먼저 알아봅시다.

일단 먼저 HTTP 특징 중 Stateless라는 특징이 있습니다.

Stateless(무상태)

• 클라이언트와 서버가 요청 & 응답을 주고 받으면 끝(연결 해제)
• 즉, 서버는 클라이언트의 이전 요청을 기억하지 못함
• 클라이언트와 서버는 서로 상태 유지를 하지 않음

이런 특징이 있는데

그러면 로그인 관련 동작을 진행하면 어떻게 될까요?

정말 간단하게만 보면 위의 3가지 그림으로 설명이 될 것 같습니다.

1. /main이라는 URL을 가지는 사이트로 접속하면 첫 페이지에서 '안녕하세요 손님'이라는 메시지를 볼 수 있다고 가정합니다.
2. 이제 /login으로 가서 로그인을 시도합니다. + user는 Tistory라는 값을 가진다고 해봅시다.
3. 로그인이 성공적으로 되어서 다시 /main으로 접속합니다. 이 때 '안녕하세요 Tistory님'라는 메시지를 볼 수 있다고 생각했을텐데..
4. 나오는 메시지는 '안녕하세요 손님'입니다.

왜 이럴까요?

• HTTP는 이전 요청을 기억하지 못합니다.
• 실제 로그인을 한 후 /main으로 갈 때 어떠한 정보도 넘기지 않습니다.
  그래서 로그인한지 알 수 없을 것입니다.
• 그래서 로그인을 했지만, 원하는 메시지를 볼 수 없는 상태입니다...
• 물론 이런 식으로 동작하는 웹사이트는 단 한군데도 없을 것입니다.

그러면 이런 문제가 생기지 않게 하기 위해서는 어떻게 해야할까요?

 

해결안으로 모든 HTTP요청에 사용자 정보를 포함해서 보내면 됩니다.

• GET /main?user=Tistory
• 이런 식으로 모든 요청에 사용자 정보를 포함해서 보냅니다.

..? 뭔가 이상하죠?

간단하게 설명하니깐 이름만 넣었지 실제 사이트에서는 사용자 정보가 굉장히 많을 것입니다.

그러면 이런 정보를 모두 포함해서 보내는 것은... 

개발자도 힘들고, 비효율적인 방법입니다.

 

HTTP 요청으로 해결하기 힘든 부분이 있기 때문에

그런 점을 보완하기 위해 '쿠키'가 탄생했다고 볼 수 있네요.(물론 다른 이유도 있을 것입니다!)

 

그러면 쿠키를 적용하면 어떻게 작동하는지 한번 알아봅니다.

1. /login으로 로그인을 시도하면 
2. 로그인이 되었다면 서버에서는 Set-Cookie 헤더를 사용해서 user=Tistory라는 값을 넣어서 보냅니다.
3. 이 값은 웹 브라우저로 넘어오고 웹 브라우저의 쿠키저장소에 해당 값이 저장됩니다.
4. 그런 후 다시 /main으로 접속하면..?
5. '안녕하세요 TIstory님'이라는 메시지를 볼 수 있게 될겁니다!

 

이렇게 쿠키가 작동하면서 로그인도 유지할 수 있고, 그렇습니다.

 

쿠키는 모든 요청에 쿠키정보가 자동으로 포함되어서 넘어갑니다.

• ex)
• GET /main HTTP/1.1
  Cookie: user=Tistory
• GET /board HTTP/1.1
  Cookie: user=Tistory
• 등등

 

set-cookie에는 어떤 값이 들어갈 수 있을까요?

set-cookie: sessionId=abcd1234; expires=Sat, 10-Jan-2020 12:00:00 GMT; path=/; domain=google.com; Secure

머 이런 식으로 사용할 수 있다고 합니다.

되게 많네요...

 

쿠키 사용처

• 사용자 로그인 세션 관리
• 광고 정보 트래킹
• 등등

 

특징

• 쿠키 정보는 항상 서버에 전송됨
• → 네트워크 트래픽 추가 유발
• 그렇기 때문에 너무 많은 쿠키 정보를 사용하면 속도가 떨어짐
• 최소한의 정보만 사용하기
• 서버에 전송하지 않고 웹 브라우저에서만 사용(웹 브라우저 내부에 저장)하려면
  → 웹 스토리지(LocalStorage, sessionStorage)를 사용해야 함
• 만약 민감한 정보를 쿠키에 저장했다면 그대로 이용될 수 있음
  → 보안에 민감한 데이터는 저장하면 큰일!(주민번호, 비밀번호 등 개인정보)

 

그럼 쿠키와 관련된 헤더를 알아봅시다.

• set-cookie: 서버에서 클라이언트로 쿠키 전달(응답 시)
• Cookie: 클라이언트가 받은 쿠키정보 저장 & HTTP 요청 시 서버로 전달

Cookie 헤더는 set-cookie를 통해 넘어온 정보를 저장하니

set-cookie에 대해서 알면 2개 다 이해할 수 있을 것 같습니다.

 

set-cookie 헤더 알아보기

1. 쿠키의 생명주기(expires, max-age)

• set-cookie: expires=Sat, 10-Jan-2020 12:00:00 GMT;
• 여기서 설정한 날짜가 지나가면 쿠키 정보는 삭제됨
• 사실 쿠키 정보를 무제한 갖고 있는 것은... 좀 그렇죠?
  그렇기 때문에 쿠키에는 생명 주기가 있습니다.
• set-cookie: max-age=3600(3600초)
• max-age는 초단위로 설정 가능
• 0 혹은 음수 값이 지정되면 쿠키정보 삭제 + 유효기간이 지나도 삭제됨

1-1. 쿠키의 종류

• 세션 쿠키: 만료 날짜 생략 + 브라우저 종료 시 까지 유지
• 영속 쿠키: 만료 날짜 입력 + 해당 날짜까지 유지

그래서 어떤 사이트는 브라우저를 종료하면 로그인이 종료되고,

어떤 사이트는 브라우저를 종료해도 로그인이 유지되는 경우가 있습니다.

각각 다른 쿠키 종류를 사용했기 때문에 그랬던 것 같습니다~

 

2. 쿠키의 도메인(domain)

• domain=.google.com (위에서 적은 예시.. ㅎㅎ)
• 만약 쿠키가 내가 접속하는 모든 사이트마다 생성된다면..?
  별로 좋지는 않을 것 같습니다.
• 그런 것을 방지하기 위해서 domain 존재

domain 사용 방법은 2가지가 있습니다.

2-1. domain=google.com

• domain 지정
• google.com 에서 쿠키 접근 가능
• dev.google.com 에서도 쿠키 접근 가능
• 명시한 도메인 + 서브 도메인에서도 접근 가능함

2-2. google.com

• domain 지정 생략
• google.com 에서 쿠키 접근 가능
• dev.google.com 에서는 쿠키 미접근
• 명시한 도메인에서만 접근할 수 있고, 서브 도메인에서는 접근 불가능

 

3. 쿠키의 경로(Path)

• path=/main
• path에 적힌 경로를 포함한 하위 경로 페이지에서만 쿠키에 접근
• 일반적으로 path=/ (루트) 지정
• ex)
  • path=/main
  • /main : 쿠키 접근
  • /main/sub1 : 쿠키 접근
  • /main/sub2 : 쿠키 접근
  • /main0 : 쿠키 접근 불가능

 

4. 쿠키의 보안(Secure, HttpOnly, SameSite)

4-1. Secure

• 쿠키는 http, https를 구분하지 않고 전송
• Secure 적용 시 https에서만 전송

4-2. HttpOnly

• XSS 공격 방지용
• 쿠키는 javascript에서도 접근 가능
• HttpOnly 적용 시 javascript에서 접근 불가능

4-3. SameSite

• XSRF 공격 방지용
• 요청 도메인과 쿠키에 설정된 도메인이 같은 경우에만 쿠키 전송
• 쿠키는 요청 도메인과 쿠키 설정 도메인이 달라도 전송이 가능함
• 기능이 적용된 지 얼마 안됨 -> 브라우저에서 어디까지 지원하는지 확인해야됨
• 필요한 경우 따로 찾아봐야 함...

 

이렇게 쿠키 옵션(?)에 대해서 알아봤습니다.

 

 

쿠키는 그냥 계속 말로만 듣거나 인터넷 어딘가에서 대충 듣기만 하고

실제로 이렇게 알아본 적은 처음이네요.

알아두면 괜찮을 것 같습니다.

 

 

 

이렇게 HTTP 쿠키에 대한 포스트를 마치겠습니다.

 

 

 

출처 : 모든 개발자를 위한 HTTP 웹 기본지식 by 김영한