Cookie, localStorage와 sessionStorage

윤여찬

Dec 21, 2023

Contents

쿠키와 스토리지를 쓰는 이유 Cookie

쿠키와 스토리지 사용을 하는 일이 생겼다.

나는 처음 초기 접근을 Localstorage로 접근했다.

이유는 사용자가 브라우저를 닫아도 유지되도록하기 위해서였다.

하지만? 쿠키를 공부하고 느꼈다. 왜? 로컬스토리지를 사용했을까?

내가 개발한 부분은 사용자가 실제 제품의 무게를 측정했을 때 그 값을 스토리지에 보관하여 해당 보관 된 데이터가 사용자가 어떤 페이지를 다녀오더라도 유지되는 것 이었다. 또한 정전 + 인터넷 연결 끊김 과정이 잠깐 발생했을 때도 유지되어야한다는 것

그래서 이 과정을 어떻게 해결할까 고민했다.

자 그럼 이제 보자. 개발엔 정답이 없다.

Cookie던 Storage이던 정당한 이유가 있으면 된다.

그럼 Cookie와 Storage를 언제 사용하는지 확인해보자

쿠키와 스토리지를 쓰는 이유

HTTP 2가지 특징인 비연결지향과 상태없음으로 인해 서버는 클라이언트의 상태를 알 수 없다.

그렇기에 클라이언트의 상태를 알아야 될 경우 (EX: 로그인 인증) 쿠키와 세션을 사용한다.

HTTP 2가지 특징

비연결지향 (Connectionless): request에 대한 response를 해주면 서버와 클라이언트가 연결이 끊어진다. 커넥션을 낭비하지 않기 때문에 리소스의 낭비를 줄일 수 있다.

상태없음 (stateless): 커넥션을 끊는 순간 상태 정보를 유지하지 않는다.

Cookie

Cookie의 특징

쿠키는 클라이언트 로컬에 저장되는 key - value 형태이다.

클라이언트 로컬에 저장되기 때문에 상대적으로 변조가 쉽다.

즉 안전에 좋지 않다 그렇기에 비밀번호, 사용자의 정보는 담지 않아야 한다.

브라우저가 종료 되어도 유지된다.

난 사실이게 없어지는 줄 알고 로컬스토리지를 사용했었다.

Cookie의 종류

세션 쿠키 (Session Cookie): 웹 브라우저가 종료될 때 제거되는 쿠키

지속 쿠키 (Persistent Cookie): 유효시간을 정하지 않은 경우 브라우저가 종료되어도 남아 있는 쿠키이다.

Cookie 저장 한계

클라이언트에 최대 300개 까지 쿠키를 저장 가능

서버 도메인 하나당 최대 20개의 쿠키를 저장 가능

하나의 쿠기 값은 최대 4KB까지 저장 가능

Vue3에서 js-cookie를 사용하는 방법

npm: js-cookie

A simple, lightweight JavaScript API for handling cookies. Latest version: 3.0.5, last published: 8 months ago. Start using js-cookie in your project by running `npm i js-cookie`. There are 7682 other projects in the npm registry using js-cookie.

https://www.npmjs.com/package/js-cookie


// 쿠키 생성
Cookies.set('name', 'value')
// 쿠키 읽기
Cookies.get('name') // => 'value'
// 쿠키 전체 읽기
Cookies.get()
// 쿠키 삭제
Cookies.remove('name')

프로젝트에 앞서 js-cookie를 사용하기로 생각하고 진행했다. 기본적인 사용법은 위와 같다.

아래는 내가 이번 프로젝트에서 사용한 방법이다.

vue3를 이용하여 진행했다.


// 일단 js-cookie를 npm으로 설치 후에 import를 진행한다.
import Cookies from 'js-cookie';

// 쿠키를 저장하는 함수를 만든다.
const setLOTActualWeightCookie = () => {
    // 만료일은 일주일로 해봄
		// 쿠키 이름, 값, 유효 기간
    Cookies.set('productionLOTWeight', lotActualWeight.value, { expires: expirationDate });
};

localStorage와 sessionStorage

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값을 저장할 수 있게 해줍니다.

이 둘을 사용하면 페이지를 새로고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도 (localStorage의 경우) 데이터가 사라지지 않고 남아있습니다.

중요한건 “쿠키를 사용하면 똑같이 쓸 수 있는데? 굳이 ?” 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까?

쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.

이런 특징으로 쿠키보다 더 많은 자료를 보관할 수 있다.

쿠키와 다르게 HTTP헤더를 통해 스토리지 객체를 조작할 수 없다.

웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있습니다.


setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.

보안적인 측면

쿠키와 웹 스토리지는 각각의 특징과 사용 용도에 따라 보안 측면에서 다른 특성을 가지고 있습니다. 어떤 것이 더 보안적으로 좋다고 할 수는 없으며, 사용 사례와 보안 요구 사항에 따라 적절한 것을 선택해야 합니다.

쿠키의 보안 특징:

도메인 단위의 제한: 쿠키는 도메인 단위로 제한되어 해당 도메인에만 전송됩니다. 이로 인해 다른 도메인의 스크립트가 쿠키에 액세스하는 것이 어려워집니다.

암호화: 쿠키는 안전한 연결 (HTTPS)에서만 전송되기 때문에 통신이 암호화되어 있습니다.

HttpOnly 속성: HttpOnly 속성을 사용하면 JavaScript에서 쿠키에 직접 액세스할 수 없게 할 수 있습니다.

웹 스토리지의 보안 특징:

도메인 단위의 제한: 로컬 스토리지와 세션 스토리지는 도메인 제한이 없으므로, XSS 공격에 취약할 수 있습니다.

자바스크립트 직접 액세스: 웹 스토리지는 JavaScript에서 직접 액세스할 수 있습니다. 이는 악의적인 스크립트에 노출될 경우 보안 문제가 될 수 있습니다.

크기 제한: 쿠키에 비해 저장 용량이 크기 제한이 높아 보다 많은 데이터를 저장할 수 있습니다.

종합적인 관점에서:

쿠키: 주로 세션 관리 및 상태 유지를 위해 사용되며, 서버와 클라이언트 간의 소규모 데이터 교환에 적합합니다. 중요한 정보는 최소화하고, Secure 및 HttpOnly 속성을 활용하여 보안 강화가 가능합니다.

웹 스토리지: 대량의 데이터를 클라이언트 측에서 유지하거나 일시적인 데이터 저장에 적합하며, 서버와 더 많은 데이터 교환에 활용됩니다. 그러나 XSS 공격에 대한 조심이 필요하며, 중요한 정보의 저장은 지양해야 합니다.

두 기술 모두 안전한 사용을 위해 보안 관련 가이드라인을 준수하는 것이 중요합니다. 보다 강력한 보안이 요구되는 상황에서는 추가적인 보안층을 고려해야 합니다.

즉 민감한 정보를 담는것도 아니기에 서버측에 저장할 필요도 없고 큰 용량을 사용하는 것도 아니다. 그리고 작은 정보를 담기에 쿠키가 좋다고 생각했다. 그래서 난 쿠키를 사용하기로 했다.

See more posts