개발자 도구에 있는 애플리케이션이란?
브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널

서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한번 통신이 되면 끊어진다.
따라서 서버는 클라이언트가 누구인지 계속 인증을 해줘야 한다. 하지만 그것은 매우 귀찮고 매우 번거로운 일이다.
또한 웹 페이지의 로딩을 느리게 만드는 요인이 된다.
그런 번거로움을 해결하기 위해 쿠키, 세션 스토리지, 로컬 스토리지를 사용한다.

1. 브라우저 스토리지 vs 쿠키

스토리지와 쿠키의 공통사항

스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다.
두 스토리지 모두 HTML5에서 새로운 저장 옵션으로 도입이 된 개념이다.
key-value 페어 객체 형태로 데이터가 저장된다.

1. 브라우저 스토리지

쿠키의 단점을 보완해서 만든 기술이다. 쿠키보다 보안이 우수하며 용량이 큼

1) 로컬 스토리지

ex) 자동 로그인, 장바구니
사용자가 지우지 않는 이상 데이터의 영구성이 보장된다. 사용자가 지우지 않는 이상 계속 클라이언트 웹 브라우저에 남아있다. storage 3가지 중 허용 용량이 가장 크다(10MB).
지속적으로 필요한 정보를 저장하기에 좋다.

2) 세션 스토리지

ex) 비회원 장바구니, 일회성 로그인
윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉, 데이터의 영구성을 보장하지 않는다. 일회성의 데이터

2. 쿠키

ex) 3일간 다시 보지 않음 팝업 창
스토리지 개념 도입 이전 저장소로 사용이 되던 것 4KB까지만 저장이 가능함
지속 시간을 설정할 수 있음(만료 기간 설정 가능)
직접적이지 않은 데이터를 저장할 때 사용한다.
쿠키는 사이트에서 방문한 페이지를 저장하거나 유저 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다.

2. 토큰

1) 토큰이란?

컴퓨터 과학 및 정보 보안 분야에서 여러 목적으로 사용되는 일련의 문자열

2) 토큰을 사용하는 목적

인증, 권한 부여 등의 목적으로 활용됨

(1) 인증 및 권한 관리에서의 토큰

인터넷에서 사용자가 자신의 신원을 확인하거나 권한을 부여받기위해 사용하는 것이다. 이런 인증 토큰은 사용자의 로그인 상태를 나타내거나, 특정 자원에 접근할 수 있는 권한을 부여받은 것을 나타낼 수 있다.
프론트엔드나 백엔드에서 사용자 인증을 위해 토큰(Token)을 사용하고 있다.

(2) 로그인할 때 토큰의 흐름

일반적으로 웹 애플리케이션에선 사용자가 로그인하면 서버에서 발급한 토큰을 클라이언트 측에서 저장하고, 이 토큰을 이용해 인증된 요청을 서버에 보낸다.
만약 클라이언트가 토큰을 보유하지 않거나 만료된 경우, 보통은 로그인 페이지로 리다이렉트하여 사용자에게 다시 로그인하도록 유도한다.

3. 토큰 저장 방법

토큰은 일반적으로 브라우저 스토리지와 쿠키 2가지 방법 중 하나를 사용해 저장할 수 있다.
각 방법에는 장단점이 있으며, 보안 요구 사항과 사용 사례에 따라 다르게 선택할 수 있다.

1) 브라우저 스토리지 (로컬 스토리지 또는 세션 스토리지)

(1) 로컬 스토리지

• 특징 : 데이터가 브라우저에 영구적으로 저장되며, 브라우저를 닫고 다시 열어도 데이터가 유지된다.
• 장점 : 간편한 사용, 대용량 데이터 저장 가능 (대부분의 브라우저에서 5MB 정도)
• 단점 : 서버에 자동으로 전송되지 않으므로, 토큰을 사용할 때마다 애플리케이션 코드에서 직접 전송해야 한다.

(2) 세션 스토리지

• 특징 : 데이터가 브라우저 세션 동안만 유지되며, 브라우저 탭을 닫으면 데이터가 삭제된다.
• 장점 : 보안성이 로컬 스토리지보다 더 높음, 대용량 데이터 저장 가능
• 단점 : 로컬 스토리지와 마찬가지로, 서버에 자동으로 전송되지 않는다.

2) 쿠키

특징

• 특징 : 쿠키는 브라우저에 의해 관리되며, 설정된 도메인에 대한 모든 HTTP 요청에 자동으로 포함된다.
• 장점 : 서버에 자동으로 전송되므로, 추가적인 코드 없이도 서버가 토큰을 받을 수 있다.
• 단점 : 저장 공간이 제한적 (일반적으로 4KB), 쿠키 탈취 공격 (XSS, CSRF) 등의 보안 위험이 존재한다.

보안 옵션

• HttpOnly : 자바스크립트에서 쿠키에 접근하지 못하도록 설정할 수 있다.
• Secure : HTTPS 연결에서만 쿠키가 전송되도록 설정할 수 있다.
• SameSite : 쿠키가 다른 사이트와의 요청에서 전송되지 않도록 설정할 수 있다.

4. 요약

브라우저 스토리지

보안 설정이 상대적으로 적고, 클라이언트 측에서 토큰 관리를 해야하지만, 대용량 데이터를 저장할 수 있고 사용이 간편하다.

쿠키

서버에 자동으로 전송되며 보안 설정을 통해 보호할 수 있지만, 저장 용량이 제한적이고, XSS와 같은 공격에 취약할 수 있다.

어떤 방법을 사용할지는 애플리케이션의 보안 요구 사항과 사용 사례에 따라 결정한다.
예를 들어, 민감한 정보가 포함된 토큰의 경우 보안을 강화하기 위해 쿠키를 HttpOnly와 Secure 옵션을 사용해 저장하는 것이 좋습니다.
반면, 단순한 정보나 보안이 덜 중요한 경우 로컬 스토리지를 사용할 수 있다.