쿠키와 세션 (Cookie and Session)

1. HTTP 프로토콜의 특성

서로 다른 특성을 가진 기기들이 통신을 할 수 있도록 미리 합의하여 정해놓은 통신 규약을 프로토콜이라 부르며, HTTP는 웹에서 사용하는 프로토콜이다.

Connectionless 프로토콜 (비연결 지향)

• 클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다.
• HTTP 1.1 버전에서 커넥션을 계속 유지하고, 요청(Request)에 재활용하는 기능이 추가되었다. (HTTP Header)에 keep-alive 옵션을 주어 커넥션을 재활용하게 한다. HTTP 1.1 버전에선 디폴트(default) 옵션이다.
• HTTP가 TCP위에서 구현되었기 때문에(TCP : 연결 지향, UDP : 비연결 지향) 연결 지향적이라고 할 수 있다는 얘기가 있어 논란이 있지만, 아직까진 네트워크 관점에서 keep-alive는 옵션으로 두고, 서버 측에서 비연결 지향적인 특성으로 커넥션 관리에 대한 비용을 줄이는 것이 명확한 장점으로 보기 때문에 비연결 지향으로 알아두었다.

Stateless 프로토콜

• 연결이 끊어지면 그 전의 상태 정보는 유지되지 않고 소멸된다(따로 기억되지 않는다).

쿠키와 세션을 사용하는 이유는 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다.

정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나,
상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생할 수 있다.
→ 따라서, Stateful 경우를 대처하기 위해 쿠키와 세션을 사용한다.
쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치이다.
쿠키는 '클라이언트(=로컬 PC)'에 저장하고, 세션은 '서버'에 저장한다.

2. 쿠키 (Cookie)

2-1. 의미

쿠키란, 클라이언트가 브라우저를 통해 특정 서버의 웹사이트에 방문했던 상태 정보를 기억하기 위해서, 클라이언트의 하드디스크 혹은 브라우저의 메모리에 저장하는 작은 정보 조각들을 의미한다.

2-2. 특징

• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.
• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
• 클라이언트에 총 300개의 쿠키를 저장할 수 있다
• 하나의 도메인 당 20개의 쿠키를 가질 수 있다.
• 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

2-3. 쿠키의 구성 요소

• 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키의 유지시간
• 도메인 : 쿠키를 전송할 도메인
• 경로 : 쿠키를 전송할 요청 경로

2-2. 종류

종류	설명
세션 쿠키 (메모리 쿠키, 브라우저 쿠키)	클라이언트가 사용하는 브라우저의 메모리에 저장되는 쿠키로, 한 세션 동안 유효하다. (세션의 설명은 아래 세션 관련 내용 참조) 즉, 유효 기간이 명시되지 않은 쿠키를 의미한다.
영구 쿠키	클라이언트의 하드디스크에 저장되는 쿠키로서, 명시된 유효 기간 동안 유효하고, 유효 기간이 지나면 삭제된다.

2-3. 장단점

장점	단점
정보를 서버가 아닌 클라이언트에 저장하기 때문에 서버의 부하를 줄일 수 있다.	서버보다 보안이 취약한 클라이언트에 정보를 저장하기 때문에 보안 위협에 취약할 수 있다.

2-4. 동작 방식

1. 클라이언트가 웹사이트에게 요청을 전송한다.

2. 서버에서 그 요청의 정보를 담은 쿠키를 생성한다(저장하지는 않는다).

3. 해당 쿠키를 응답의 set-cookie 헤더에 담아 클라이언트에게 전송한다.

4. 클라이언트는 전송받은 쿠키를 로컬 PC에 저장에 저장한다.

5. 이후 클라이언트가 동일한 웹사이트에게 다시 요청을 하면, 저장하고 있던 쿠키를 요청의 cookie 헤더에 담아 서버에게 전송한다.

6. 서버는 전송받은 쿠키를 통해 이전 상태 정보를 확인하고, 이에 맞게 클라이언트에게 적절한 방식으로 응답한다. 만약 업데이트해야 할 상태 정보가 있다면 변경된 쿠키를 응답의 set-cookie 헤더에 담아 클라이언트에게 전송한다.

---

2-5. 사용 예시

• "오늘 더 이상 이 창을 보지 않음" (더 이상 이 창을 보지 않을 거라는 사실을 JavaScript로 쿠키에 세팅하고, 이를 서버에게 매번 전송하면 서버는 이 창을 띄우지 않음)
• 쇼핑몰 장바구니 (내가 찜해 놓은 상품들의 목록을 JavaScript로 쿠키에 세팅하고, 이를 서버에게 전송하면 서버는 필요할 때 그 목록을 보여줄 수 있음)

2-6. 쿠키 보안 옵션 : Secure, HttpOnly

