쿠키(Cookie)와 세션(Session)

우리가 사이트 주소를 적을 때 사용하는 HTTP는 무상태성의 특징을 가지고 있다.
무상태성이란 상태를 가지고 있지 않은 것으로
로그인을 하고 창이 바뀌면 그 때 마다 유저가 누군지를 다시 인식시켜줘야 하는 번거로움이 있다.
이러한 점을 보완하기 위해 나온 것이 쿠키(Cookie)와 세션(Session) 이다.

쿠키 (Cookie)

쿠키는 서버에서 클라이언트에 데이터를 지속적으로 저장하는 방법이다.
ex. 쇼핑몰의 장바구니가 화면이 바뀌어도 품목을 따로 삭제 하지 않아도 유지되는 것
      로그인 시 '아이디 저장' 또는 자동로그인

그렇기 때문에 서버가 원한다면 클라이언트의 쿠키를 이용해서 데이터를 가지고 올 수 있다.
쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고, 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함한다.

이렇게 서버는 쿠키를 이용하여 데이터를 저장하고 다시 불러와 사용하는 것이 가능하지만 보안상의 문제로 데이터를 저장한 이후 특정 조건(쿠키옵션)들이 만족되어야 다시 가지고 올 수 있다.

쿠키옵션

'Set-Cookie':[
            'cookie=yummy', 
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=codestates.com'
        ]

위와 같은 형태로 지정할 수 있다

1. Domain
도메인은 많이 알려져 있는 데로 www.google.com 과 같으며 쿠키옵에서의 도메인은 google.com을 말한다
쿠키옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다.

2. Path
Path는 세부 경로로 서버가 라우팅 할 때 사용하는 경로를 의미한다.
http://www.localhost:3000/users/login 을 요청해야 한다면 Path는 /user/login이 된다. 이를 명시하지 않으면 기본적으로 /로 설정되어 있다.

Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠기를 서버로 전송할 수 있다.
예를 들어 Path가 /users로 설정되어 있고, 세부 경로가 /user/login이라면 쿠키 전송이 가능하다.
하지만 /posts/main 으로 전송되는 요청은 Path요청 (/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없습니다.

3. MaxAge or Expires
쿠키가 유효한 기간을 정하는 옵션이다.
이 옵션은 세션 쿠키와 영속성(지속성) 쿠키로 나뉜다.

세션 쿠키 : MaxAge(쿠키가 유효한 시간을 초 단위로 설정하는 옵션) 또는 Expires( 일정 시간 or 날짜를 미리 지정해두고 그 날짜를 초과하게 되면 쿠키 자동 파괴) 옵션이 없는 쿠키로 브라우저가 실행 중일 때 사용할 수 있는 쿠키
브라우저를 종료하면 해당 쿠키는 삭제된다 (ex. PC방)

영속성 쿠키 : 브라우저 종료 여부와 상관 없이 MaxAge or Expires에 지정된 유효시간만큼 사용가능한 쿠키

4. Secure
Secure옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다
Secure옵션이 false거나 없다면 프로토콜에 상관없이 http:// - 또는 https:// - 에 모두 쿠키를 전송할 수 있다

5. HttpOnly
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정한다.
해당 옵션이 true로 설정된 경우 자바스크립트로 쿠키에 접근이 불가하다.
명시되지 않은 기본으로 false가 지정되어 있는데, false인 경우 console에 document.cookie를 이용해쿠키 접근이 가능하다

6. SameSite
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션(GET, POST, PUT, PATCH ...)의 조합을 기준으로 쿠키 전송 여부를 결정하게 된다

• Lax : Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있다
• Strict : 단어 그대로 가장 엄격한 옵션으로, Cross-Origin 이 아닌 Same-Site인 경우에만 쿠키를 전송 할 수 있다
• None : Cross-Origin에 대해 가장 관대한 옵션으로, 항상 쿠키를 보내줄 수 있지만 쿠키 옵션 중 Secure 옵션이 필요하다.

서버에서 이러한 옵션을 지정한다음 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송하고
클라이언트에서 서버에게 쿠키를 전송해야 한다면 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버로 전송하게 된다.

세션(Session)

사용자가 인증에 성공한 상태.
예를 들어 로그인이 되어있는지 안되어있는지 확인해서 서버가 해당 유저가 인증(로그인)에 성공했음을 알고 있다면 유저는 다시 로그인을 할 필요 없다

서버는 일종의 장소에 세션을 저장한다. 세션이 만들어 지면 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데, 보통 클라이언트에 세션 성공을 증명할 수단으로 세션 아이디를 사용한다.

ex. 로그인이 성공한다면
세션 아이디가 담긴 쿠키는 클라이언트에 저장되어 있고, 서버는 세션을 저장한다.
그리고 서버는 그저 세션 아이디로만 인증여부를 판단한다.

 

쿠키와 세션

- 쿠키는 HTTP의 무상태성(stateless)한 것을 보완해주는 도구
- 클라이언트에 접속상태가 저장이 된다
- 서버의 부담을 덜어준다는 장점이 있지만 쿠키 그 자체는 인증이 안된다는 단점이 있다

- 세션은 접속 상태를 서버가 가진다(stateful)
  접속 상태와 권환 부여를 위해 세션아이디를 쿠키로 전달한다
- 서버에 접속상태가 저장이 된다
- 신뢰할 수 있는 유저인지 서버에서 추가로 확인이 가능하지만 하나의 서버에서만 접속상태를 가지므로 서버 분산에 불리하다 (토큰으로 보완)

아이폰의 경우 어느 사이트에 어느 기기(내 태블릿, 노트북, 핸드폰 등)이 로그인 되어있는지 확인할 수 있음 - 서버로 관리하기 때문