웹 브라우저 캐시

로컬 스토리지

로컬 스토리지는 웹 스토리지 객체로 브라우저 내에 key : value 형태로 오리진에 종속되어 저장되는 데이터를 말한다.

ex) 크롬, IE 는 별개로 저장된다. 크롬에서 아이디 저장하시겠습니까? 이럴 때 사용.

하나의 키에 오로지 하나의 값만 저장된다.
데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생 로컬 저장소에 저장되며 만료되지 않는다. 사용자가 창이나 탭을 닫거나 컴퓨터를 종료해도 마찬가지.
최대 저장 용량은 5MB이다. (크다.)
보통 사용자의 행위를 기억할 때, 로그인을 유지하기 위한 값 등으로 사용되며 로컬 스토리지 데이터는 자동으로 서버로 전송되지 않는다. (쿠키는 자동 전송)

사용법

설정 : localStorage.setItem(key, value);
탐색 : localStorage.getItem(key);
제거 : localStorage.removeItem(key);
전체제거 : localStorage.clear();

나는 강의를 들을 때 1.5배속으로 지정해놓는다. 이것은 화면을 종료하고 새로고침을 해도 유지된다.

이렇게 로컬 스토리지에 value값으로 재생속도, 음량 등이 저장되어 계속 유지하게 되는 것이다.

오리진

프로토콜 + hostname + 포트 = 오리진

*참고 : https://naver.com:80 으로 접속하면 http 포트를 입력했기 때문에 접속 X. :443은 https 포트이기 때문에 접속 가능.

ex) https://search.shopping.naver.com/search/all?query=%EC%95%84%EC%9D%B4%ED%8F%B0&cat_id=&frm=NVSHATC

네이버 쇼핑에 아이폰을 검색했을 때 나오는 주소와

https://search.shopping.naver.com/search/all?query=%EA%B0%A4%EB%9F%AD%EC%8B%9C&prevQuery=%EC%95%84%EC%9D%B4%ED%8F%B0

갤럭시를 검색했을 때 나오는 주소를 보자.

https://search.shopping.naver.com/ (포트번호 생략) 이 부분이 오리진이기 때문에 둘의 오리진은 같다.

이곳에서 저장된 로컬스토리지는 naver.com에서는 공유되지 않는다.

로컬 스토리지의 활용

로그인 유지에 활용 (로컬 스토리지에 인증 토큰을 저장 -> 이 토큰을 서버 header - authorization에 주면 로그인이 유지되게 된다.)
캐싱

캐싱

사용자는 브라우저에 입력과 설정을 한다.

자동완성 기능, 위에 언급했던 음량이나 재생속도 유지, 어떠한 값의 유지 등에 사용.

이러한 것은 UX(user experience)의 증가를 가져온다.

세션 스토리지

로컬 스토리지와 매우 유사하다. 세션 스토리지는 웹 스토리지 객체로 브라우저 내에 key : value 형태로 오리진에 종속되어 저장되는 데이터를 말한다. (오리진이 같은 브라우저 내에서 공유된다.)

하나의 키에 하나의 값만 저장.
최대 저장용량은 5MB이다.
사용자가 브라우저에서 탭을 닫으면 데이터는 만료된다. **

보통은 세션 스토리지보다 로컬 스토리지를 많이 사용하게 된다.

쿠키

쿠키는 브라우저에 저장된 데이터 조각이다.

서버에서 응답헤더로 Set-Cookie : session-id = 12345 처럼 설정해 쿠키를 보내면 그 때부터 클라이언트에서는 요청헤더 Cookie에 session-id = 12345 설정되어 자동으로 서버에 전달되게 되고 브라우저에도 저장되게 된다.

이렇게 헤더에 저장되어 전달되고 브라우저에 저장되는 쿠키는 어디에 사용하는가?

쿠키는 클라이언트와 서버에서 둘 다 조작이 가능하지만 보통은 서버에서 만료기한 등을 설정하고 컨트롤한다. 저장용량은 최대 4KB까지 가능하다.

보통 로그인, 장바구니, 사용자 커스터마이징, 사용자 행동분석(개인화된 광고에 이용) 등에 사용된다.

클라이언트에서도 설정 가능한 쿠키

클라이언트에서 자바스크립트 - document.cookie를 통해 쿠키를 설정할 수 있고 보낼 때도 header - Cookie에 값을 정해서 보낼 수도 있다.

axios.get(url, {
			headers: {
				Cookie: "cookie1 = value; cookie2=value;"
				}
}).then

하지만 이렇게 되면 쿠키에는 보통 민감한 정보가 들어가게 되는데 해킹등의 이유로 서버에서 제어하는 것이 옳다.

세션 쿠키

세션 쿠키는 Expires 또는 Max-Age 속성을 지정하지 않은 것을 말한다. 브라우저가 종료되면 쿠키도 사라진다.

영구 쿠키

영구 쿠키는 Expires 또는 Max-Age 속성을 지정해 특정날짜 또는 일정기간이 지나면 삭제되게 만든 쿠키, 브라우저를 종료해도 만료되지 않는다.

문법

secure : https로만 쿠키를 주고받을 수 있게 하는 옵션. 지금은 브라우저의 보안강화등의 이유로 금지되어 있다.
httponly : 공격자가 자바스크립트로 빼낼 수 없게 만든다. (document.cookie로 접근 불가)
samesite : 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용.

쿠키의 시큐어 코딩

쿠키 - 세션으로 로그인을 처리한다면 다음과 같이 시큐어 코딩을 해야한다.

cookie에 세션 ID를 담을 때 이 세션 ID 기반으로 클라이언트의 개인정보를 유추할 수 없게 해야한다.
자바스크립트로는 파악할 수 없도록 http only 옵션을 걸어야 한다.
일정 시간의 세션 타임아웃을 걸어야 한다.

업비트의 쿠키 세션 타임아웃 사례

세션타임아웃으로 공격자의 접근을 차단할 수 있다.

로그인을 유지하기 위해서는 업비트 로그인 화면에서 ‘로그인 상태 유지’를 활성화 해야 한다. (활성화 시 로그인 유지 24시간, 비활성화 시 로그인 유지 3시간)

쿠키허용관련 알림창

서비스 운용 시 쿠키를 사용한다면 쿠키 허용 관련 알림창을 만들어야 한다. 방문 기록을 추적할 때 쿠키가 사용되기 때문이다. 이는 사용자의 데이터 간접 수집에 해당하며 거기에 해당하는 KISA 지침을 준수해야 하기 때문이다.

로컬스토리지, 세션스토리지, 쿠키의 차이

공통점

브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버 부하를 방지 할 수 있다.
캐싱으로 인해 다운로드 하는 컨텐츠가 줄어들어 웹 사이트의 컨텐츠를 더 빨리 다운로드 가능하다.
사이트 기본 설정 커스터마이징(색상, 글꼴 등등)을 저장하거나 로그인 상태를 유지할 때 사용될 수 있다.

차이점

	쿠키	로컬 스토리지	세션 스토리지
최대 저장 용량	4KB	5MB	5MB
브라우저 허용	HTML4 + 5	HTML 5	HTML 5
접근 범위	창	창	탭
만료 기한	수동설정	영구적	탭 닫으면 소멸
설정할 수 있는 주체	클라이언트 + 서버	클라이언트	클라이언트
요청과 함께 서버에 함께 자동전송	O	X	X