쿠키

쿠키란?

브라우저에 저장되는 작은 크기 문자열 ( 4kb )

쿠키가 있다 ⇒ 이전에 방문한적이 있다

쿠키가 없다 ⇒ 이전에 방문한적이 없다.

특징

1. 서버에서 사용
2. 요청시 Headers에 전송 ( 같은 도메인에서 만들어진 쿠키만 전송)
3. 만료기간 지정 가능

영구쿠키 vs 세션쿠키

영구쿠키 - 만료기간이 있고, 만료기간이 끝난후에 삭제 ( 브라우저를 종료해도 만료기간이 끝나야만 삭제가 됌)

세션쿠키 - 만료기간이 없고, 브라우저 종료시 삭제

퍼스트파티쿠키 vs 서드파티쿠키

퍼스트파티쿠키 - 같은도메인에서 생성된 쿠키, 서브도메인 쿠키를 포함

서드파티쿠키 - 다른도메인쿠키 - 퍼스트쿠키에 스크립트가 있거나 이미지등 퍼스트쿠키에 요청할때 언제든지 생성이 가능하다 , 주로 광고목적으로 사용된다. 개인정보악용우려가 있음

쿠키의 문제점

1. CSRF : 사용자의 권한을 이용한 공격 - 쿠키가 자동으로 전송된다는 속성을 이용하여 스크립트를 이용하여 비밀번호를 변경한다든지 악의적인 요청을 하는것
2. XSS : 사용자의 만감한 정보 탈취 ( 토큰) - 악성스크립트를 실행시켜 사용자의 민감한정보를 탈취할수있다
3. 부족한 저장용량 : 4kb
4. HTTP 요청시 자동으로 모든 쿠키 전송: 불필요한 트래픽 증가

웹스토리지

쿠키의 문제점을 어느정도 해결

1. 5mb의 저장용량 - 쿠키의 저장공간의 문제점을 어느정도 해결
2. 요청시 header에 전송하지 않음 - 쿠키의 csrf, xss의 문제점을 해결
3. 문자열만 저장가능 - 직렬화를 통해 객체 저장가능

로컬스토리지 vs 세션스토리지

• 동기적으로 실행된다

로컬스토리지 - 도메인/ 브라우저에 저장되고 직접삭제시 삭제가 된다. 다른 웹사이트 브라우저에 들어가면 로컬스토리지가 동일하지 않다

세션스토리지 - 도메인 /브라우저/탭에 저장되고 탭종료시 삭제가 된다. 다른 웹사이트 브라우저, 탭에만 들어가도 동일하지 않다.

브라우저 종료시 삭제되어 괜찮은 데이터는 세션스토리지에 저장하는것이 좋다

웹스토리지는 문자열만 저장이 가능하고, 객체를 저장하기 위해서는 직렬화를 해야한다

대부분의 브라우저는 웹스토리지를 지원하지만 버전에 따라 지원안할수도 있기에 에러가 발생할수도있다.

웹스토리지를 처리할때는 에러처리가 필수이다 !!!!

문제점

1. xss : 어느정도 해결은 되었지만 웹스토리지도 취약하다

2. 독립된 스토리지 - 데스크탑, 모바일에 따라 다르게 데이터를 볼수있다

3. 시간설정이 불가하다

4. 동기적으로 실행되기에 메인스레드가 블로킹을 일으킬수 있다.

쿠키 / 웹스토리지

• 보안문제가 있기에 민감한 정보는 저장하지 않는다
• 쿠키의 경우 기간을 설정하고, 자동으로 서버에 데이터를 전송해야하는경우 사용한다 - n일동안 장바구니 보지않기, 비로그인 장바구니
• 세션스토리지 - 탭을 종료했을때 삭제되어도 되는것, 이전페이지, 이전스크롤 위치저장
• 로컬스토리지 - 종료했어도 유지되어야 하는것, 이전글 저장, 사용자 설정저장

쿠키와 웹스토리지 보안문제해결

1. XSS

HttpOnly - 자바스크립트로 쿠기 접근 불가

innerHTML사용 안하는것 - 사용자의 입력이 자바스크립트로 실행되는 코드를 작성하지 않는것 ( innerHTML, eval, document.write) 공격이 가능한 스크립트 태그를 넣지 못하도록 한다.

하지만 이것을 사용해야한다면 xss 보안 라이브러리 (sanitize-html, DOMPurify) 사용

1. CSRF

SameSite - 같은 도메인의 요청에만 쿠키를 전송 ( strict : 모두 허용하지 않음 , Lax 안전한 Get요청만 허용 )

Referer검증 - 요청온 사이트의 도메인을 확인할수 있음