[vue3 with pinia] 로그인 및 인증(1)

 

 

해당 포스트를 이해하기 위해서는 다음과 같은 개념을 알고 계셔야 합니다!
Jwt(Access Token, Refresh Token)
Pinia
Spring Boot3 & Spring Security6 

 

안녕하세요 Vue3를 사용하여 구축한 프론트엔드 프로젝트에서 로그인 및 인증이 어떻게 수행되는지 살펴보겠습니다.

우선 Access Token, Refresh Token이 프론트엔드의 어느 곳에 저장되는지 부터 살펴보겠습니다.

 

 

 

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

Token를 저장할 수 있는 위치는 다음과 같이 총 세 곳이 존재합니다

1. Local Storage
2. Session Storage
3. Memory
4. Cookie ( HttpOnly )

각 저장소 별 장단점을 가볍게 살펴보겠습니다!

 

Local Storage

로컬 스토리지(Local Storage)는 웹 브라우저에 존재합니다. 주요 특징은 직접 로컬 스토리지에 저장된 데이터를 삭제/변경 해주지 않을 경우 브라우저를 새로고침하거나 종료해도 유지됩니다.

이러한 특성으로 인해 로컬 스토리지에 token을 저장하면 다음과 같은 장/단점이 있습니다.

장점

• 새로고침 및 브라우저 종료 시에도 Access Token이 유지됩니다.
• 편리합니다.

단점

• XSS 공격에 취약합니다. 따라서 별도의 보안이 필요합니다.

 

Session Storage

세션 스토리지(Session Storage)또한 로컬 스토리지와 마찬가지로 브라우저 상에 존재합니다.

하지만 현재 열려 있는 탭에서만 데이터가 유지된다는 특징이 있습니다. 따라서 다른 탭으로 이동하거나, 브라우저를 종료할 경우 저장되어있는 데이터가 전부 날아가게 됩니다.

Token 저장 시 Local Storage와 비슷한 장단점을 갖게 됩니다.

 

장점

• 새로고침 시에도 동일한 탭 내에서는 Token이 유지됩니다.

단점

• XSS 공격에 취약합니다. 따라서 별도의 보안이 필요합니다.

Cookie ( HttpOnly )

쿠키는 브라우저 사용자의 컴퓨터에 저장됩니다. 따라서 브라우저를 새로고침 / 종료하여도 데이터가 유지됩니다.

만약 쿠키에 HttpOnly 옵션을 추가할 경우 자바스크립트에서 접근이 불가능해 XSS 공격을 방어할 수 있게 됩니다. 

장점

• 새로고침 및 브라우저를 종료하여도 Token이 유지됩니다.
• 편리합니다.
• HttpOnly 옵션을 사용할 경우 XSS 공격을 완벽히는 아니지만 어느정도 방어할 수 있습니다.

단점

• CSRF 공격에 취약합니다 따라서 별도의 보안이 필요합니다. => CSRF 공격의 경우 추후 다른 포스트에서 다루겠습니다. 
• 사이즈 제한이 존재합니다 (4KB)

저같은 경우 위와 같은 장/단점을 고려하여 Refresh Token을 HttpOnly Cookie에 저장하였습니다.

 

Memory

메모리는 브라우저에 존재하는 프론트엔드 어플리케이션에 존재합니다. 즉 데이터를 자바스크립트 변수에 저장하는 것입니다.

const data = "데이터"

 

공격자가 저장된 데이터에 접근하기 어렵습니다.

 

하지만 브라우저를 새로고침 하거나 종료 시 해당 데이터가 전부 사라지게됩니다.

장점

• 보안상 장점을 갖습니다.

단점

• 다른 탭으로 이동하거나 브라우저 새로고침 / 종료 시 데이터가 전부 날아가게 됩니다.

 

 

위와같은 장/단점을 고려하여 저는 Access Token은 frontend memory에, Refresh Token은 HttpOnly 쿠키에 저장하는 방식을 선택하였습니다. 코드는 다음 포스트에서 살펴보도록 하겠습니다.