• 쿠키의 안전한 전송을 위해서 서버가 응답의 헤더(set-cookie 헤더)에서 설정해주는 옵션들을 말한다. 물론 브라우저에서 JavaScript를 이용하여 쿠키를 세팅할 때도 이러한 옵션들을 설정해줄 수 있다.
• Secure 옵션
  • HTTPS 프로토콜을 사용하는 경우에만 브라우저가 서버에게 전송하도록 하고 싶은 쿠키에게 주는 옵션이다.
  • 즉, HTTP 프로토콜을 사용하는 경우 Secure 옵션이 설정된 쿠키는 서버에 전송되는 요청의 헤더에 포함되지 않는다.
  • Secure 옵션을 설정하고 싶은 쿠키는 'KEY=VALUE; Secure' 형식으로 세팅한다.
  • 접속한 사용자를 식별하기 위해 사용하는 session_id 등의 쿠키는 Secure 옵션을 설정하는 것이 좋다. session_id만 탈취한다면 다른 사람이 나인 것처럼 흉내 내는 것이 가능하기 때문이다. HTTPS 프로토콜은 데이터를 전송할 때 기본적으로 암호화를 하기 때문에 HTTP 프로토콜보다 안전하다.
• HttpOnly 옵션
  • 브라우저에서 JavaScript로 접근할 수 없도록 하고 싶은 쿠키에 주는 옵션이다.
  • 즉, HttpOnly 옵션이 설정된 쿠키는 서버에 전송되는 것만 가능하다.
  • 이를 통해 XSS(Cross Site Scripting) 방식으로 특정 쿠키가 탈취되는 일을 예방할 수 있다.
  • Secure 옵션과 마찬가지로, session_id 등의 중요한 쿠키에는 이 옵션을 설정해주는 것이 좋다.
• SameSite 옵션
  • 다른 도메인에서의 쿠키 전송에 관한 보안을 설정하는 옵션이다.
  • None : 어떠한 도메인에서든지 쿠키 전송이 가능하다.
  • Strict : 오직 동일한 도메인에서만 쿠키 전송이 가능하다. (CSRF 방지)
  • Lax : Strict 설정에 일부 예외(HTTP GET 메소드, a 태그의 href, link 태그의 href 등)를 둔 것이다. (※ 크롬 80부터는 이것이 SameSite 옵션의 기본값이다.)

※ 다른 오리진(= 프로토콜 + 도메인 + 포트) or 다른 도메인에 대한 이슈

1. 브라우저의 CORS 정책은 다른 오리진에 대한 요청을 막음 :

2. 다른 오리진에 대한 요청 시에는 쿠키를 전송 혹은 수신할 수 없음 :

참고

3. JavaScript로 읽을 수 있는 쿠키의 범위 (HttpOnly 옵션이 false임을 가정) :

참고

4. 하위 도메인(sub.example.org)의 백 엔드 서버에서 응답 시에 쿠키를 설정해주는 방법 :

참고

5. 쿠키의 SameSite 옵션은 기본값이 Lax :

참고

3. 세션 (Session)

3-1. 의미

세션이란, 사용자가 브라우저를 통해 웹사이트에 접속한 시점부터 브라우저를 종료함으로써 연결을 끝내는 시점까지의 기간, 혹은 그 기간 동안 같은 사용자로부터의 일련의 요구를 하나의 상태로 식별하기 위한 정보를 의미한다.

3-2. 특징

• 웹 서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
• 웹 서버의 저장되는 쿠키(=세션 쿠키)
• 브라우저를 닫거나, 서버에서 세션을 삭제했을 때만 삭제가 되므로, 쿠키보다 비교적 보안이 좋다.
• 저장 데이터에 제한이 없다. (서버 용량이 허용하는 한에서)
• 각 클라이언트에 고유 Session ID를 부여한다. Session ID로 클라이언트를 구분해 각 요구에 맞는 서비스를 제공

3-2. 장단점

장점	단점
클라이언트보다 보안이 강한 서버에 저장이 되기 때문에 보안 위협에 덜 취약하다.	사용자가 많아지면 서버의 부하가 심해질 수도 있다.

3-3. 동작 방식

1. 클라이언트가 웹사이트에 처음 접속한다.

2. 서버는 접근한 클라이언트의 Request-Header 필드인 Cookie를 확인하여, 클라이언트가 해당 session-id를 보냈는지 확인한다.

3. session-id가 존재하지 않는다면 서버는 session-id를 생성해 응답의 set-cookie 헤더에 담아 클라이언트에게 전송한다.

4. 클라이언트는 전송받은 세션 ID를 쿠키로 저장한다.

5. 이후 클라이언트가 동일한 웹사이트에게 다시 요청을 하면 요청의 cookie 헤더에 세션 ID를 담아 서버에게 전송함으로써 하나의 세션이 유지되고 서버가 클라이언트를 식별할 수 있게 한다.

