관리 메뉴

흰둥씨의 개발장

[React] JWT(JSON Web Token) 본문

[오늘의 공부]/React.js

[React] JWT(JSON Web Token)

돈워리비해삐 2023. 6. 6. 05:03

JWT?

ㄴ데이터가 JSON으로 이루어져 있는 토큰 

ㄴ대표적인 두가지 인증방식(세션기반, 토큰기반)

 

**세션기반 인증 시스템?

ㄴ서버가 사용자의 로그인중인 것을 기억하고 있다는 것 

ㄴ사용자가 로그인하면 서버는 세션 저장소에 사용자 정보를 조회하고 세션 id발급해줌 

ㄴ발급된 id는 주로 브라우저 쿠키에 저장됨

ㄴ사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을 조회하고 로그인여부를 결정하여 작업을 처리, 응답함

   (발급된 id의 발급번호 같은걸 세션저장소목록을 조회해서 있는지 유효한지 확인함)

ㄴ세션저장소는 주로 메모리, 디스크, 데이터베이스...를 사용함

ㄴ단점) 서버 확장이 번거로워짐

   (서버인스턴스가 여러개되면 모든 서버끼리 같은 세션을 공유해야하므로 ... 사용자가 많을수록서버의 양이 방대해짐)

ㄴ하지만 구관이 명관이라 잘 쓰는 편

 

**토큰기반 인증 시스템?

ㄴ토큰은 로그인이후 서버가 만들어주는 문자열

ㄴ문자열안에 사용자 로그인정보가 들어있고, 해당 정보가 서버에서 발급됨을 증명하는 서명이 있음 

ㄴ서명데이터는 해싱 알고리즘으로 만들어짐 

ㄴ서버에서 만들어준 토큰은 서명이 있기 때문에 무결성 보장됨 

ㄴ사용자가 로그인하면 서버에서 사용자에게 토큰 발급해주고, 다른 api요청할때 발급받은 토큰과 함께 요청하여 유효검사후 처리,응답함

ㄴ장점) 서버에서 사용자 로그인 정보를 기억하기 위해쓰는 리소스가 적음 , 서버확장성 매우 높음 

ㄴ유의점 1)알고리즘정보를 none으로 입력해서 공격하는 경우 (라이브러리를잘쓰자)

ㄴ유의점 2)토큰의 디코딩이 쉬워서 user의 민감정보를 토큰발행시 넣으면 안됨(최소한의 정보만을 활용할 것)

ㄴ유의점 3)시크릿키를 대충 적으면 안됨(시크릿키를 어렵게길게적고, 공유하지말것, 아니면 생성용/검증용으로 2개의 키 만들어서 사용)

ㄴ유의점 4)사용자가 토큰 탈취당하면 (잃어버린사람책임이지만) 토큰을 회수, 사용정지하기가 좀 어려움 (httpOnly 쿠키사용/ jwt블랙리스트? / 토큰의 유효기간을 짧게 유지시킴-이렇게하면 refresh Token운영해야함 _refresh token rotation) 

 

**모델메서드 : 모델에서 사용할수 있는 함수 (2가지)

ㄴ인스턴스 메서드 : 모델을 통해 만든 문서 인스턴스에서 사용할 수 있는 함수

ㄴ스태틱 메서드: 모델에서 바로 사용할수 있는 함수 

 

**토큰을 저장할때는 1) 브라우저의 localStorage 혹은 sessionStorage에 담거나 2) 브라우저 쿠키에 담아서 사용

1)번은 매우 편리하고 구현하기도 좋으나 페이지에 악성스크립트 삽입하면 토큰을 쉽게 뺏김(XSS)

2)번도 문제가 없는건 아니나 httpOnly라는 속성을 활성화 하면 자바스크립트를 통해 쿠키 조회 할수 없게 처리 해서 안전하게 사용가능 but 2)번도 CSRF에 취약할수 있음