bkdragon's log

[Cookie] 내가 만든 Cookie 본문

concept

[Cookie] 내가 만든 Cookie

bkdragon 2023. 7. 26. 23:39

 

Cookie란?

쿠키는 특정 웹사이트를 방문했을 때 그 웹 사이트가 사용하는 서버를 통해 로컬(브라우저)에 저장되는 작은 데이터이다.

 

Cookie가 필요한 이유?

맛있으니까

HTTP 통신은 무상태성이라는 특성을 가지고 있다. 풀어서 설명하면 통신간의 상태 정보를 저장하지 않는다. 이로 인해 서버의 자원은 많이 절약되지만 매 요청마다 새로운 사용자로 인식하기 때문에 계속 로그인을 해야하거나 장바구니에 담긴 상품이 사라지는 등의 부작용이 생길 수 있다. cookie는 이러한 부작용을 해결할 수 있다.

 

Cookie가 저장되는 과정

클라이언트가 서버에 어떠한 요청을 하게 되면 서버는 쿠키를 생성하고 생성한 쿠키를 응답 헤더에 넣어서 보낸다. 응답을 받은 후 로컬(브라우저)에 쿠키를 저장한다. 사용자 인증이나 검색 기록과 같은 개인 정보를 저장한다.

 

특징

ㅋㅋㅋ 나는 바삭한거보단 쫄깃한 쿠키를 선호하는 편이다. 

 

 

다시 돌아와서 Cookie는 다음과 같은 특징을 지닌다.

  1. key, value, 만료 시간, 전송할 도메인명, 전송할 경로, 보안연결 여부, HttpOnly여부 등으로 구성되어있다.
  2. 클라이언트에 총 300개의 쿠키를 저장할 수 있다.
  3. 도메인 당 20개의 쿠키를 가질 수 있다.
  4. 하나의 쿠키는 4kb까지 저장 가능하다.

 

보안

cookie는 보안에 취약하다. 브라우저에 저장되는 면도 그렇고 요청을 보낼 때도 같이 들어가기 때문에 탈취를 당할 가능성이 있다.

 

  1. XSS(Cross-Site Scripting) 공격, 자바스크립트를 사용해 공격하는 방법이다. document.cookie 로 쿠키 값을 탈취할 수 있다.
  2. 스니핑 공격, 네트워크 중간에서 남의 정보를 도청하는 해킹 유형 중 하나이다. 쿠키는 매번 요청마다 주고 받으면서 업데이트 되는데 이때 스니핑 공격을 당할 가능성이 있다.

 

 

지금까지의 정보를 종합해보면 cookie는 서버로 부터 받는 보안에 취약한 데이터라고 할 수 있겠다. 간혹 특정 웹사이트에 접속할 때 Cookies Settings라는 문구와 함께 안내창이 나오는 걸 확인 할 수 있다. 이는 보안에 취약한 Cookie에 중요한 정보를 담아도 될지 확인하는 것이라고 보면 된다.

보안에 취약한 걸 알고도 그냥 둘 리가 없다. cookie의 특징에서 보안연결 여부와 HttpOnly 여부가 있었다고 했다. 각각 secure 옵션과 HttpOnly 옵션이다.

 

Secure

Secure 옵션을 적용하면 , HTTPS를 사용할 때만 전송이 된다. (HTTPS는 암호화 프로토콜을 사용하여 통신을 암호화 한다.)

 

HttpOnly

통신 과정에서만 쿠키를 사용할 수 있게 해준다. document.cookie로 접근할 수 없게 된다.

 

 

아래의  이미지는 google.com 에 접속한 뒤 개발자 도구를 통해 cookie를 확인한 이미지이다. httpOnly 옵션과 Secure를 확인할 수 있다. Secure가 체크된 cookie의 값은 암호화 되어있는 것도 볼 수 있다.

 

근데 SameSite라는 것이 있다??

 

SameSite

SameSite 옵션은 CSRF 문제로 인해 생겨난 옵션이다. CSRF 공격 과정을 설명하면 다음과 같다.

  1. 유저가 웹 사이트에 로그인 하여 쿠키를 발급 받는다.
  2. 공격자가 같은 도메인을 가지는 가짜 HTML 페이지 주소를 유저에게 전달한다.
  3. 가짜 HTML 페이지에는 아래와 같은 태그가 있다.
  4. <img src="https://travel.service.com/travel_update?.src=Korea&.dst=Hell">
  5. 유저가 가짜 페이지를 열면 이미지 태그의 url로 요청을 보내고 이때 쿠키가 같이 보내진다.

이러한 공격이 발생할 수 있기 때문에 SameSite 는 Cross-site로 전송하는 요청의 경우 쿠키의 전송에 제한을 둔다.

 

None: SameSite 가 탄생하기 전 쿠키와 동작하는 방식이 같다. None으로 설정된 쿠키의 경우 크로스 사이트 요청의 경우에도 항상 전송된다.

Strict: 가장 보수적인 정책. Strict로 설정된 쿠키는 크로스 사이트 요청에는 항상 전송되지 않는다

Lax: Strict에 비해 상대적으로 느슨한 정책. Lax로 설정된 경우 몇 가지 예외적인 요청에는 cookie가 전송된다. 이미지 또는 프레임 로드 요청과 같은 사이트 간 요청에는 쿠키가 전송되지 않지만 사용자가 주소창에 직접 입력하는 top-level navigation, a태그와 같은 직접적인 이동에만 쿠키가 전송된다.

 

 

Chrome에서는 기본 값이 Lax라고 한다.

'concept' 카테고리의 다른 글

Promise 병렬로 처리하기  (1) 2023.07.29
[Redux] Redux Toolkit  (0) 2023.07.27
JavaScript 엔진이 await를 만났을 때  (0) 2023.07.18
Flux 패턴  (0) 2023.07.17
[TEST] MSW와 통합 테스트  (0) 2023.07.12