웹브라우저의 캐시

웹스토리지라고도 하며 HTML5와 함께 도입됨. “브라우저 스토리지”에 저장되는 조각, 즉, 크롬을
사용한다면 크롬에만 저장이 되고 그 정보를 파이어폭스 등 다른 브라우저에서는 볼 수 없다.
오리진에 종속됨.

 

# 오리진이란?

 

 

1. 로컬 스토리지
로컬 저장소는 웹 브라우저에서 키/값 쌍의 형태로 클라이언트 브라우저에 데이터를 저장하는 방법
데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생 동안 로컬 저장소에 저장됩니다.
사용자가 창이나 탭을 닫아도 만료되지 않습니다. 대신 데이터는 브라우저의 메모리가 지워질 때까지
브라우저에 남아 있습니다.
로컬 저장소에는 설정, 검색, 제거 및 지우는 데 사용할 수 있는 네 가지 방법이 있습니다.
•설정 : localStorage.setItem(key, value);
•탐색 : localStorage.getItem(key);
•제거 : localStorage.removeItem(key);
•전체제거 : localStorage.clear()
# 특징
•로컬 저장소에 저장된 데이터에는 만료 날짜가 없습니다.
•저장 용량은 최대 10MB입니다. 보통은 5MB
•로컬 스토리지 데이터는 자동으로 서버로 전송되지 않습니다.

 

2. 세션 스토리지
sessionStorage는 localStorage와 매우 유사하며 탭을 닫을 때 삭제됨. 최대 5MB
33 / [인프런 - CS지식의 정석]웹브라우저의 캐시 #2. 쿠키
클라이언트에 데이터를 저장하는 방법 중 하나. 쿠키는 요청을 할 때 서버에 자동으로 전송됨.
클라이언트와 서버 둘 다 조작 가능. 보통 서버에서 만료기한 등을 설정 및 컨트롤을 함.
Set-Cookie 헤더에 설정된 작은 데이터 조각 4kb까지 가능.
세션 쿠키
세션 쿠키는 Expires 또는 Max-Age와 같은 속성을 지정하지 않은 것. 브라우저가 닫힐 때
제거됩니다.
영구 쿠키
영구 쿠키는 Expires 또는 Max-Age 속성을 지정한 것. 이 쿠키는 브라우저를 닫을 때 만료되지
않지만 특정 날짜 또는 일정 기간이 지나면 제거 됩니다.
문법
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict

 

secure

https로만 가능. 하지만 그러나 Chrome 52 이상 및 Firefox 52 이상을 포함한 일부 브라우저는
보안을 강화하고 안전하지 않은 사이트(HTTP)가 Secure지시문으로 쿠키를 설정하는 것을 금지하기
위해 이 사양을 무시합니다

 

httponly
공격자가 자바스크립트로 빼낼 수 없음.( document.cookie로 접근 불가)

 

samesite
요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용
실습
https://github.com/wnghdcjfe/csnote/blob/main/ch2/cookie/server.js

const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.setHeader('Set-Cookie', ['amumu = OP; httponly', 'loldungub =
master; Secure']);
res.end('큰돌, 그는 신인가?!\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

쿠키의 시큐어코딩

# 세션ID 설정시에
보통 cookie에 세션ID를 담는데 세션ID기반으로 클라이언트의 인증정보를 알 수 없게 해야 함. 세션
ID를 공격자가 추측하기 어렵게 길고 랜덤하게 생성하는 알고리즘하고 사용자 수에 대비, 충분히 큰
수로 하고 http only 옵션, 세션 타임아웃 걸어야 함.

 

# 쿠키허용관련 알림창을 만들어야.
쿠키는 간접수집에 해당하며 해당하는 지침을 준수하며 서비스를 구축해야 합니다.
정보보호 및 개인정보보호 관리체계(ISMS-P) 인증기준(KISA) 2019.01

3.1.5 간접수집 보호조치
정보주체(이용자) 이외로부터 개인정보를 수집하거나 제공받는 경우에는 업무에 필요한 최소한의
개인정보만 수집 ․ 이용하여야 하고 법령에 근거하거나 정보주체(이용자)의요구가 있으면 개인정보의
수집 출처, 처리목적, 처리정지의 요구권리를 알려야 한다.
서비스 계약 이행을 위해 필요한 경우로서 사업자가 서비스 제공과정에서 자동수집장치 등에 의해
수집 ․ 생성되는 개인정보(통화기록, 접속로그, 결제기록, 이용내역 등)에 대해서도, 해당 서비스의
계약 이행 및 제공을 위해 필요한 최소한의 개인정보만을 수집하여야 한다.
▶ 다만, 서비스 제공 계약 이행과는 무관한 목적으로 이용하기 위해 수집하는 경우에는 선택 동의
항목으로 분류하여 별도의 사전 동의를 받아야 함 (예를 들어, 쿠키를 통해 수집하는 행태정보를
분석하여 개인별 맞춤형 광고에 활용하는 경우 등)

 

 

웹브라우저의 캐시 #3. 로컬스토리지, 세션스토리지, 쿠키의 차이
필요한 이유 : 서버에 대한 요청을 줄임 / 네트워크 연결 없이 웹사이트를 더 빨리 다운로드
저장목록 : 사이트 기본 설정 커스터마이징(색상, 글꼴 크기 등) / 로그인 상태 저장

 

 

	쿠키	로컬 스토리지	세션 스토리지
용량	4KB	10MB	5MB
브라우저	HTML4 + 5	HTML 5	HTML 5
액세스 가능	모든 창	모든 창	같은 탭
만료	수동으로 설정	영구적	탭 닫기
접근	클라이언트 + 서버	클라이언트	클라이언트
요청과 함께 전송됨	O	X	X

 

 

 

 

 

출처 : 면접을 위한 CS 전공지식 노트