JWT와 공생하는 또 다른 방법

https://github.com/gronxb/hot-updater/pull/164
hot-updater의 이야기는 계속 됩니다.

하다보니 커밋이 80개가 쌓였다.. 생각보다 내용이 방대하고 spec이 바뀌는걸 따라가기가 벅찰정도이다..

머지에 성공하더라도 앞으로 유지보수 할 생각에 신이 난다 ㅎㅎ

hot-updater의 firebase plugin 개발하던중 JWT를 색다르게 다루게 된 경험이 생겼다.

저번 Hono로 firebase 정리하기
에서 사실 JWT에 대해서도 언급하고 싶었지만, 하고 싶은 말이 많아서 따로 정리하게 되었다

---

JWT

Json Web Token의 줄임말이다. JWT의 자세한 내용들은 좋은 글들이 충분히 많으니 참고한 출처 몇개만 남기겠다!

google wallet 박진님 블로그

---

응용

실제 JWT는 로그인 과정에서 많이 사용한다.

최초 로그인시에 id, password 내용을 post요청 보내고, 그에 대한 response값으로 JWT를 발급받는다.

이후 계정에 대한 인증이 필요할땐 header의 Authorization에 Bearer에 담아서 보내곤 한다.

하지만 JWT의 payload에 대한 잡기술이 존재한다.

1. 필요한값을 넣을 수도 있지만 원하는값을 넣을 수도 있다.
2. 나는 URL에 대해 60초의 만료 기간이 필요했고, JWT는 만료 기간을 지원한다.

hot-updater에서는 이를 어떻게 활용했을까 살펴보자

---

로직 흐름

실제 사용한 배경에 있어서 로직 흐름만 간단하게 읊어보자면

1. const jwtSecret = crypto.randomBytes(48).toString("hex");
   //를 통해 sercretKey를 발급한다.```

2. babel을 이용해 AST를 순회해 identifier를 바꿈으로써, 사용자의 secretKey를 바꾼다.
3. 첫번째 함수 호출에 해당 secretKey를 통해 JWT를 발급한다.
4. 두번째 함수 호출에 JWT를 해석하는 로직에 secretKey를 같이 넣어 해석한 후 URL에 붙여 발급한다.

자세히 알아보자

---

과정

// 명시적인 타입을 선언한다. 이 코드는 사용자에게 `직접` 주입 받을 예정이다.
declare global {
  var HotUpdater: {
    JWT_SECRET: string;
  };

//secretKey를 넣어 JWT를 발급한다.
const appUpdateInfo = await getSignedUrl({
	jwtSecret: HotUpdater.JWT_SECRET,
});
  
//사용자가 가지고 있는 secretKey를 가지고 다시 해석한다.
const result = await verifyJwtSignedUrl({
	jwtSecret: HotUpdater.JWT_SECRET})

당연히 이렇게만 하면 JWT_SECRET을 받아오는 과정이 없어서 다른 임의의 값이 들어오겠지만 아래와 같은 처리를 해주었다.

이렇게 사용자의 컴퓨터에서 랜덤 바이트를 통한 secretKey를 생성해준 후

babel-AST 에서 사용한 기술로 코드를 사용자의 코드에서 바꿔준다.

이렇게 함으로써 사용자는 본인이 생성한 secretKey로만 접근 가능한 fileURL을 얻게된 것이다.

로그인 요청 - getSignedUrl 함수
JWT 검증 - verifyJwtSignedUrl 함수
로그인 성공 - fileDownloadURL 받기

무척이나 흡사해 보이고 같은 로직이다.

---

결론

JWT는 생각보다 다양한 방식으로 요리할 수 있었다.

로그인 인증만이 아니라 URL에 대한 만료 기간을 설정, 보안을 추가하는 용도로도 쓸 수 있다는 걸 알게 됐다.

사실 난 로그인에나 쓰일 줄 알았지, 보안은 여러 요소에도 필요하다는 사실을 망각하기도 했었다.

참 이 오픈소스를 다루며 얻어가는 것이 너무나도 많다

이것 말고도 다른 기술들도 정말 다양한 곳에 사용할 수 있겠지? 라는 생각을 한다.