쿠키

쿠키

서버에서 클라이언트에 일방적으로 데이터를 넣는데 이를 '쿠키'라고 한다.

쿠키를 통해 서버는 사용자를 기억할 수 있고 브라우저에 정보를 저장하고 불러올 수 있는 수단이다.

단, 쿠키는 브라우저에서 얼마든지 확인하고 삭제하는것이 가능하므로 비밀번호같은 중요한 정보는 넣지 않는 것이 좋다.

사용자가 삭제하지 않는 한, 사라지지 않으므로 장기간 보존해야 하는 정보 저장에 적합(로그인유지, 장바구니 등등)

쿠키 전달 방법

https://dawnisthm.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98

1. 서버가 응답 헤더의 Set-Cookie 라는 프로퍼티에 내용을 저장하고 response를 보낸다.
2. Cookie가 담긴 response를 받은 클라이언트는 응답헤더의 Set-Cookie를 확인한다.
3. 요청시 Cookie의 값을 서버에 보낸다.

=> 서버가 한번 쿠키를 저장하면 그 이후 사용자가 해당 웹사이트를 이용할때 매 요청시 쿠키가 요청헤더에 담겨서 함께 전송된다.

쿠키 옵션

쿠키 옵션

1. Domain :

도메인정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송한다.

만약 www.naver.com에서 설정한 쿠키는 www.google.com에서 얻을 수 없다. -> 당연한소리!

쿠키옵션에서 도메인은 포트, 서브도메인, 세부 경로를 포함하지 않는다.

만약 요청해야 할 URL이 http://www.localhost.com:3000/users/login이라면, 도메인은 localhost.com 이다.

2. Path :

Path경로나 Path경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다. Path는 절대경로이고 기본값은 현재경로이다.

만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login이라면, 세부경로는 /users/login이다.

명시하지 않으면 기본으로 /으로 설정되어 있다.

Path 옵션의 특징은 세부경로를 만족한다면 Path가 추가로 존재해도 쿠키를 서버에 전송할 수 있다.

Path가 /users 이고 요청하는 세부 경로가 /users/login이라면 쿠키 전송이 가능하지만 /user/login으로 전송되는 요청은

Path 옵션을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다.

3. MaxAge or Expires

쿠키가 유효한 기간을 정하는 옵션이다.

MaxAge는 앞으로 몇 초 동안 쿠키가 유효한지 설정하는 옵션이다.

Expires도 비슷하지만 언제까지 유효한지 Date를 지정한다. 시간 기준은 클라이언트 시간이다.

이후 지정된 시간이 초과되면 쿠키는 자동으로 파괴된다.

두 옵션이 지정되지 않았다면 브라우저의 탭을 닫았을때 쿠키가 제거된다.

4. Secure

• true : HTTPS 프로토콜을 이용하여 통신하는 경우에만 쿠키를 전송할 수 있다.
• false : HTTPS 프로토콜을 이용하지 않아도 쿠키 전송 가능

5. SameSite

Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정하게 된다.

• Lax : Cross-Origin 요청이면 GET 메소드에 한해서 쿠키를 전송할 수 있음.
• Strict : Cross-Origin 이 아닌 same-site 인 경우에만 쿠키를 전송할 수 있다.
• None : 항상 쿠키를 보내줄 수 있다. 다만 쿠키 옵션 중 Secure 이 true인 경우만 가능하다.

이때 same-site는 요청을 보낸 Origin과 서버의 도메인이 같은 경우를 말한다.

6. HttpOnly

자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정한다.

• true : 자바스크립트에서 쿠키에 접근이 불가능하다.
• false : 기본값. 자바스크립트에서 쿠키에 접근이 가능하므로 XSS 공격에 취약해짐.

쿠키 옵션 사용법

위의 쿠키 옵션들을 지정한 후 서버에서 클라이언트로 쿠키를 처음 전송하게 되면 클라이언트로 보내주는 응답 헤더에 Set-Cookie 라는 프로퍼티에 쿠키를 담아 전송한다.

이후 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠리를 전송하게 된다.

쿠키를 이용한 상태 유지

쿠키를 매개체로 서버와 클라이언트는 정보를 주고받으면서 Stateless한 http통신을 Stateful하게 유지할 수 있다.

예를들면 로그인을 한 상태에서는 로그인 한 상태라는 정보를 쿠키에 담아 서버와 클라이언트가 정보를 주고받는다.

하지만 모든 쿠키를 삭제하면 로그인 한 상태라는 정보도 삭제되면서 다시 원래대로(로그아웃) 되돌아온다.

쿠키는 오랜시간 유지되고 자바스크립트를 통해 쿠키에 접근이 가능하므로 쿠키에 민감한 정보를 담지 않아야 한다

---

서드 파티 쿠키

사용자가 방문 중인 도메인이 아닌 다른 도메인에서 설정한 쿠키이다.

광고회사가 사용자의 경로를 추적하고 맞춤광고를 제공하기 위해 사용한다.

서드 파티 쿠키를 비활성화 하면 추적을 막을 수 있다.

아래 잘 설명한 예시가 있다.

https://ko.javascript.info/cookie#ref-93