브라우저 저장소

🏠. 브라우저 저장소

브라우저 저장소는 크게 2가지로 구분이 됩니다.

웹 스토리지(Web Storage):

웹 데이터를 클라이언트에 저장하기 위해 만들어진 key-value 형식의 저장소.

쿠키(Cookie):

서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 key-value 형식의 저장소

📦. 웹 스토리지 (Web Storage)

웹 스토리지도 2가지로 나눌 수 있습니다.

로컬 스토리지(Local Storage)

세션 스토리지(Session Storage)

로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다.

먼저 로컬 스토리지는 브라우저를 종료해도 데이터를 보관합니다.(영구성) 또한 도메인만 같으면 전역적으로 공유되는 특정을 가지고 있습니다.(공유성)

하지만, 세션 스토리지는 브라우저가 종료되면 데이터가 삭제됩니다.(비영구성) 그리고 도메인이 같더라도 브라우저가 다르면 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터가 공유되지 않습니다.(비공유성)

🍪. 쿠키(Cookie)

쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어졌습니다.

예를들어 우리가 HTTP 요청을 보낼 때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청을 누가 보낸 것인지 알 수 없습니다. 이 때 우리는 쿠키에 정보를 담아 서버에 보내면 서버는 쿠키를 읽어 요청자를 파악합니다. 쿠키는 4KB 용량 제한을 가지고 있으며 한 사이트당 20개의 쿠키를 가질 수 있습니다.

또한 쿠키는 만료기한을 지정할 수 있습니다. 쿠키는 서버와의 통신을 목적으로 만들어졌기 때문에 더 주의해야 됩니다. 쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가하게 됩니다.

📦 VS 🍪. 웹 스토리지와 쿠키의 차이

웹 스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로만 전송이 가능하기 때문에 부담이 가지 않습니다. 또한, 필요한 경우에만 꺼내 쓰는 것임으로 자동 전송의 위험성이 없으며, 다른 origin이 요청할 때에는 꺼내쓰고 싶어도 origin 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없습니다.

웹 스토리지는 쿠키에 비해 용량이 넉넉합니다.

🔐. 브라우저 스토리지 보안

중요한 데이터는 암호화:

브라우저 스토리지는 말그대로 브라우저에 데이터를 저장하는 저장소입니다. 브라우저 이기 때문에 당연히 사용자가 브라우저 스토리지에 저장된 데이터를 조회 및 삭제 그리고 수정도 할 수 있습니다. 그렇기 때문에 민감한 데이터를 저장할 때에는 해당 데이터를 암호화 하여 저장해야 합니다. 암호화된 데이터는 저장소에 저장되기 전에 암호화되어야 하며, 사용 시에는 복호화되어야 합니다.

용도에 맞게 사용:

로컬 스토리지, 세션 스토리지, 쿠키는 각각 다른 용도로 사용됩니다. 중요한 데이터의 저장에는 보안 강화를 위해 로컬 스토리지 대신 영구적이지 않은 세션 스토리지를 사용하는 것이 좋습니다.

쿠키 속성 설정:

쿠키를 사용할 때는 적절한 속성을 설정해야 합니다.

예를 들어, secure 속성을 설정하여 HTTPS 연결에서만 쿠키를 전송하도록 하고, httpOnly 속성을 설정하여 JavaScript에서 쿠키에 접근할 수 없도록 합니다.


// 중요한 정보를 담은 쿠키 설정 (예: 인증 토큰)
document.cookie = 'authToken=abc123; Path=/; HttpOnly; Secure';

CSRF 공격 방어:

중요한 작업을 수행하는 요청에는 CSRF 토큰을 사용하여 요청의 유효성을 검증해야합니다. CSRF 공격을 통해 악의적인 사용자가 쿠키를 이용하여 특정 동작을 수행할 수 있는 것을 방지할 수 있습니다.

CSRF(Cross Site Request Forgery) 공격이란?

CSRF 공격은 웹 에플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 만드는 공격입니다.


const csrfToken = '...'; // 서버로부터 전달받은 CSRF 토큰

// 요청 시 CSRF 토큰을 함께 전송
fetch('/api/some-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken, // CSRF 토큰을 헤더에 포함
  },
  body: JSON.stringify(data),
});

SameSite 쿠키 속성 설정:

SameSite 쿠키 속성을 설정하여 사이트 간 요청 위조 공격을 방지할 수 있습니다. SameSite 속성을 “Strict”로 설정하면 같은 사이트에서만 쿠키를 전송하고, 외부 사이트로는 전송되지 않도록 할 수 있습니다.

사용자 입력 검증:

사용자로부터 받은 입력값을 스토리지에 저장할 수 있는지 검증을 해야합니다. 유효성 검사는 스토리지에 저장하는 것 이외에도 서버로 데이터를 전송하기 전에도 검증해야합니다.


const handleSubmit = (event) => {
  event.preventDefault();

  const inputValue = event.target.value;

  // 입력 값 유효성 검사
  if (inputValue.match(/^[A-Za-z0-9]+$/)) {
    // 유효한 경우 서버로 전송
    // ...
  } else {
    // 유효하지 않은 경우 에러 처리
    // ...
  }
};