.png)
나는 쇼핑을 좋아한다. 쇼핑몰에 들어갈 때마다 꼭 모달 창이 뜨는데, 그건 바로 쿠키 사용 동의 체크란이다. 볼 때마다 거슬리기도 하지만, 까먹고 끄거나 나중에 다시 들어갔을 때 로그인하지 않아도 장바구니에 내가 담은 물건들이 그대로 들어있으면 편리하기도 하다!
이번 시간에 쿠키를 배우자마자 딱 떠올라서 TIL로 헷갈리는 개념들을 정리하고자 쓰기로 마음먹었다. 따라서 이번에는 쿠키, 세션, 웹스토리지에 대해 알아보겠다.
먼저, 쿠키가 왜 필요한지 알아보자.🤓
HTTP 통신
HTTP request는 기본적으로 상태가 존재하지 않는다(Stateless). 한번 보내면 땡이라는 것이다. 따라서 서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없다.
하지만 웹 상에서 정보가 저장되지 않으면 안되는 일들이 대부분이다. 애써 장바구니에 물건들을 담아놨는데, 장바구니 페이지로 넘어갔더니 비어있는 상황을 만든다면.. 소비자들이 매우 화날것이다😅
따라서 우리는 웹이 사용자를 알아볼 수 있도록 만들어야 한다! 이때 쿠키 또는 세션, 웹스토리지가 필요한 것이다.
🍪 쿠키란?
클라이언트에서 저장, 관리하는 키-값 형태의 데이터이며, 브라우저를 닫아도 데이터를 유지할 수 있는 데이터이다. (만료 시간까지)
서버가 미리 클라이언트에 사용자를 추정할 만한 정보를 쿠키로 만들어 보내고,
서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 그것을 받아서 저장한다.
그 다음엔 서버가 클라이언트로부터 쿠키를 받아 사용자를 파악한다.
그림으로 알아보자⬇️
아래는 쿠키의 옵션들이다.
Expires : 쿠키 만료 날짜 지정
Secure : HTTPS에서만 쿠키를 전송한다
HttpOnly : JavaScript에서 쿠키에 접근을 못하도록 막는다. 쿠키 조작을 방지하기 위해 설정하는 것이 좋다.
Max-Age : 쿠키 수명을 정한다. 이때 Expires는 무시된다.
Domain : 도메인이 일치하는 요청만 쿠키가 전송된다
Path : Path와 일치하는 요청만 쿠키가 전송된다.
쿠키의 취약점
쿠키의 취약점은 보안이다.
먼저, XSS(Cross-Site Script)공격을 당할 수 있다.
또한 JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취할 수 있다. 쿠키냠냠😋
쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취당할 가능성이 있다. 하지만 쿠키에는 암호화 방법이 없다?
=> 이 문제는 HTTPS를 사용하면 해결된다!
세션(Session)
그렇다면 비슷해 보이는 session은 무엇일까?
방문자가 브라우저를 통해 웹 서버를 접속한 시점부터, 브라우저가 끝나는 시점까지를 하나의 상태로 보고, 그 상태를 유지시키기 위한 기술이다.
HTTP Session Id를 식별자로 사용자를 구분한다.
클라이언트는 HTTP Session ID를 쿠키 형태로 저장한다.
쿠키와 세션의 차이점
쿠키와 세션의 가장 큰 차이점은 데이터가 어디에 저장되느냐이다.
쿠키는 사용자의 pc에, 세션은 서버에 저장된다. 따라서 세션은 쿠키보다 느리다.
하지만 세션은 서버에서 처리하기 때문에 변질이나 갈취당할 우려가 적다.
세션 또한 문제가 있다.
세션은 서버에 파일로 저장되는데, 만약 사용자가 엄청 많아진다면?!
또는 서버가 2대 이상이라면?!
그래서 이러한 문제를 해결하기 위해 서버와 클라이언트 간 인증은 별도 토큰을 사용하고, 쿠키는 클라이언트 자체적인 지속적인 데이터 관리 용도로 많이 사용된다.
웹 스토리지
웹 스토리지는 클라이언트에 데이터를 저장하기 위한 새로운 방법으로,
HTML5 부터 등장했다.
웹 스토리지는 쿠키와 마찬가지로 key- value 방식으로 저장되고, 둘 다 클라이언트에 데이터를 저장한다.
하지만 쿠키는 약 4KB까지 밖에 저장공간을 이용하지 못하는 반면 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.
또한 쿠키와 달리 모든 HTTP요청에서 데이터를 주고받을 필요가 없다는 장점이 있다.
종류로는로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지
로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
즉, 브라우저를 종료해도 계속해서 데이터가 남는다.
저장했던 도메인과 이용하는 도메인이 다른 경우에는 접근할 수 없다.
세션 스토리지
새 창을 생성할 때 마다 개별적으로 저장되는 데이터를 관리한다.
즉, 브라우저를 닫는 순간 사라진다.
같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
느낀점😶
헷갈렸던 개념들이 이렇게 정리를 하니 조금 머리 속에 들어오는 느낌이다. 다른 개념들도 정리를 해야겠다!
