Http 요청의 특징 중 무상태성,비연결성이 있습니다. 만약 어떤 사이트에 로그인 정보를 전송하고 다른 페이지로 이동했을 때 로그인 상태가 어딘가에 저장되어 유지되는 것을 경험한 적이 있을텐데 이것을 가능하게 하는 것이 쿠키입니다.
What Cookie?
-
쿠키는 어떤 웹사이트에 들어갔을 때 서버가 클라이언트에 일방적으로 전달하는 작은 데이터입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며 유효 기간이 정해지면 브라우저가 종료되어도 인증은 유효 기간까지 유지되는 특징이 있습니다.
-
웹브라우저는 도메인에 http 요청을 보낼 때마다 쿠키를 함께 전달합니다. 서버는 클라이언트에 300개까지 쿠키를 저장할 수 있고 하나의 도메인당 20개의 값만 가질 수 있습니다. 하나의 쿠키값은 4KB까지 저장합니다.
-
쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다. 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다. 일반적으로 쿠키 허용은 사용자에게 묻지 않고 이루어지지만 동의를 구하는 경우도 존재합니다.
-
하지만 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없습니다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문입니다. 이런 조건들은 위 코드처럼 쿠키 옵션으로 표현할 수 있습니다.
쿠키 옵션의 종류
1. Domain
쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다.
요청해야 할 URL이 http://www.localhost.com:3000/users/login일 때 Domain은 localhost.com입니다.
2. Path
Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미합니다.
만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login 인 경우라면 여기에서 Path, 즉 세부 경로는 /users/login이 됩니다. 이를 명시하지 않으면 기본적으로 / 으로 설정되어 있습니다.
Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있습니다. 즉 Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/codestates 인 경우라면 쿠키 전송이 가능합니다.
하지만 /posts/codestates로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없습니다.
3. MaxAge or Expires
쿠키가 유효한 기간을 정하는 옵션으로 유효 기간을 설정하여 보안을 확보합니다.
MaxAge
- 쿠키가 유효한 시간을 초 단위로 설정하는 옵션
Expires
- 클라이언트의 시간을 기준으로 쿠키의 유효 기간을 설정하는 옵션
쿠키는 위 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠집니다.
세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키입니다. 브라우저를 종료하면 해당 쿠키는 삭제됩니다.
영속성 쿠키: MaxAge or Expires 옵션을 사용하여 유효 기간을 부여한 쿠키로 브라우저를 종료해도 유효 기간만큼 쿠키를 사용가능합니다.
4. Secure
사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션입니다. 만약 Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있습니다.
Secure 옵션이 없다면 프로토콜에 상관없이 모두 쿠키를 전송할 수 있습니다.
5. HttpOnly
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정합니다. 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가합니다.
명시되지 않는 경우 기본으로 false로 지정되어 있습니다. 만약 이 옵션이 false인 경우 document.cookie를 이용해 자바스크립트에서 쿠키접근이 가능하므로 XSS 공격에 취약합니다.
6. SameSite
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션(e.g. GET, POST, PUT, PATCH …)의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 됩니다.
lex
Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있습니다.strict
단어 그대로 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.none
Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.
이때 same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우를 말합니다. 이 중 하나라도 다르다면 Cross-Origin으로 구분됩니다.
서버에서 이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송합니다.
이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 됩니다.
쿠키의 구성요소
-
이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
-
값 : 쿠키의 이름과 관련된 값
-
유효시간 : 쿠키의 유지시간
-
도메인 : 쿠키를 전송할 도메인
-
경로 : 쿠키를 전송할 요청 경로
쿠키기반 인증
- 클라이언트가 서버에 요청을 보냅니다.
- 서버에서 쿠키를 생성합니다.
- 서버는 HTTP 헤더에 쿠키를 포함시켜 응답합니다.
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있습니다.
- 같은 요청을 할 경우에는 HTTP 헤더에 쿠키를 함께 보냅니다.
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답합니다.
쿠키가 사용되는 경우
- 로그인 상태 유지
- 사이트 환경설정
- 거주중인 지역에 대한 정보 및 컨텐츠
- 페이지 탐색 등등
What Session?
- 세션을 쿠키를 기반으로 하지만 유저 정보를 브라우저에 저장하지 않고 서버에서 관리합니다.
- 서버는 클라이언트를 구분하기 위해 세션 ID를 부여하여 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다. 접속 유효기간은 설정이 가능하여 일정 시간 응답이 없다면 정보를 초기화하도록 설정이 가능합니다.
- 데이터가 서버에 보관되기 때문에 쿠키보다 보안이 높지만 사용량에 따라 메모리 과부화가 올 수 있습니다.
세션기반 인증
- 클라이언트가 서버에 접속 시 서버는 세션 ID를 부여
- 클라이언트는 발급받은 세션 ID를 쿠키 데이터로 저장
- 클라이언트가 서버에 요청 시 세션 ID를 담은 쿠키를 함께 전달
- 서버는 세션 ID를 확인하여 클라이언트 정보를 불러오고 요청을 처리하여 클라이언트에 응답
세션 사용의 예
- 공공기관 및 금융기관 로그인 시 일정시간 동안 동작하지 않으면 로그아웃되는 팝업
쿠키와 세션의 차이점
- 쿠키와 세션은 비슷한 역할을 하지만 유저 정보가 저장되는 위치가 다른 점이 가장 큰 차이점입니다.
- 쿠키는 서버의 자원을 사용하지 않으며 세션은 서버의 자원을 사용합니다.
- 세션은 쿠키에 비해 보안성이 뛰어나지만 요청속도는 쿠키가 더 빠릅니다.
- 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋습니다.
