TIL: 2022-11-11

⚙️ 오늘 배운 주제

토큰 인증 방식

 

🐹 오늘의 기분

쿠키, 세션에 이어서 토큰을 배우고 이를 기반으로 로그인 과제를 다시 해보았다. 역시 이론을 공부할 때랑 코드를 직접 쳐보는 것은 천지차이이다. 환경변수 설정에서부터 막혔었는데 페어분 덕에 해결할 수 있었다. 처음 한 문제만 풀면 다른 파일들은 다 풀어낼 수 있을 거라고 생각했는데 그 처음 한 문제를 푸는게 너무 어려웠다ㅜㅜ 그래도 어찌저찌 시간 안에 끝내서 신기함...
개발자 도구 띄워놓고 Application-Cookies에서 쿠키가 오고가는 것만 보면서 했었는데 네트워크 탭도 봐야했던 걸 라이브세션에서 뒤늦게 깨달았다. 토큰을 받고 인증하는 함수가 미리 작성되어 있었는데 그게 비동기로 작성되어 있어서 오랜만에 비동기도 다시 써보았다. 페어분과 풀 때에는 .then()으로 썼는데 userInfo파일에서 가독성이 너무 안 좋아져서 async/await을 써보았다. 이 과제를 하면서 비동기 흐름에 대한 이해도는 전보다 훨씬 높아졌다. 레퍼런스 코드랑 비교해보면서 차근차근 리팩토링도 해봤는데 역시 보고 또 봐도 새롭다.. 😂

 

🗝 키워드

해싱, 해시 함수, 레인보우 테이블, 솔트, JWT, 헤더, 페이로드, 시그니처

 

🗣 스스로에게 설명

Hashing

단방향 암호화 방식

해시 함수(hash function)로 암호화
특징

• 항상 같은 길이의 문자열 리턴
• 서로 다른 문자열에 동일한 해시 함수를 적용하면 반드시 다른 결과값이 나옴
• 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나옴

레인보우 테이블: 해시 함수를 거치기 이전의 값을 알아낼 수 있도록 기록해놓은 표
-> 해싱 이전의 값을 쉽게 알아낼 수 있어서 보안에 취약해짐.

그래서 솔트를 활용함. 임의의 값을 더해 해싱 이전의 값을 알아내기 어렵도록 만든다.

해싱의 목적
데이터를 쓰는 것이 아니라, 동일한 값의 데이터를 사용하고 있는지 여부만 확인하는 것!

 

토큰의 등장

기존 세션에서는....
클라이언트가 요청을 보낼 때마다 데이터베이스를 살펴보는 것이 번거로움

=> 인증 정보를 아예 클라이언트한테 저장해버리자!
토큰은 유저 정보를 암호화하여 저장하기 때문에 클라이언트에 담을 수 있음.

 

토큰 기반 인증(JWT, JSON Web Token)

1. 액세스 토큰: 보호된 정보에 접근할 수 있는 권한 부여, 짧은 유효기간을 주어 탈취되더라도 쓸 수 없도록
2. 리프레시 토큰: 액세스 토큰이 만료되면 리프레시 토큰으로 새 액세스 토큰을 발급받음

리프레시 토큰이 탈취된다면 큰 문제가 발생
유저의 편의보다 정보를 지키는 것이 더 중요한 웹사이트들은 토큰을 안 쓰는 곳이 많다.

서버에서 토큰을 만든다
클라이언트는 토큰을 저장 (어디에? 로컬 스토리지, 쿠키, state 등)
클라이언트가 요청에 토큰을 함께 보내면 서버는 토큰 해독 후 맞는 응답 보냄

Session Cookie: 브라우저가 꺼지면 바로 만료되는 쿠키
Persistent Cookie: 브라우저의 종료 여부와 상관없이 MaxAge나 Expires에 적용된 기간만큼 사용할 수 있는 쿠키
토큰을 쿠키에 저장한다고 가정할 때, 액세스 토큰은 Session Cookie로, 리프레시 토큰은 Persistent Cookie로 보낸다.

구조: 헤더, 페이로드, 시그니처

1. 헤더
   • 어떤 종류의 토큰인지, 어떤 알고리즘으로 암호화하는지
   • "alg", "typ"
2. 페이로드
   • 서버에서 활용할 수 있는 유저의 정보
   • 접근 권한, 유저 이름 등 개인정보, 디코딩이 쉽기 때문에 너무 민감한 정보는 담지 않는 것이 좋음 (base64)
3. 시그니처
   • 서버의 비밀 키와 헤더에서 지정한 알고리즘을 이용하여 해싱

장점

• 무상태성, 확장성
• 안정성
• 어디서나 생성 가능
• 권한 부여 용이 (페이로드 안에 접근 가능 범위를 정의할 수 있음)

jsonwebtoken 모듈이 존재 -> 토큰 발급과 검증 가능

 

❓ 막혔던 부분

• 비동기 다루기

갑자기 기억 저 편에 사라졌던 비동기가 튀어나와서 당황스러웠다. 그래도 이번 과제 덕에 async, await 사용법을 제대로 익힐 수 있었다. 확실히 .then()으로 연결할 때보다 훨~씬 편하고 가독성이 좋다. 처음 비동기 배울 때에는 async, await이 제일 어색하고 이해 안 됐었는데 이해하고 나니 왜 다들 편하다고 하는지 알겠다.

 

🔎 공부가 더 필요한 부분

쿠키 옵션 expires와 maxAge의 차이

• maxAge: 유효 시간을 초 단위로 지정
• Expires: 날짜로 지정 (클라이언트의 시간을 기준으로 함), 초과하면 쿠키는 자동으로 파괴됨

userInfo 필터링 로직
res.json()이랑 res.send(), res.end() 차이!