[KUIT] 10주차 보충 - 토큰 저장 위치, 세션 인증 방식과 JWT, .env 파일

아래 글은 KUIT 웹 부원분들을 대상으로 작성한 글입니다.

---

Access Token과 Refresh Token은 어디에 저장해야할까?

브라우저에서 변수는 네 가지 공간에 저장이 가능하다.

1. 쿠키
2. 로컬스토리지
3. 세션스토리지
4. 메모리

이 때 메모리에 값을 저장하려면 웹앱의 로컬변수를 사용해서 값을 저장해야

→ 이 방식을 사용하면 자바스크립트 코드로 접근이 불가능

→ 또 하나 기억해야 할 특징은 새로고침을 하면 내부 변수가 초기화됨

 

자바스크립트 코드로 접근이 가능한 쿠키, 로컬스토리지, 세션스토리지

→ XSS 공격에 취약

(다만 쿠키의 경우 HttpOnly 속성을 추가하면, 자바스크립트로 접근할 수 없는 쿠키 생성 가능)

 

출처: https://velog.io/@iamtaehoon/sagah

 

Refresh Token → HttpOnly 쿠키로 저장

• 쿠키에 토큰을 담으면 CSRF(Cross-Site Request Forgery) 공격에 취약
• CSRF 공격을 통해서는 로그인 된 상태로 특정 위험한 동작을 하게 만듦
  • CSRF 공격으로 쿠키에 저장되어 있는 토큰 값 자체를 가져오는 것이 아님

→ Refresh Token으로 Access Token을 재발급 받는 요청 외에 인증 인가가 필요한 작업들에 Refresh Token으로는 접근할 수 없기 때문에 HttpOnly 쿠키에 저장

 

Access Token → 자바스크립트 private 변수로 저장

→ private 변수로 저장된 Access Token은 XSS 공격으로 탈취할 수 없고, 당연히 CSRF 공격을 당할 가능성도 없음

→ 새로고침을 할 때마다 private 변수가 날라가므로 Refresh Token을 통해 새 Access Token과 새 Refresh Token을 발급

( Access Token이 만료되어도 Refresh Token을 통해 새 Access Token과 새 Refresh Token을 재발급)

 

RTR(Refresh Token Rotation) - Refresh Token을 통해 Access Token을 재발급 할 때 Refresh Token을 새 것으로 교체해서 단 한번만 사용할 수 있도록 하는 방식

 

출처: https://velog.io/@ohzzi/Access-Token과-Refresh-Token을-어디에-저장해야-할까

---

세션 기반 인증 방식의 단점과 이를 보완한 토큰 기반 인증 방식(JWT)

세션 인증 방식의 장점

• 서버에 저장하기 때문에 관리가 매우 편하고 효율
• 구현이 명확하며 실제 서버에서 로그인 상태를 확인하기 유용
• 사용자가 많아지는 경우 로드 밸런싱을 사용한 서버 확장을 이용해야 하는데 이 때 세션의 관리가 어려워짐

단점

• 서버에서 클라이언트의 상태를 모두 유지하고 있어야 하므로, 클라이언트 수가 많으면 메모리나 DB에 부하가 심함 (DB의 과부하)
• 멀티 디바이스 환경(모바일, 공동 사용 등)에서 로그인 시 중복 로그인 처리가 되지 않는 등의 신경 써야 할 부분들이 발생

이를 보완한 토큰 기반 인증 방식의 장점

• 클라이언트에 토큰이 저장되어 있기 때문에 서버의 메모리에 부담이 되지 않으며 Scale에 있어 대비책을 고려할 필요X
• 멀티 디바이스 환경에 대한 부담이 없음

출처: https://velog.io/@chickenrun/세션-인증-방식-VS-Token-인증방식인증과-인가

---

.env 파일(환경 변수 파일)

애플리케이션이 실행될 때 넘기고 싶은 특정 값을 담고 있는 변수가 기록되 있는 파일

웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있는데, 이 때 dotenv 패키지 = 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용 할 수 있음.

api를 사용하거나 인증 관련 기능을 구현할 때, key를 노출하지 않기 위해 환경 변수 파일에 key를 넣어주고 필요할 때 꺼내올 수 있음.

출처: https://velog.io/@park0eun/.env-파일이-뭐냐

(.env 파일은 .gitignore에 등록해야 한다)

 

Create-React-App에서와 Vite에서의 .env 파일 사용 방법은 다르다.

Create-React-App에서는

• .env 파일에서 ‘REACT_APP_’으로 시작하는 변수를 생성하고
• 따옴표로 감싸거나 띄어쓰기를 주지 않음
• 사용시 process.env.변수명으로 호출

Vite에서는

• .env 파일에서 ‘VITE_’로 시작하는 변수를 생성하고
• 따옴표로 감싸도 괜찮음
• 사용 시 import.meta.env.변수명으로 호출

출처: https://velog.io/@neu5563/react에서-.env-접근방법-CRA-Vite