Local Storage, Session Storage, Cookie 정리

Local Storage, Session Storage, Cookie 정리

2023. 6. 29. 18:21ㆍ개발/CS

728x90

로컬스토리지(Local Storage)

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

하나의 키에 오로지 하나의 값만 저장됨.
데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생 로컬 저장소에 저장되며 만료날짜가 없음.(사용자가 브라우저를 닫거나, 컴퓨터를 종료해도 만료되지 않음)
최대 저장용량은 5MB
보통 사용자의 행위를 기억하거나, 로그인 유지를 위한 값 등으로 사용되며 로컬스토리지 데이터는 자동으로 서버로 전송되지 않음.(쿠키는 자동 전송됨)

로컬스토리지 사용법

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

오리진이란?

오리진이란 위 그림 URI에서 protocol과host(hostname,port)를 합친것을 오리진이라고 한다.

위 그림에서 search는 보통 query string이라고 함.

세션스토리지(Session Storage)

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

하나의 키에 오로지 하나의 값만 저장됨.
최대 저장용량은 5MB
사용자가 브라우저를 종료하면 데이터는 만료됨.

세션스토리지 사용법

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

보통은 세션스토리지보다 로컬스토리지를 더 많이 사용함.

쿠키(Cookie)

쿠키는 브라우저에 저장된 데이터 조각이다. 클라이언트에서 먼저 설정할 수도 있고 서버에서 먼저 설정할 수도 있다. 보통은 서버에서 먼저 설정해서 쿠키를 만드는게 일반적이다.

서버에서 응답헤더로 Set-Cookie로 설정해서 쿠키를 보내면 그 때 부터 클라이언트에서 요청헤더 Cookie에 설정되어 자동으로 서버에 전달되게 되고 브라우저에도 저장되게 된다.

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

저장용량은 최대 4KB까지 가능.

보통 로그인, 장바구니, 사용자 행동분석 등에 사용된다.

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

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

ex.)

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

하지만 이 방법은 권장하지 않는다.

위 방법은 쿠키에 대한 제이권을 클라이언트에서 가지게 되는데,

쿠키에는 보통 민감한 정보들이 담길 수 있기 때문에 클라이언트에 제어권을 가지게 하는 것이 아닌 서버가 가지게 만들어야 한다.

세션 쿠키

세션 쿠키는 Expries 또는 Max-Age 속성을 지정하지 않은 것을 말한다. 브라우저가 종료되면 쿠키도 사라짐.

Expries : 쿠키 만료 날짜를 설정하는 속성
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로 쿠키를 조회하지 못하게 해주는 속성.
- 이 속성을 설정 하지 않으면 만약 공격자가 자바스크립트 document.cookie를 통해 쿠키에 대한 정보를 빼낼 수도 있기 때문에 이것을 방지하기 위해 설정함.
SameSite : 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용하는 속성
path: 쿠키에 접근할 수 있는 절대 경로를 설정하는 속성

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

공통점 :

브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버부하를 방지할 수 있음
캐싱으로 인해 다운로드하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리 다운로드 가능
사이트 기본 설정 색상, 글꼴 크기 등을 저장하거나 로그인 상태를 유지할 때 사용 됨

차이점 :

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

세션기반 인증 방식 개념

세션 : 서버와 클라이언트의 연결이 활성화된 상태를 의미
세션ID : 웹 서버 또는 DB에 저장되는 클라이언트에 대한 유니크한 ID

세션기반 로그인 프로세스

1. 처음 로그인 => 세션 ID 생성 => 서버에서 세션ID를 쿠키로 설정해서 클라이언트에 전달
2. 클라이언트가 서버에 요청을 보낼 때 해당 세션ID를 쿠키로 담아서 전에 로그인 했던 아이디인지 확인
3. 로그인 유지

단점

1. 사용자의 상태에 관한 데이터를 서버에 저장하면 로그인 중인 유저의 수가 늘어난다면 서버의 메모리 과부화가 일어날 수 있음.
2. DB중 RDBMS에 저장한다면 직렬화 및 역직렬화에 관한 오버헤드가 발생함.

직렬화와 역직렬화

직렬화란 외부의 시스템에서도 사용할 수 있도록 바이트(byte) 형태로 데이터를 변환하는 기술임.

역직렬화는 내부 시스템에서 사용할 수 있게 객체 등의 형태로 변환하는 것을 말함.

ex.)

자바스크립트 진영에서 JSON을 기반으로 직렬화와 역직렬화를 보면

직렬화는 JSON Object를 JSON 형태를 가진 문자열로 변환하는 것(JSON.stringify)이며

역직렬화는 문자열을 JSON Object로 바꾸는 것(JSON.parse)을 역직렬화라고 한다.

토큰기반 로그인 방식(access Token, refresh Token) 개념

토큰기반 인증 방식은 인증은 토큰기반 인증서버를 통해 하고 다른 컨텐트를 주는 서버는 stateless하게 내버려두자는 이론이 담겨있는 인증 방식이다. 토큰은 주로 JWT 토큰이 활용됨.

1. 인증로직 => JWT 토큰 생성(access, refresh Token)
2. 사용자가 이후에 access 토큰을 HTTP Header - Authorization 또는 HTTP Header - Cookie에 담아 인증이 필요한 서버에 요청해 원하는 컨텐츠를 가져옴.

JWT란?

JWT는 JSON Web Token을 의미하고 헤더, 페이로드, 서명으로 이루어져 있고 JSON 객체로 인코딩 되며 메시지 인증, 암호화에 사용된다.

Header :
- 어떠한 방법의 서명 알고리즘을 사용할 것인가에 대한 정보
Payload :
- 데이터, 토큰 발급자, 토큰 유효기간 정보
Signature
- 헤더에 정의된 알고리즘으로 인코딩된 Header + 인코딩된 Payload + 비밀키(secret key)를 기반으로 생성된 서명값.

장점

사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도 인증 저장소가 필요 없음.
다른 유형의 토큰과 비교했을 때 경량화 되어있음.
디코딩했을 때 JSON 형태로 나오기 때문에 JSON을 기반으로 쉽게 직렬화, 역직렬화가 가능함.

단점

토큰이 비대해질 경우 서버 과부화에 영향을 줄 수 있다.
토큰을 탈취당하면 디코딩 했을 때 데이터를 볼 수 있음.

토큰기반 인증 방식을 구현할 때는 refresh토큰과 access토큰 두 개를 기반으로 구현한다.

access토큰의 수명은 짧게, refresh토큰의 수명은 길게 설정함.

refresh토큰은 access토큰이 만료되었을 때 다시 access토큰을 얻기 위해 사용되는 토큰이다.

이를 통해 access토큰이 만료되었을 때마다 인증에 관한 비용이 줄어들게 된다.

로그인을 하게 되면 access토큰, refresh토큰 두 개를 얻는다.

그 다음 access토큰이 만료가 되거나 사용자가 새로고침을 할 때 refresh토큰을 기반으로 새로운 access토큰을 얻음

주의점

이렇게 access토큰을 얻었다면 그 이후에 요청을 할 때 HTTP Header - Authorization또는 HTTP Header - Cookie에 담아 요청을 하게 되는데 이 때 아래와 같은 규칙을 지키는게 좋다.

Bearer <token> 으로 Bearer을 앞에 둬서 토큰기반 인증 방식이라는 것을 알려줘야 함.
HTTPS를 사용해야 함.
쿠키에 저장한다면 sameSite : 'Strict'을 써야 함.
수명이 짧은 access token을 발급해야 한다.
url에 토큰을 전달하지 말아야 한다.