[새싹x코딩온] 풀스택 개발자 부트캠프 과정 7주차-2 jwt, storage
JWT 란?
JWT JSON Web Token은 사용자가 자신의 신원이나 특정 권한을 증명하기 위해 JSON 형식의 데이터를 안전하고 compact한 형태로 표현하는 토큰입니다 JWT는 주로 클라이언트와 서버 간 인증 및 권한 부여에 널리 활용되며, 인증된 사용자 세션을 관리하는 데에도 자주 사용됩니다
JWT는 “Header”, “Payload”, “Signature” 세 부분으로 구성되며, 각각 ‘.’(점)으로 구분됩니다
Header - JWT가 사용하고 있는 알고리즘 정보(예: HS256, RS256)와 토큰 타입(JWT)을 포함합니다
예시: `{"alg": "HS256", "typ": "JWT"}`
Payload 페이로드 - 실제 인증 정보나 사용자 정보(예: 사용자 ID, 권한), 만료 시간(exp), 발급자(iss), 주체(sub), 대상(aud) 등의 클레임(Claim)을 담고 있습니다 페이로드에 중요한 정보(비밀번호, 민감 데이터)를 직접 담는 것은 절대하면안됩니다!!! JWT 자체는 Payload를 암호화하지 않고 단순 Base64URL 인코딩하기 때문!
Signature- Header와 Payload를 Base64URL 인코딩한 뒤, 두 값을 연결한 문자열에 비밀 키(secret)나 비대칭키의 개인키(private key)를 이용해 서명을 생성한 부분입니다 이를 통해 토큰이 임의로 변경되었는지(무결성), 위조되지 않았는지 검증할 수 있습니다
동작 방식
1. 사용자가 로그인하면 서버는 사용자의 신원정보(예: 사용자 ID)를 포함한 Payload를 만들고 이를 특정 비밀키로 서명해 JWT를 생성합니다
2. 클라이언트는 이 JWT를 받아 로컬 저장소(localStorage)나 쿠키 등에 저장합니다
3. 이후 클라이언트는 API 요청 시 Authorization 헤더나 다른 전송 방식을 통해 JWT를 서버에 전달합니다
4. 서버는 전달받은 JWT의 서명을 비밀키로 검증하여 유효한 토큰인지 확인한 후, Payload에 담긴 정보를 바탕으로 인증된 요청임을 판단합니다
장점
JWT 안에 사용자 정보나 권한 정보가 포함되어 있어 별도의 세션 저장소가 필요 없습니다
단점 및 주의사항
민감정보 포함 금지 JWT Payload는 쉽게 디코딩 가능하므로, 암호나 개인 식별정보와 같이 노출되면 위험한 정보는 담지 않아야 합니다
Web storage
// localStorage에 데이터 저장
localStorage.setItem('username', 'Alice');
// localStorage로부터 데이터 읽기
const userName = localStorage.getItem('username'); // 'Alice'
// localStorage에서 데이터 삭제
localStorage.removeItem('username');
// sessionStorage 사용방법도 동일
sessionStorage.setItem('sessionKey', 'someValue');
const sessionVal = sessionStorage.getItem('sessionKey'); // 'someValue'
sessionStorage.removeItem('sessionKey');
웹 스토리지는 웹 애플리케이션이 사용자 브라우저 내에 데이터를 로컬로 저장할 수 있는 기능을 제공하는 기술로, HTML5 표준에 포함되어 있습니다
이 기술을 통해 서버와의 통신 없이도 상대적으로 많은 양의 데이터를 클라이언트 단에 안전하게 저장하고 빠르게 접근할 수 있으며, 사용자의 브라우저 세션 또는 영구 저장 형태로 관리할 수 있습니다
주요 특징과 종류
큰 저장 용량! 쿠키에 비해 훨씬 많은 양의 데이터를 저장할 수 있습니다(대략 수 MB 정도).
서버 전송 없음! 쿠키는 웹 요청 시마다 서버로 전송되지만, 웹 스토리지에 저장된 데이터는 클라이언트 로컬에만 존재하기 때문에 네트워크 트래픽 증가를 피할 수 있습니다
간단한 API! localStorage나 sessionStorage 객체를 통해 키-값 형태로 데이터에 접근하고 관리할 수 있습니다
보안 측면에선 특별한 장점이 없습니다 웹 스토리지 자체가 암호화를 제공하는 것은 아니므로 민감한 정보(예: 비밀번호, 신용카드 번호)는 직접적으로 저장하지 않는 것이 좋습니다!
도메인 단위 격리! 도메인 별로 데이터가 격리되어 관리되므로, 다른 도메인에서 웹 스토리지 데이터에 직접 접근할 수 없습니다
localStorage 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 사라지지 않고 계속 남아 있어 사용자가 설정한 앱 환경설정, 즐겨찾는 항목, 장바구니 정보 등을 오래 유지하는 데 적합합니다
sessionStorage 사용자가 해당 탭 또는 브라우저 창을 닫는 순간 해당 세션 스토리지는 제거됩니다 폼 작성 도중 페이지 이동을 하더라도 세션 스토리지에 임시 데이터가 있어 이전 상태를 복원하는 등의 경우에 유용합니다
쿠키와의 차이점
쿠키는 기본적으로 매 HTTP 요청 시 서버로 전송되므로 불필요한 트래픽을 유발할 수 있는데 웹 스토리지 데이터는 브라우저 내부에만 존재하여 네트워크 트래픽에 영향을 주지 않습니다
쿠키는 일반적으로 용량 제한(대략 4KB 내외)이 매우 작지만, 웹 스토리지는 훨씬 큰 용량(수 MB)을 지원합니다
쿠키는 주로 서버에서 생성하여 클라이언트를 통해 상태를 유지하는 용도로 많이 사용되고, 웹 스토리지는 클라이언트 측 로직에 초점을 둔 브라우저 저장소로 사용되는 경향이 있습니다!