웹 브라우저의 캐시

MINKY·2023년 8월 23일

CS스터디

목록 보기

1/7

로컬스토리지

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

하나의 키에 오로지 하나의 값만 저장됩니다.
데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생 동안 로컬
저장소에 저장되며 만료날짜가 없습니다. 사용자가 창이나 탭을 닫아도, 컴퓨터를 종료해도 만료되지 않습니다.
최대 저장용량은 5MB입니다.
보통 사용자의 행위를 기억할 때, 로그인을 유지하기 위한 값 등으로 사용되며 로컬 스토리지 데이터는 자동으로 서버로 전송되지 않습니다. (쿠키는 자동 전송됨)
- 필터링 조건을 새로고침해도 남아있게 할 때

사용법

localStorage.setItem(key, value); // 설정
localStorage.getItem(key); // key에 해당하는 value 가져오기
localStorage.removeItem(key); // 제거
localStorage.clear() // 전체 제거

로컬스토리지와 오리진

로컬스토리지는 웹 스토리지 객체로 브라우저 내에 { key : value } 형태로 오리진에 종속되어 저장되는 데이터를 말합니다. (오리진이 같은 브라우저 내에서 공유 됩니다.)

search라고 하는 사람도 있지만. 보통은 query string이라고 합니다.
Protocol + hostname + port = origin
https의 기본 포트번호는 443이기 때문에 ⇒ 생략 가능
- http의 기본 포트번호는 80 ⇒ 생략 가능

💡 컨텐츠가 달라도 오리진만 같으면 로컬스토리지 공유 가능

로컬스토리지를 활용사례 : 캐싱

로컬 스토리지 활용

로그인 유지 (토큰 방식)
토큰을 발급해서 로컬 스토리지에 저장을 함
header-authorization 헤더를 이용해서 서버에 전달을 함

캐싱

브라우저에 입력을 하고 설정을 함
이러한 값들을 캐싱 (담아둔다)
이점?
- 자동완성 (이전에 입력한 값들이 쭉쭉 나오는 것)
- 다시 입력하지 않아도 되기 때문에 수고 감소 UX 증가
실습

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,
initial-scale=1.0">
  <title>Document</title>
  <style>
    /* CSS */
    .button-62 {
      background: linear-gradient(to bottom right, #EF4765,
          #FF9A5A);
      border: 0;
      border-radius: 12px;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-block;
      font-family: -apple-system, system-ui, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 2.5;
      outline: transparent;
      padding: 0 1rem;
      text-align: center;
      text-decoration: none;
      transition: box-shadow .2s ease-in-out;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      white-space: nowrap;
    }

    .button-62:not([disabled]):focus {
      box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
    }

    .button-62:not([disabled]):hover {
      box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
    }

    #field {
      font-size: 27px;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div>
    <input type="text" id="field" />
    <input type="button" class="button-62" value="검색" 89 id="save" />
    <input type="button" class="button-62" value="조회" id="read" />
    <input type="button" class="button-62" value="삭제" id="clear" />
  </div>
</body>
<script>
  window.onload = async () => {
    const field = document.getElementById("field"),
      save = document.getElementById("save"),
      read = document.getElementById("read"),
      clear = document.getElementById("clear")
    save.addEventListener("click", e =>
      localStorage.setItem("입력값", field.value))
    read.addEventListener("click", e =>
      alert(window.localStorage["입력값"]))
    clear.addEventListener("click", e => {
      window.localStorage.clear()
      field.value = ""
    })
    if (window.localStorage["입력값"]) {
      field.value = window.localStorage["입력값"]
    }
  }
</script>

</html>

세션스토리지

세션 스토리지(session Storage)는 로컬 스토리지와 매우 유사합니다.

💡 세션 스토리지는 웹 스토리지 객체로 브라우저 내에 { key : value } 형태로 오리진에 종속되어 저장되는 데이터. (오리진이 같은 브라우저 내에서 공유 됩니다.)

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

세션스토리지 사용법

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

보통은 세션스토리지보다는 로컬스토리지를 많이 씁니다.

쿠키(Cookie)

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

클라이언트에서 먼저 설정할 수도 있고 서버에서 먼저 설정할 수 있으나 보통은 서버에서 먼저 설정해서 쿠키를 만드는게
일반적입니다.
서버에서 응답헤더로 Set-Cookie로 어떤 값을 설정해서 쿠키를 보내면 그 때 부터 클라이언트에서 요청헤더 Cookie에 설정되어 자동으로 서버에 전달되게 되고 브라우저에도 저장되게 됩니다.
HTTP 헤더 를 통해 클라이언트 또는 서버가 HTTP 요청 또는 응답 할 때 추가 정보를 전달할 수 있다.

서버에서 헤더값을 설정해서 보내는 것 : 응답헤더를 설정했다.
클라이언트는 요청헤더
쿠키는 클라이언트와 서버 둘 다 조작이 가능하지만 보통 서버에서 만료기한 등을 설정 및 컨트롤을 함.
저장용량은 최대 4kb까지 가능합니다.
보통 로그인, 장바구니, 사용자 커스터마이징, 사용자 행동분석(주로 개인화된 광고에활용되는 것들)에 사용됩니다.

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

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

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

이렇게 되면 쿠키에 대한 제어권을 클라이언트에게 두게 되는데 쿠키에는 보통 민감한 정보들이 담길 수도 있기 때문에 이 제어권에 관한 것을 클라이언트가 아닌 서버가 두게 만들어야 함.
ex) 내 핸드폰이 해킹당할 확률이 높을까 네이버가 해킹당할 확률이 높을까?

