쿠키란?
🍪 어떤 웹사이트에 들어갔을 때, 서버에서 일방적으로 클라이언트에게 전달하는 작은 데이터
- 서버가 웹 브라우저에 영속성있는 정보를 저장하고 불러오는 수단
- 해당 도메인에 대한 쿠키가 있으면, 웹 브라우저는 그 도메인에 요청 시 쿠키를 함께 전달한다.
- 따라서 '쿠키를 이용한다'라는 것은 단순히 서버-> 클라이언트의 쿠키전송이 아니라 클라이언트-> 서버로 다시 전송도 포함함
즉, 서버가 클라이언트에 특정 데이터를 저장하고 이를 다시 불러와 사용할 수 있다.
But, 이는 아무때나 가능한 것이 아니라 저장 후 특정 조건들이 만족되어야 할 수 있다.
쿠키 옵션
위에서 말한 특정 조건은 다음과 같이 쿠키 옵션으로 표현할 수 있다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=codestates.com'
]1. Domain
- 쿠키 옵션에서 도메인은 포트 및 서브도메인 정보, 세부경로를 포함하지 않음(서브도메인: www과 같은 부분들)
Ex) URL이 http://www.localhost.com:3000/users/login 라면 Domain은 localhost.com이 된다.
- 쿠키 옵션에 도메인이 존재한다면 쿠키의 도메인과 서버의 도메인이 일치해야 쿠키를 전송할 수 있음(아니면 네이버의 쿠키가 구글로 보내질 수도 있음)
2. Path
- Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다
Ex) URL이 http://www.localhost.com:3000/users/login 라면 Path는 /users/login이 된다.
-
Path를 명시하지 않으면 기본적로 / 으로 설정된다.
-
설정된 경로의 하위 경로로 요청을 해도 서버에 전송이 가능하다.
Ex) Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/codestates 인 경우라면 쿠키 전송이 가능함.
3. MaxAge or Expires
-
쿠키가 유효한 기간을 정함 (보안 측면에서 중요)
-
MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션 (시한부 옵션)
-
Expires은 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정 (클라이언트 시간 기준.)
-
해당 옵션의 유무에 따라 세션 쿠키와 영속성 쿠키로 나뉨
- 세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키. 브라우적 실행중일 때 사용가능한 임시 쿠키. 브라우저를 종료하면 해당 쿠키는 삭제됨.
- 영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키
4. Secure
-
사용 프로토콜에 따른 쿠키 전송여부 결정
-
true로 설정되었을 경우, HTTPS를 이용하는 경우만 쿠키 전송 가능
5. HttpOnly
-
자바스크립트로 브라우저의 쿠키에 접근 여부를 결정
-
true면 접근이 불가능
-
기본은 false값이며, 이때에는 XSS 공격에 취약함
6. SameSite
- CORS 요청을 받은 경우, 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정
- lax: CORS 요청이면 GET 메소드에 대해서만 쿠키 전송 가능
- Strict: same-site인 경우에만 쿠키 전송 가능
- none: CORS요청에 언제나 쿠키 전송 가능. 단, 이 경우 Secure 옵션이 반드시 필요
(same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우)
서버에 이러한 옵션을 지정하고 클라이언트로 쿠키를 처음 전송하면, 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다. 이후 클라이언트에서 다시 전송하게 되면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 전송한다.
단, 쿠키는 기본적으로 단기간동안 유지되고, HttpOnly 옵션을 사용하지 않았다면 JS를 이용한 접근이 가능하기 때문에 여기에 민감한 정보를 담는 것은 위험하다.
