순서
1. 쿠키
2. 쿠키의 특징
3. 쿠키의 문제점
4. 웹 스토리지
5. 웹 스토리지의 특징
6. 웹 스토리지의 문제점
7. 각각의 사용처
8. 보안문제 해결방법
유튜브 [10분 테코톡] 🦄 디토의 웹스토리지 & 쿠키 의 내용
쿠키
브라우저에 저장되는 작은 크기의 문자열이고 최대 4KB를 저장할 수 있다
쿠키의 역사
-
쿠키는 웹 웹 프로그래머 루 몬틀리가 유닉스 프로그래머들이 사용하는 매직 쿠키라는 용어에서 영감을 얻어 사용되었다
-
쿠키가 처음 사용된 이유는 넷 스케이프 웹 사이트 방문자가 사이트를 방문했는지를 판단하기 위함이였다
- 이는 쿠키가 없다면 방문을 했는지 판단할 수 없다는 뜻이다
이는 HTTP의 특성인 비연결성, 무상태성 때문이다
클라이언트와 서버가 한번 연결을 맺은 뒤 요청과 응답이 끝나면 연결을 끊고, 상태를 유지하지 않기 때문에 사용자의 정보를 알 수 없다
이 때 넷스케이프는 사용자의 정보를 판단해야 했고 쿠키가 등장하게 된다
쿠키의 특징
-
서버에서 쿠키를 저장할 수 있어서 서버에서 주로 사용된다
-
요청시 Headers에 전송
-
만료 기간 지정 가능
Expires 또는 Max-Age를 통해 정할 수 있다
이런 만료기간에 따라 쿠키는 영구 쿠키와 세션 쿠키로 나누기도 한다
만료 쿠키(Persistent Cookie)
만료기간이 있고 만료 기간이 끝난 후 삭제된다
영구 쿠키(Session Cookie)
만료기간이 없고 브라우저 종료 시 삭제된다
쿠키는 또 퍼스트파티 쿠키와 서드파티 쿠키로 나누기도 한다
퍼스트파티 쿠키(First party Cookie)
같은 도메인에서 생성된 쿠키를 말하고, 서브 도메인도 포함된다
서드파티 쿠키(Third party Cookie)
다른 도메인에서 생성된 쿠키이다
이미지, 폰트, 아이프레임 등 다른 도메인으로 요청을 해야 하는 경우에 언제든지 생성될 수 있다
주로 광고 목적으로 사용된다
(사용자가 어떤 사이트를 방문했는지 알 수 있어서)
그래서 크롬에서는 서드파티 쿠키를 중단하겠다는 계획을 발표하기도 했다
(개인정보)
쿠키의 문제점
보안적인 문제로는
-
CSRF - 사용자의 권한을 이용한 공격
쿠키가 자동으로 전송 된다는 특징을 이용해 사이트에 로그인이 된 사용자에게 악성 스크립트를 실행시켜 비밀번호 변경, 결제 요청 등 악의적인 요청을 한다 -
XSS - 사용자의 민감한 정보 탈취(토큰)
원리는 악성 스크립트를 실행시켜 사용자의 민감한 정보들을 탈취하는 것이다
특징에서 보면
-
4KB의 부족한 저장용량
-
HTTP 요청 시 자동으로 모든 쿠키 전송
불필요한 트래픽 증가
쿠키는 이와같이 많은 문제점이 있다
웹 스토리지
위 쿠키의 문제점들을 해결하는 웹 스토리지가 HTML5에 등장했다
로컬 스토리지에 저장된 웹 스토리지
웹 스토리지의 특징
-
5MB의 저장 용량
-
요청 시 Headers에 전송하지 않음
(쿠키의 CSRF, 트래픽 문제 해결) -
문자열만 저장 가능
(직렬화를 통해 객체 저장 가능)
위와같은 특징으로 웹 스토리지는 쿠키의 문제점을 어느정도 해결 했다
웹 스토리지는 로컬 스토리지와 세션 스토리지가 있고 이 들은 동기적으로 실행된다
로컬 스토리지
도메인, 브라우저별로 독립된 스토리지를 사용하고 직접 삭제 시 삭제된다
세션 스토리지
탭별로 독립된 스토리지를 사용해서 탭 종료시 삭제된다
웹 스토리지 사용 시 고려할 점
- 웹 스토리지는 문자열만 저장할 수 있기 때문에 객체를 저장, 사용하기 위해서는 직렬화와 역직렬화 과정이 필요하다
- 버전에 따라 웹 스토리지를 지원하지 않을 수도 있고, 웹 스토리지기능이 비활성화가(예를들면 사파리 시크릿 모드) 될 수도 있다 = 에러 처리가 필수이다
웹 스토리지의 문제점
쿠키의 문제점은 잡았지만 완벽하지는 않다
-
쿠키와 마찬가지로 XSS에 취약하다
-
브라우저간 공유가 불가하고, 데스크탑과 모바일에서 다른 데이터를 볼 수도 있다
-
시간 설정을 할 수 없다
-
동기적으로 처리되기 때문에 큰 데이터를 다룰 때 조심해야 한다
쿠키와 웹 스토리지의 더 많은 정보
각각의 사용처
쿠키와 세션 스토리지와 로컬 스토리지의 각각의 특징을 고려해 사용하는 곳 예를 보면
-
쿠키는 기간 설정이 되고 서버 전송이 작은 용량 가능하기 때문에 n일 동안 보지 않기, 비로그인 장바구니 등이 있다
-
세션 스토리지는 탭 종료 시 삭제되어도 되는 데이터이기 때문에 이전 페이지 저장, 이전 스크롤 위치 저장 등이 있다
-
로컬 스토리지는 브라우저 종료 시 유지되기 때문에 사용자 설정 저장, 글 임시 저장 등이 있다
보안 문제 해결 방안
쿠키와 웹 스토리지 둘 다 보안문제가 있어서 민감한 정보는 저장하지 않는 것이 좋다
쿠키의 보안 문제 해결 방안에 대해 알아보면
-
XSS는 HttpOnly옵션을 적용(자바스크립트로 접근이 불가)하면 해결 할 수 있다
-
CSRF는 SameSite를 적용(같은 도메인의 요청에만 쿠키를 전송)하거나 Referer검증(요청 온 사이트의 도메인을 확인)
웹 스토리지의 보안 문제 해결 방안에 대해 알아보면
- XSS는 자바스크립트코드가 실행될 수 있는 코드를 작성하지 않는 것이다(예를들면 innerHTML, eval, document.write)
정리하며 더 궁금한 점, 느낀점 🙃
-
웹 스토리지와 쿠키와 세션이 있다는걸 대충 알았는데 이번 영상에서 쿠키와 웹 스토리지라는 제목으로, 중심으로 설명을 받으니 세션에 대한 개념이 햇갈려서 더 알아봐야겠다는 생각이 들었다
-
JWT라는 개념을 노마드코더 영상에서 본 것 같아서 JWT개념도 같이 알아봐야겠다는 생각이 들었다
-
쿠키와 웹 스토리지의 개념, 특징, 문제점들을 알아봤을 때는 별로 와닿지 않았는데 이런 각각의 특징들을 알고 사용되는 예시를 알아보니 직관적으로 이해할 수 있었다
