Naver Blog

[JWT] Refresh Token

저번 게시물에서 JWT 토큰 탈취의 위험성에 대해서 얘기했었다. 이것을 어떻게 방지할까? 일단 크게 탈취 경로는 주로 이 두가지이다. 메모리 접근을 통한 탈취: 클라이언트 측에서 악성 스크립트나 악성 코드가 메모리나 스토리지에 저장된 토큰에 접근하여 탈취하는 경우. XSS 공격 등이 대표적인 예다. 네트워크에서의 탈취: 클라이언트와 서버 간의 통신이 암호화되지 않은 경우, 공격자가 트래픽을 가로채고 탈취하는 경우이다. HTTP를 통한 통신이나 보안이 취약한 네트워크가 위험합니다. 여기서 문제 어떻게 막을까 유효기간을 짧게 두어서 자주 로그인하도록 해서 막기? Secure 속성으로 HTTPS만을 사용해 SSL이나 TLS 암호화된 헤더 및 데이터를 보내기 + HttpOnly 속성을 사용해서 javascript 주입을 막기 + SameSite 속성으로 엉뚱한 곳에 다른 사이트에 보낼 쿠키 보내는 것을 방지해주기(CSRF 방지) + 탈취가 되어도 유효기간이 다른 Access Token, R

Naver Blog

[JWT] JWT란? (JSON Web Token)

웹은 stateless(무상태)한 프로토콜 HTTP를 기반으로 하기 때문에 페이지를 이동하거나 새로고침을 하게 되면 상태를 저장하고 있지 않기에 새로운 요청으로 간주된다. 그래서 서버에서 해당 이용자에 대한 정보를 가지고 있거나 아니면 요청이 있을때마다 서버에서 발급해준 토큰을 보내어 로그인상태를 인증해주는 방법을 이용해서 로그인 상태임을 확인하곤 한다. 전자는 세션을 활용한 로그인 상태 인증 방법인데 이는 쿠키로만 관리하는 로그인 방식이 쿠키(사용자의 id, pw 등)를 사용자의 저장소에 저장을 하기에 변조되거나 탈취되는 불상사를 막기 위해 고안되었다. 서버에서 세션을 생성하고 세션에서 DB에 세션ID를 사용자마다 생성해주고 그 ID를 쿠키에 담아서 전달해주기 때문에 중요한 정보를 넘겨줄 일도 없고 비교적 서버에 저장되기에 변조될 가능성도 낮다. 그렇지만 한편으론 세션을 저장해줄 DB를 관리해주고 또 세션 DB에 저장되어 있는지 DB 탐색도 수행해야 하기에 큰 서비스의 경우에 큰

Naver Blog

[HTML] Semantic Tag (시멘틱 태그)가 무엇이고 왜 사용해야 하는가? (<div> 태그 남발하는 사람 필독)

문제상황 프론트 관련 글들을 읽다가 발견한 처음 보는 용어인 시멘틱 태그를 발견하여 읽어보게 되었습니다. 그런데 html을 작성할 때 div를 남발하던 습관이 좋지 않았음을 깨닫게 해주어서 이에 대해서 공유하기 위해 글을 올립니다! Semantic Tag가 뭔데? 시멘틱(semantic) 태그는 HTML5에서 도입된 중요한 개념으로, 웹 콘텐츠의 의미를 명확하게 정의하는 데 사용됩니다. 이러한 태그들은 HTML 문서 구조를 더 논리적으로 만들어주는 역할을 합니다. 예를 들어, <div>와 같은 일반적인 블록 레벨 요소는 의미를 담고 있지 않지만, 시멘틱 태그들은 요소가 웹 페이지에서 수행하는 역할을 나타냅니다. 주요 시멘틱 태그들: <header>: 페이지나 섹션의 헤더를 정의 <nav>: 내비게이션 링크들을 묶는 역할 <main>: 문서의 주요 콘텐츠를 감싸는 요소 <section>: 문서 내 특정 주제별로 구분된 섹션을 나타냄 <article>: 독립적으로 구분될 수 있는 콘텐츠

Naver Blog

[React] 주스탄드(zustand)로 회원정보 상태 관리하기(Session Storage)

문제 상황 프로젝트를 하는 중 회원의 프로필 카드를 어느 페이지를 가던지 띄우기로 했는데 그 프로필 카드에 출력되는 회원의 정보를 페이지 이동, 새로고침 때마다 사용자 정보를 불러오는 api를 호출해 받아와서 출력해주는 방법에 대해서 생각해보았다. 그런데 이 방법은 마치 JWT Token을 페이지에 해당하는 상태로 저장하고 이동할 때마다 refresh token으로 access token을 재발급 받아 페이지 별, 컴포넌트 별 상태로 저장하는 급의 비효율, api 호출 낭비, 사용자 경험의 수준 하락을 초래할 것이라 생각이 들었다. 아이디어 그래서 생각한 것은 바로 JWT처럼 주스탄드로 로그인 시에 jwt 받아서 세션 저장하는 김에 같이 전역상태로 사용자의 정보를 저장하는 것이었다. 이렇게 한다면 사용자의 정보가 필요한 페이지든 컴포넌트에서 별도의 api 호출도 없고 세션 스토리지에 저장해두는 것이기에 읽기가 훨씬 빠르다. 구현 처음에 구글에 쳐도 코드가 거의 없어서 혼자 낑낑대다가