Refresh Token 프론트엔드 보관 위치

Refresh Token 프론트엔드 보관 위치에 대해 노션 AI에게 물어보았다.

 

 => 답변

Refresh token은 보안을 강화하기 위한 인증 시스템에서 자주 사용되는 기술입니다. 이 문서에서는 Refresh token frontend에서 사용하는 방법에 대해 설명합니다.

Refresh Token이란?

Refresh token은 사용자 인증 토큰이 만료되었을 때, 새로운 토큰을 발급해주는 기술입니다. 이를 통해 사용자는 로그인하지 않아도 서비스를 계속 사용할 수 있습니다.

Frontend에서 Refresh Token 사용방법

Refresh Token을 어디에 저장해야 하는지는 상황에 따라 다릅니다. 하지만 일반적으로는 쿠키를 사용하여 저장하는 것이 좋습니다.

Frontend에서 Refresh token을 사용하는 방법은 크게 두 가지가 있습니다.

1. 쿠키를 이용한 방법

Refresh token을 쿠키에 저장하고, 서버에 요청할 때마다 쿠키를 함께 전송하여 사용할 수 있습니다. 이 방법은 서버에서 쿠키를 직접 다루기 때문에 보안성이 높습니다.

• 쿠키는 브라우저에서 관리되며, 서버에 전송됩니다.
• 따라서 쿠키에 저장하는 경우 CSRF 공격에 노출될 가능성이 높아집니다.
• 쿠키는 보안상의 이유로 httpOnly 옵션을 사용하여 JavaScript에서 접근할 수 없도록 설정해야 합니다.
• Refresh Token은 유효기간이 길기 때문에, 쿠키에 저장될 때는 안전하게 암호화되어야 합니다. 또한 HTTPS 프로토콜을 사용해야 하며, 쿠키를 안전하게 관리하기 위한 다양한 방법이 있으니 이를 참고하여 구현해야 합니다.
• 쿠키를 사용하면 브라우저를 닫았다가 다시 열어도 쿠키가 유지되므로, 사용자가 다시 로그인하지 않아도 자동으로 인증할 수 있습니다.
• 다른 브라우저 탭에서도 쿠키를 공유할 수 있기 때문에, 여러 개의 탭에서 동시에 로그인 하거나 로그아웃 할 때 문제가 발생할 수 있습니다.
• 하지만, 서버 측에서 쿠키를 쉽게 확인할 수 있기 때문에, 보안적인 측면에서 유리합니다.

2. Local Storage를 이용한 방법

Refresh token을 Local Storage에 저장하고, 서버에 요청할 때마다 Local Storage에서 값을 가져와 사용할 수 있습니다. 이 방법은 쿠키보다 사용이 간편하지만, XSS 공격에 취약할 수 있습니다.

3. Session Storage를 이용한 방법

• session storage는 브라우저 탭당 별도로 관리됩니다.
• session storage는 브라우저를 닫았다가 다시 열 경우 저장된 데이터가 삭제 되기 때문에, 새로 로그인해야 합니다.
• 따라서 session storage에 저장하는 경우 CSRF 공격에 노출되는 위험이 줄어듭니다.
• local storage와 마찬가지로 XSS 공격에 취약할 수 있습니다.
• XSS 공격에 대비하기 위해 access token의 유효기간을 짧게 가져가는 것이 좋습니다.
• 다른 브라우저 탭에서는 session storage를 공유하지 않기 때문에, 여러 개의 탭에서 동시에 로그인 하거나 로그아웃 해도 문제가 발생하지 않습니다.
• 하지만, 서버 측에서 session storage를 확인하기 어렵기 때문에, 보안적인 측면에서 불리합니다.

따라서, refresh token을 보관하는 위치는 사용하는 애플리케이션의 보안 요구사항에 따라 결정되어야 합니다.

Refresh Token 만료 되었을 때

Refresh token이 만료 되었을 때 자동 로그인 기능을 구현하려면, Frontend에서 로그인 정보를 Local Storage나 쿠키에 저장해두고, 페이지를 로드 할 때마다 해당 정보를 확인하여 자동 로그인을 구현할 수 있습니다. 이를 위해서는 로그인 페이지에서 로그인 정보를 저장하는 코드와, 페이지를 로드 할 때마다 해당 정보를 확인하는 코드를 구현해야 합니다. 이때, 보안상의 이유로 로그인 정보를 암호화하여 저장하고, HTTPS 프로토콜을 사용하여 정보가 안전하게 전송되도록 해야합니다.

마무리

Refresh token은 사용자 인증 시스템에서 매우 중요한 역할을 합니다. Frontend 에서도 적절히 사용하여 서비스의 보안성을 높일 수 있습니다.