CS 전공 지식 정리 - 웹브라우저의 캐시 2. 세션스토리지와 쿠키

제훈·2025년 3월 4일

Study

목록 보기

28/30

세션 스토리지

세션 스토리지는 로컬 스토리지와 굉장히 유사하다.

웹 스토리지 객체로 브라우저 내에 { key : value } 형태로 오리진에
종속되어 저장되는 데이터

하나의 키, 하나의 값 저장
최대 저장 용량은 5MB

로컬스토리지와 차이점

동일한 오리진이어도 브라우저의 각 탭마다 독립적으로 저장된다.

즉, 다른 탭에서 세션 스토리지에 저장된 데이터에 접근할 수 없다.

사용자가 브라우저에서 탭을 닫으면 데이터가 만료된다.

사용법

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

위와 같이 Console 창에 했을 때

해당 탭의 Session storage 에 저장된 것을 볼 수 있지만

다른 탭에서는 없는걸 볼 수 있다.

그런 차이가 있다.

보통 세션스토리지보다 로컬스토리지를 많이 쓴다.

쿠키

브라우저에 저장된 데이터 조각

클라이언트에서 먼저 설정할 수도 있고, 서버에서 먼저 설정할 수도 있다.

거의 보통은 서버에서 먼저 설정해서 쿠키를 만드는게 일반적이다.

서버에서 응답헤더로 Set-Cookie 로 설정해서 쿠키를 보낸다.
클라이언트에서 요청헤더 Cookie 에 설정돼 자동으로 서버에 전달되게 돼 브라우저에 저장되게 한다.

참고 : HTTP 헤더를 통해 Client or Server 가 HTTP 요청, 응답할 때 추가 정보를 전달할 수 있다.

클라이언트와 서버 둘 다 조작이 가능하지만 보통 서버에서 만료기한 등을 설정 및
컨트롤한다.

저장용량은 최대 4KB

로그인
장바구니
사용자 커스터마이징
사용자 행동분석 (주로 개인화된 광고에 활용되는 것)

위와 같은 것들에 사용된다.

클라이언트에서도 설정가능한 쿠키 (권장 X)

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

하지만 이를 권장 X

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

이렇게 되면 쿠키에 대한 제어권을 클라이언트에게 두게 되는데, 쿠키에는 보통 민감한 정보들이 담길 수도 있기 때문에 이 제어권에 관한 것을 클라이언트가 아닌 서버가 가지고 있게 해야 한다.

세션 쿠키

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 v89 및 Firefox v75이상부터 localhost에서는 이 사양을 무시합니다.

즉, Chrome v89 및 Firefox v75이상의 localhost에서는 secure 옵션을 걸어도 http로 쿠키를 주고받을 수 있어 쉽게 테스팅이 가능

httponly

공격자가 쿠키를 자바스크립트로 빼낼 수 없게 만든다. (document.cookie로 접근 불가)

samesite

요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용

실습

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', ['cookie1 = httponlycookie; httponly', 'cookie2 = securecookie; Secure']);
	res.end('end\n');
});
server.listen(port, hostname, () => {
	console.log(`Server running at http://${hostname}:${port}/`);
});

http 서버, 호스트명은 localhost, 포트는 3000

res.setHeader('Content-Type', 'text/plain; charset=utf-8'); 라고 하는 형태로 보내지만

쿠키는
res.setHeader('Set-Cookie', ['cookie1 = httponlycookie; httponly', 'cookie2 = securecookie; Secure']);
이렇게 만든다.

js 파일에서 만든 뒤 node script.js 로 실행하면 3000번 포트에 서버가 구동된걸 볼 수 있고,

개발자 도구의 Application -> Cookies 를 보면 들어간 것도 볼 수 있을 것이다.

httponly와 secure 에도 차이가 있는걸 볼 수 있을 것이다.

내가 https가 아닌 http인데 secure가 보이는 이유? -> 크롬 89 이상과 firefox 75 이상이기 때문일 것이다.

테스트할 때만 로컬에서 볼 수 있게 한시적으로 허용해준다.

document.cookie 를 검색해보면 'cookie2 : securecookie 만 나오는 것을 볼 수 있을 것이다.

httponly는 나오지 않기 때문이다. (조금 더 안전해진다.)

즉, 쿠키의 시큐어코딩에 대해 알아보자.

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

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

사례

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

-> 로그인 해두고 뭐 자리를 비웠을 때 타임아웃이 된 후에는 공격자가 접근할 수 없게끔 하는 것이다.

쿠키 허용 관련 알림창 사례

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

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

이전 로컬스토리지에 이어서 봤던 웹브라우저의 캐시들의 공통점, 차이점을 알아보자.

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

차이점