웹스토리지 & 쿠키

브라우저에 저장되는 작은 크기의 문자열( 최대 4KB )

https://naver.com 이라고 칠 때

퍼스트파티 쿠키 - 같은도메인, 혹은 서브도메인

ex) naver.com(같은도메인), m.naver.com(서브도메인)

서드파티 쿠키 - kakao.com 다른 도메인 (주로 광고 목적으로 활용, 사용자의 방문 사이트 파악)

CSRF - 사용자의 권한을 이용한 공격 (비밀번호 변경, 결제 요청등)

XSS - 사용자의 민감한 정보 탈취(토큰)

부족한 저장 용량 - 4kb

HTTP 요청 시 자동으로 모든 쿠키 전송 - 불필요한 트래픽 증가

웹스토리지(로컬,세션)

최대 5MB의 저장용량 - 쿠키의 부족한 저장 용량 문제 해결

요청시 Headers에 전송하지 않음 - 쿠키의 CSRF, 트래픽 문제 해결

문자열만 저장 가능 - 직렬화를 통해 객체 저장 가능

로컬스토리지 : 저장범위 도메인 / 브라우저, 삭제 시기 - 직접 삭제 시

세션스토리지 : 저장범위 도메인/브라우저/탭, 삭제 시기 - 탭 종료 시

JSON형식으로 사용해야한다.

브라우저 미지원 에러처리를 해줘야한다 (대부분은 지원함)

ex)사파리 시크릿모드에서 할당량 0, 에러처리하기

웹스토리지의 문제점

1)XSS 취약, 자바스크립트로 접근 가능

2)독립된 스토리지 브라우저 / 탭(세션 스토리지) 간 공유불가

3)만료 기간 설정 불가

4)동기적으로 실행 - 메인 스레드 블로킹 용량이 크다면 indexedDB를 고려해야한다.

쿠키 & 웹 스토리지 - 보안 문제가 있기 때문에 민감한 정보는 저장하지 말아야 한다.

1)쿠키(기간 설정, 서버전송(작은용량)) - n일동안 보지않기, 비 로그인 장바구니

2)세션 스토리지(탭 종료시 삭제되어도 ok) - 이전페이지저장, 이전 스크롤 위치저장

3)로컬스토리지(브라우저 종료 시 유지) - 사용자 설정 저장, 글 임시저장

1.XSS - HttpOnly -> 자바스크립트로 접근 불가2.CSRF - SameSite -> 같은 도메인의 요청에만 쿠키를 전송, Referer 검증 -> 요청 온 사이트의 도메인은 확인할 수 있음

SameSite란?

1)Strict:모두 허용하지않음

2)Lax:안전한 GET 요청만 허용(a tag)

1.XSS - innerHTML사용을 하지않는다 : 자바스크립트 코드 사용불가

사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드 작성하지 않기

만일 사용해야 한다면 XSS보안 라이브러리(sanitize-html, DOMPurify)사용하기

- 참고한링크

그리고 인증과 인가 라는 내용에 관련된 영상