JWT 기본 개념 요약

jwt를 사용하지 않다보니 대충 알고만 있다가 조금 더 대충 알게된 내용과 기존에 알던 내용을 정리하여 기록한다.

 

기본 개념

JWT는 Json Web Token으로 json형태로 된 토큰이다,

 

토큰은 header, payload , signature의 내용으로 구성되어 있으며, 토큰의 예시는 아래와 같다.

 

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. 

eyJ0eXBlIjoiSldUIiwibmlja25hbWUiOiJIYWliYW5lIiwicHJvZmlsZSI6ImltYWdlVVJMIiwiaWF0IjoxNzAzNzQyNjc4LCJleHAiOjE3MDM3NDM1NzgsImlzcyI6Iu2GoO2BsOuwnOq4ieyekCJ9.

MgQ0RHq9xw52xGWPY-ZRTrFF89Kx94ednLzHWlFAGj8

 

엔터키를 넣어서 구분을 했는데 실제로는 한 문자열로 나오고 (.)으로 각 구성이 구분된다.

 

header : 사용되는 알고리즘과 타입에 대한 정보(base64-url-safe로 인코딩)

payload : 데이터 (base64-url-safe로 인코딩)

signature : 유효성 검증(header에 있는 알고리즘과 서버에 있는 비밀키를 활용해 생성) 

 

*여기서 header의 base64-url-safe는 base64의 경우 마지막에 '='이라는게 공통적으로 들어간다. 이 부분이 url로 전달되면 전송 시 적절하지 못하게 동작하는거 오류를 막기 위해 url-safe라는것이 나왔다.

 

 

사용에 대해서

jwt는 클라이언트의 쿠키에 넣어두고 header의 authorization에 데이터를 추가하여 전달하는 방식으로 사용한다.

 

쿠키에 저장을 할때는 httpOnly를 사용하여 자바스크립트에서 해당 쿠키에 접근하는 것을 막는것을 기본으로 한다.

 

그리고 추가적으로 https에서만 동작시키기 위해 secure true옵션을 준다.(http로 동작 시 유출을 막기 위함)

 

(보너스) 서버에서 전달한 쿠키가 브라우저에 저장되는 방법(나만 몰랐나;;ㅠㅠ)

서버에서 쿠키를 저장하는 방식을 써본게 1년차일때 잠깐 써본거 같다. 그리고 쿠키도 대부분 자바스크립트로 저장할때나 썼다;;(팝업 '오늘 하루 열지 않기' 정도...) 그런데 이번에 찾아보다가 알게된 나만 몰랐던 사실은 서버에서 응답해주는 header에 Set-Cookie가 있으면 해당 값을 브라우저가 알아서 저장을 해준다는 것이다. 

 

언제나 과거에 놓쳤던거를 발견하면 깜짝 놀랄때가 많다. 연차가 이런데 이것도 몰라!?