3-4. 사용 예시 (로그인 상태 유지)

• 세션을 사용하지 않으면 사용자는 매 페이지마다 아이디와 패스워드를 서버에 전송함으로써 인증을 완료해야 한다.
• 하지만 이것은 매우 귀찮은 일이고, 무엇보다 매번 개인정보를 요청으로 보내는 것은 보안에 상당히 취약하다.
• 그렇기 때문에 쿠키와 세션을 사용하여 로그인 상태를 유지하도록 한다. 방법은 다음과 같다.
  • 사용자가 로그인을 한다.
  • 해당 사용자의 세션이 생성되어 있지 않으면 우선 세션을 생성하여 세션 ID를 발급한다.
  • 세션에 사용자의 고유한 ID를 저장한다.
  • 세션 ID를 응답의 set-cookie 헤더에 담아 클라이언트에게 전송한다.
  • 이제 그 사용자는 해당 웹사이트의 어느 곳을 방문하든 세션 ID를 요청의 cookie 헤더에 담아 전송한다.
  • 이로 인해 서버는 접속한 사용자가 누구인지 쉽게 식별이 가능하며, 로그인 상태를 유지시켜줄 수 있다.
  • 만약 해당 사용자가 로그아웃을 하면, 해당 세션이 서버에서 삭제가 된다.

쿠키와 세션의 차이

• 쿠키와 세션은 비슷한 역할을 하며, 동작 원리도 비슷하다. 그 이유는 세션도 결국 쿠키를 사용하기 때문이다.
• 큰 차이점은 사용자의 정보가 저장되는 위치이다. 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용한다.
• 보안 면에서 세션이 더 우수하다.
• 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 session-id만 저장하고 그것으로 구분하여 서버에서 처리하기 때문에 비교적 보안성이 높다.
• 라이프 사이클은 쿠키도 만료기간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 정보가 유지될 수 있다. 또한 만료기간을 따로 지정해 쿠키를 삭제할 때까지 유지할 수도 있다.
• 반면에 세션도 만료기간을 정할 수 있지만, 브라우저가 종료되면 만료기간에 상관없이 삭제된다.
• 속도 면에서 쿠키가 더 우수하며,
• 쿠키는 쿠키에 정보가 있기 때문에 서버에 요청 시 속도가 빠르고
• 세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 낸다.

표로 보기

-	쿠키(Cookie)	세션(Session)
저장 위치	클라이언트(=접속자 PC)	웹 서버
저장 형식	text	Object
만료 시점	쿠키 저장시 설정(브라우저가 종료되도, 만료시점이 지나지 않으면 자동삭제되지 않음)	브라우저 종료시 삭제(기간 지정 가능)
사용하는 자원(리소스)	클라이언트 리소스	웹 서버 리소스
용량 제한	총 300개, 하나의 도메인 당 20개, 하나의 쿠키 당 4KB(=4096byte)	서버가 허용하는 한 용량제한 없음.
속도	세션보다 빠름	쿠키보다 느림
보안	세션보다 안좋음	쿠키보다 좋음

세션과 쿠키 사용 이유

세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고 속도가 느려질 수 있기 때문에 쿠키가 유리한 경우가 있다.

캐시(Cache)

캐시란?

• 웹 페이지 요소를 저장하기 위한 임시 저장소이다.
• 쿠키/세션은 정보를 저장하기 위해 사용된다.
• 캐시는 웹 페이지를 빠르게 렌더링 할 수 있도록 도와주고, 쿠키/세션은 사용자의 인증을 도와준다.

특징

• 캐시는 이미지, 비디오, 오디오, css, js파일 등 데이터나 값을 미리 복사해 놓는 리소스 파일들의 임시 저장소이다.
• 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공한다.
• 같은 웹 페이지에 접속할 때 사용자의 PC에서 로드하므로 서버를 거치지 않아도 된다.
  -이전에 사용된 데이터가 다시 사용될 가능성이 많으면 캐시 서버에 있는 데이터를 사용한다.
  -그래서 다시 사용될 확률이 있는 데이터들이 빠르게 접근할 수 있어진다. (페이지의 로딩 속도 ↑)
• 캐시 히트(hit) : 캐시를 사용할 수 있는 경우 (ex. 이전에 왔던 요청이랑 같은 게 왔을 때)
• 캐시 미스(miss) : 캐시를 사용할 수 없는 경우 (ex. 웹서버로 처음 요청했을 때)

쿠키/세션은 캐시

• 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것이다.
• 한번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데 이런 부분을 캐시를 지워주거나 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시하는 방법등을 이용할 수 있다.
  

참고
https://it-eldorado.tistory.com/9
https://dev-coco.tistory.com/61
https://interconnection.tistory.com/74