[ Frontend ] JWT 토큰을 저장하는 방법

JWT ( Json Web Token )

Json Web Token 이란 사용자의 인증이 담긴 정보를 암호화한 토큰을 의미한다.

JWT 정보를 Authorization 에 담아 전송하며, 이것을 서버에서 검증하여 사용자의 정보 열람, 권한 부여 등의 인증/ 인가 작업을 수행할 수 있다. JWT 탈취하는 주요 공격으로는 XSS, CSRF 공격이 있다.

XSS ( Cross Site Scripting ) 

CSS 라고 불리지 않는 이유는 cascading style sheets ( css ) 가 이미 널리 쓰고 있기 때문이다.

XSS 공격은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 하여, 사용자의 세션 혹은 웹사이트를 변조하여 악의적인 콘텐츠/ 피싱 공격을 의미한다.

CSRF ( Cross Site Request Forgery )

정상적인 Request 를 가로채 백엔드 서버에 변조된 Request 를 보내 악의적인 동작을 수행하는 공격을 의미함.

이미지 태그를 가장하여 은행 계좌에서 돈을 출금하는 공격 코드의 예시이다.

<img scr="https:///bank.example.com/withdraw?account=you&amount=1000000&for=me">

이런 식으로 바꾸면, 이미지 태그가 실행되면 은행으로부터 돈을 인출하는 코드를 실행하는 예시이다.

유저가 사이트에 들어와서 이미지 HTML 코드가 불러와지면, 출금이 되는 코드를 실행하게 되는 것이다.

 

JWT 어디에 저장하는데?

🍪 쿠키

아무 옵션 없이 실행하는 쿠키는 XSS, CSRF 공격 모두 취약하다.

하지만 httpOnly ( XSS ) / SameSite ( CSRF ) / Secure ( HTTPS 프로토콜을 통한 Secure 요청으로만 전송됨) 옵션을 사용한다면, 더욱 안전하게 사용할 수 있다.

💾Web Storage

로컬 스토리지

자동으로 request 에 담기는 쿠키와는 다르게 js 코드에 의해서만 헤더에 담기기 때문에, 공격자가 request 를 보내기 어렵다. 하지만 자바스크립트로 접근이 가능하기에 XSS 공격에 취약하다.