프로그래머스 데브코스 28일차 with. TS 웹 풀스택

📚요약

지난 시간에 JWT를 발행해 login할 때 body에 담아 보내는 것까지 해봤습니다. 이번 시간에는 JWT를 body가 아닌 cookie에 담아서 보내보겠습니다. 그리고 쿠키의 옵션과 JWT의 옵션을 살짝 살펴보겠습니다.

 

📖미니 프로젝트(Library)

📄쿠키

res.cookie("token", token);

단순하게 쿠키를 보내는 코드는 정말 쉽습니다. 보낼 정보의 이름과 데이터를 보내면 끝입니다.

 

현재는 따로 패키지를 사용할 필요가 없지만 앞으로 쿠키를 요리조리 써보려면 cookie-parser라는 패키지를 이용할 수도 있습니다. 알고만 넘어가겠습니다. 

JWT를 쿠키에 담아서 보낸 결과

📑Secure true/false

해당 옵션은 http가 아닌 https로 보낼 것인가를 물어보는 옵션입니다. https는 더 복잡하기 때문에 이런 옵션이 있었다고 알고 넘어가겠습니다.

https인 페이지를 들어가면 다음과 같이 인증서가 있는 것을 확인할 수 있습니다.

네이버 인증서 & 구글 인증서

 

📑HttpOnly true/false

해당 옵션의 경우 쿠키를 API 요청으로만 받을 것인가를 물어보는 옵션입니다. 프론트엔드에서 XSS 공격을 하려고 할 때 쿠키도 공격을 당할 수 있는데 이를 방지하기 위한 옵션입니다.

res.cookie("token", token, {
  httpOnly: true,
});

HttpOnly가 true가 된 결과

🍯tip! HTTP status code 중 403은 콘텐츠에 대한 접근할 권리가 없음을 알려주는 코드이기 때문에 JWT를 사용하는 지금 사용하기 좋은 코드이다.

 

📄JWT 유효기간 설정

JWT가 무한하게 유지되면 편리하긴 하겠지만, 다른 사람이 내 JWT를 사용할 위험도 커집니다. 그렇기 때문에 JWT에는 유효기간을 설정할 수 있습니다. JWT를 발행할 때 유효기간을 설정하고 발행자의 이름을 추가할 수 있습니다.

const token = jwt.sign(
  { email: loginUser.email, name: loginUser.name },
  process.env.PRIVATE_KEY,
  {
    expiresIn: "5m",
    issuer: "nulzi",
  }
);

설정에 성공하게 되면 payload에 기존에 없던 데이터가 추가된 것을 확인할 수 있습니다. 유효기간을 알려주는 exp와 발행자를 알려주는 iss 정보가 추가된 것을 볼 수 있습니다.

 

📄추가적으로 고민해 볼 것들

모듈화, 예외처리-if~else문 말고 다른 방법, 데이터베이스 페이징 등등

 

오늘 진행한 코드는 Github에 올라가 있습니다.

ProgrammersSchool/NORMAL-LIBRARY at main · nulzi/ProgrammersSchool

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의