세션 쿠키

세션 쿠키는 Expires 또는 Max-Age 속성을 지정하지 않은 것을 말합니다. 브라우저가 종료되면 쿠키도 사라집니다.
사이트 탐색 시에 관련한 설정들과 선호사항을 저장하는 임시 쿠키

영구 쿠키

영구 쿠키는 Expires 또는 Max-Age 속성을 지정해서 특정날짜 또는 일정기간이 지나면 삭제되게 만든 쿠키, 브라우저를 닫을 때 만료되지 않습니다.
사용자 로그인 항상 유지

세션 쿠키 vs 영구 쿠키

세션쿠키 (Session Cookie)	영구쿠기 (Persistent Cookie)
- 브라우저가 열려 있는 동안 유효함	- 하드디스크에 유효기간 동안 저장됨
- 서버를 이용하는 동안 사용자 정보를 유지하기 위해 사용됨	- 사이트 재방문 시 사용자 정보를 기억하기 위해 사용됨

쿠키의 용도 중 하나가 사용자의 로그인 상태를 추적하는 것인데, 웹 사이트에서 로그인을 한 후, 웹 사이트를 닫게 되면 로그인이 해제된다. 이는 세션 쿠키(임시 쿠키)로 인해 로그인이 해제되는 것이고 웹 사이트에서 '자동 로그인' 체크박스에 체크하는 것은 사용자의 요청에 따라 영구 쿠키로 변경할 수 있도록 제공하는 것이다.

세션 vs 세션 쿠키 vs 세션 스토리지

	세션	세션 쿠키	세션 스토리지
위치	서버 측에서 관리되는 상태 저장 방법	클라이언트 측에서 관리되는 쿠키의 일종	클라이언트 측 웹 스토리지 메커니즘
동작 방식	서버는 각 유저마다 고유한 세션을 생성하고, 클라이언트에 대한 세션 ID를 부여합니다. 이 세션 ID는 일반적으로 쿠키를 통해 클라이언트에게 전달됩니다.	보통 세션 ID와 같은 정보가 쿠키에 저장되어, 클라이언트가 해당 ID를 서버에 전달하면 서버는 해당 세션과 관련된 데이터를 찾아 사용	클라이언트의 브라우저 내부에 데이터를 저장합니다. 같은 도메인과 프로토콜을 가진 페이지 간에 데이터를 공유
수명	일반적으로 유저의 활동 동안 유지되며, 서버가 일정 기간 동안 세션 데이터를 보관할 수 있습니다.	브라우저 세션이 끝날 때(브라우저 종료 시) 쿠키가 삭제	해당 페이지의 세션이 유지되는 동안 데이터가 유지
보안	주로 서버 측에서 데이터를 관리하므로 보안 측면에서 더 안전합니다. 중요한 정보나 인증 데이터를 저장	서버 측 세션보다는 보안적으로 약간 취약 (클라이언트가 직접 관리)	서버 측 세션보다는 약간 취약합니다. 중요한 정보를 저장하는 데는 적합하지 않음

보안을 생각하면 세션만 사용하면 되지 않나?

세션은 서버에 저장되어 서버의 자원을 사용하기 때문에 사용자가 많으면 많을 수록 소모되는 자원이 많아져 쿠키와 세션을 적절히 사용한다고 한다. 세션 사용으로 인해 웹 사이트의 속도 저하 문제도 일으킬 수 있기 때문이다.

