HTTP(1/n)에서 HTTP 프로토콜은 무상태(statless)라고 했었습니다. 하지만 웹 페이지에도 페이지의 접근에 권한을 주기위해 로그인이라는 기능이 생기면서 로그인 했다는 상태를 기억해줄 필요가 생겼습니다.

로그인 했다는 상태를 기억해주는데는 카카오 로그인과 같은OAuth방식이나, JWT방식 등이 있지만 이 장에서는 HTTP를 정리하기때문에 로그인 상태관리를 쿠키를 통해 정리해보도록 하겠습니다.

쿠키

쿠키는 처음 생성시에는 서버에서 클라이언트로 전달되면서 클라이언트에 쿠키가 생성됩니다. 즉 서버에서 쿠키를 만들어서 클라이언트측에 맡겨둔것이죠. 왜? 서버는 클라이언트의 정보를 기억하기 싫기때문에 클라이언트에게 일종의 출입증을 내려준것입니다.

서버에서 Set-Cookie: user=uiseop이라는 헤더를 넘겨주면 클라이언트의 브라우저 내에 쿠키 저장소에 넘겨준 쿠키 정보를 저장하게 됩니다.

이 쿠키는 같은 도메인일 경우에만 보내지는 특성이 있는데 가령 우리가 Youtube에서 받아온 쿠키는 Youtube에서만 사용되는 것 입니다.

또 같은 도메인일 경우엔 저장한 모든 쿠키를 전부 자동으로 보내기때문에 쿠키가 너무 많으면 네트워크 트래픽이 추가로 유발된다는 단점이 있습니다. 그래서 꼭 필요한 정보들만 최소한으로 쿠키에 담아야 한다고 합니다.(서버에 넘기지 않고 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지{ LocalStorage, sessionStorage }를 참고합시다!)

생명주기

• 세션 쿠키
• 영속 쿠키

쿠키 스토리지의 용량은 4KB밖에 되지 않고, 민감한 정보의 경우 일정 시간동안만 쓸 수 있도록 타이머를 달아야 합니다. 쿠키에서의 타이머가 바로 expires와 max-age입니다.

> expires사용, "만료일"을 지정
Set-Cookie: expires=Sat, 26-Dec-2020 04:39:21 GMT
------------------------------------------------
> max-age사용, "타이머"를 지정
Set-Cookie: max-age=3600 (3600초 == 60분 == 1시간)

이렇게 타이머를 적용한 쿠키를 영속 쿠키라고 부르고, 만료시간을 생략하면 브라우저가 종료될때까지만 살아있는 세션 쿠키가 있습니다.

도메인

쿠키는 해당 도메인에 요청을 하면 자동으로 모든 쿠키가 보내진다고 했습니다. 하지만 도메인을 생략하면 완전 일치하는 도메인에 접근할때만 이 쿠키가 사용된다고 합니다.

Domain이라는 헤더를 추가하면 명시한 문서 기준 도메인 + 서브 도메인 포함해서 모든 도메인에 쿠키가 적용된다고 합니다.

Set-Cookie: .... domain=example.org

라고 도메인을 적용하면 example.org뿐만아니라 dev.example.org도 쿠기가 접근할 수 있다고 합니다.

경로

도메인 뿐만아니라 하위 경로에 대한 쿠키 적용범위를 설정할수도 있다고 합니다.

Set-Cookie: ... path=/ (일반적으로 루트로 지정)

일반적으로 사이트내 모든 경로에 쿠키를 적용하기때문에 path를 루트경로로 지정한다고 합니다.

보안

• Secure
• HttpOnly
• SameSite

Secure

쿠키는 HTTP, HTTPS를 구분하지 않고 전송합니다. 때문에 평문으로 된 쿠키정보를 악의적인 사용자가 탈취해서 해킹의 위험이 있습니다. 하지만 Secure옵션을 포함한다면 HTTPS인 경우에만 전송한다고 합니다.

HttpOnly

쿠키는 JS로 접근이 가능(document.cookie)하지만 이 옵션을 넣는다면 JS에서 접근이 불가능하다고 합니다. 이를 통해 XSS공격을 방지할 수 있고, HTTP 전송에만 사용된다고 합니다.

SameSite

요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키를 전송한다고 합니다. 이를 통해 XSRF공격을 방지할 수 있다고 합니다.