[CS/NW] WebBrowser's Cache

1. 웹 브라우저의 캐시

웹 브라우저의 캐시란 무엇이며, 어떤 역할을 하나요?

서버에서 받아온(HTML, CSS, JacaScript, 이미지 파일)등을 로컬 디스크에 저장해서 다음에 같은 리소스에 접근할 때 가시 다운로드 할 필요없이 빠르게 로드할 수 있도록 도와주는 역할을 합니다. 이는 서버의 부하도 줄이고 웹 페이지 로딩 시간을 단축시킨다.

브라우저 캐시의 장점과 단점에 대해 설명해 주세요.

장점 :웹을 랜더링 할때 이전에 받아왔던 캐시를 사용함으로써 불필요한 서버와의 통신을 줄여 서버는 서버대로 부하를 줄이고 클라이언트는 빠른 웹 랜더링을 할 수 있다.

단점 :정보를 저장하는 만큼 보안의 문제가 있고 항상 서버로부터 최신의 정보를 받아오지 않아 서버와의 동기화 문제가 있을 수 있다.

브라우저 캐시를 무시하고 항상 서버에서 최신 데이터를 가져와야 하는 경우는 언제인가요?

보안적인 문제를 다룰 때 즉 금융 거래를 하거나 실시칸 거래(주식, 코인) 등을 할 때 필요하다.

2. 로컬 스토리지와 오리진

 

로컬 스토리지(LocalStorage)란 무엇이며, 어떻게 작동하나요?

로컬 스토리지는 웹 브라우저에서 제공하는 클라이언트 측 저장소로 Key-Value쌍으로 저장된다.

JavaScript에서 localStorage에 접근해서 사용할 수 있다.

오리진(Origin)란 무엇이며, 로컬 스토리지와 어떻게 연관이 있나요?

오리진이란 프로토콜(http/https), 도메인, 포트를 조합한 것으로 각 오리진은 자신만의 로컬 스토리지에만 접근할 수 있다. 즉 오리진은 다른 오리진의 로컬 스토리지에 접근하지 못함으로써 보안성을 올린다.

로컬 스토리지를 사용한 캐싱의 예를 설명해 주세요.

이미지 같은 것이 많은 사이트로 이동할 때 이미지를 로컬 스토리지에 저장해 둠으로써 빠른 로드를 보일 수 있다.

 

3. 세션 스토리지

세션스토리지(SessionStorage)란 무엇이며, 어떻게 작동하나요?

브라우저 세션이 유지되는 동안(창을 닫거나 브라우저를 닫음) 데이터를 저장하는 클라언트측 저장소이다.

자바스크립트에서 sessionStorage를 통해서 사용할 수 있다.

로컬스토리지와 세션스토리지의 차이점은 무엇인가요?

로컬 스토리지: 영구적으로 데이터 저장, 브라우저를 종료해도 데이터 유지

세션 스토리지: 세션 동안만 데이터 저장, 브라우저 탭이나 창을 닫으면 데이터 삭제

4. 쿠키(Cookie)

쿠키(Cookie)란 무엇이며, 어떻게 작동하나요?

서버가 클라이언트 브라우저에 저장하는 작은 데이터파일로 서버와 통신시 다시 서버로 전송되서 상태를 유지하거나 사용자 식별을 위해서 사용된다. HTTP 헤더를 통해서 전송된다.

쿠키의 주요 용도는 무엇인가요?

사용자 인증, 웹사이트 설정 저장 등이 있다.

쿠키를 사용할 때 주의해야 할 보안 이슈는 무엇인가요? 이를 어떻게 해결할 수 있을까요?

쿠키는 민감한 정보를 담고 있을 확률이 높아 탈취 혹은 세션 하이재킹을 조심해야 한다.

HTTPs에서만 사용하도록 하거나 CSRF공격을 방지해야하며 JavaScript 주입을 못하게 HttpOnly HTTp에서만 접근할 수 있도록 해야한다.

5. 로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점

로컬스토리지, 세션스토리지, 쿠키의 공통점, 차이점은 무엇인가요?

공통점 :

• 클라이언트 측에서 데이터를 저장해서 서버 요청을 줄이고 웹 랜더링 시간을 줄인다.
• Key-Value 쌍으로 저장된다.

차이점 :

• 로컬 스토리지 : 영구적 저장 브라우저 종료 후에도 데이터 저장됨.
• 세션 스토리지 : 일시적 저장, 브라우저 세션 종료 시 데이터 삭제.
• 쿠키 : 서버와 클라이언트 간 데이터 전송, 만료 날짜 설정 가능, 보안 속성 설정 가능.

각 스토리지 방식(로컬스토리지, 세션스토리지, 쿠키)을 사용하는 적절한 예를 설명해 주세요.

• 로컬 스토리지: 사용자 설정, 장기적인 사용자 데이터 저장
• 세션 스토리지: 쇼핑 카트, 단기 데이터 저장.
• 쿠키 : 사용자 인증 상태 유지. 사용자 트래킹, 세션 관리