지워지고 조작되고 가로채이더라도 문제 없을 정보만 쿠키로 사용되고

중요한 보안과 관련된 정보 등은 세션을 통해 서버에서 다뤄지는 것이다.

세션 만료
Q. 카드결제 시 뒤로가기를 누르면 왜 세션만료라고 뜰까?
1. 세션의 유지 시간 초과: 일반적으로 세션은 유저의 활동이나 접속 시간에 따라 일정 기간 동안 유지됩니다. 만약 결제 과정 중에 빈번한 새로고침이나 페이지 이동이 발생하여 세션이 만료되었다면, 다음 요청에서 세션을 찾을 수 없어 "세션 만료" 메시지가 표시될 수 있습니다.
2. 서버와의 통신 끊김: 결제 과정에서 서버와의 통신이 중단되거나 끊기면, 세션 데이터를 서버에서 받아오지 못하게 됩니다. 이러한 상황에서도 세션 만료 메시지가 표시될 수 있습니다.
3. 중복 결제 요청: 결제 페이지에서 새로고침이나 다른 동작을 여러 번 수행하는 경우, 중복 결제 요청이 발생할 수 있습니다. 이 경우 세션 데이터의 일관성이 깨질 수 있어 세션이 만료되었다는 메시지가 표시될 수 있습니다.
4. 보안 조치: 결제 과정은 민감한 정보를 다루기 때문에 보안 상의 이유로 빈번한 새로고침이나 페이지 이동을 감지하고 세션을 보호하기 위해 세션을 만료시키는 경우도 있을 수 있습니다.

쿠키 보안 취약점

XSS(크로스 사이트 스크립트)공격

˙ 자바스크립트를 이용하여 document.cookie 값을 탈취할 수 있음

스니핑(Sniffing)공격을 이용

˙ 네트워크를 통해 전송되는 쿠키값을 암호화하지 않고 전송하는 경우 네트워크 스니핑 공격을 통해 쿠키값을 탈취할 수 있음

공용 PC에서 쿠키값 유출

˙ 영속성 쿠키는 하드디스크에 저장되며, 간단한 방법으로 접근 가능하기 때문에 공용PC 사용시 PC에 저장된 사용자 정보가 유출될 수 있음

문법

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

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

실습

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');
	// 쿠키 설정 Secure 옵션으로
  res.setHeader('Set-Cookie', ['kundol = amumu; httponly',
    'loltier = master; Secure']);
  res.end('큰돌, 그는 신인가?!\n');
});
server.listen(port, hostname, () => {
  console.log(Server running at < http: //$>{hostname}:${port}/);
  });

쿠키의 시큐어코딩

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

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

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

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

실수로 로그인을 하고 떠나더라도 자동으로 로그아웃 되기 때문에 안전

쿠키허용관련 알림창

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

정보보호 및 개인정보보호 관리체계(ISMS-P) 인증기준(KISA) 2019.01
3.1.5 간접수집 보호조치
정보주체(이용자) 이외로부터 개인정보를 수집하거나 제공받는 경우에는 업무에 필요한 최소한의 개인정보만 수집 ․ 이용하여야 하고 법령에 근거하거나 정보주체(이용자)의요구가 있으면 개인정보의 수집 출처, 처리목적, 처리정지의 요구권리를 알려야 한다.
서비스 계약 이행을 위해 필요한 경우로서 사업자가 서비스 제공과정에서 자동수집장치 등에
의해 수집 ․ 생성되는 개인정보(통화기록, 접속로그, 결제기록, 이용내역 등)에 대해서도,
해당 서비스의 계약 이행 및 제공을 위해 필요한 최소한의 개인정보만을 수집하여야 한다.

▶ 다만, 서비스 제공 계약 이행과는 무관한 목적으로 이용하기 위해 수집하는 경우에는 선택 동의 항목으로 분류하여 별도의 사전 동의를 받아야 함 (예를 들어, 쿠키를 통해 수집하는 행태정보를 분석하여 개인별 맞춤형 광고에 활용하는 경우 등)

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

공통점

브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버부하를 방지
캐싱으로 인해 다운로드 하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리
다운로드가 가능
1. 브라우저당 동시에 다운로드 받을 수 있는 컨텐츠의 수는 한정되어있기 때문에 캐싱을 해 놓으면 남은 자료들을 더 빨리 다운로드 받을 수 있습니다.
사이트 기본 설정 커스터마이징(색상, 글꼴 크기 등)을 저장하거나 로그인 상태를
유지

차이점

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

출처 : 인프런 CS 지식의 정석

MINKY