인증 토큰을 어디에 저장해야할까?

date

Oct 7, 2023

thumbnail

slug

token-management-in-frontend

author

status

Public

tags

Authentication

Authorization

TIL

데브코스

summary

웹 개발에서 인증 토큰을 어떤 방식으로 구현할 수 있는지와 프론트엔드에서 토큰을 어디에 저장하고 관리해야 하는지

type

Post

category

Frontend

웹 개발에서 인증(Authentication)을 어떻게 구현할 것인지, 그리고 프론트엔드에서 토큰 기반 인증 방식에서 토큰을 관리하는 방법을 알아보고자 합니다.

인증(Authentication)과 권한(Authorization)

백엔드에서 다루는 인증과 권한의 개념, 해시 함수와 암호화, 솔트와 Bcrypt가 무엇인지 다루어 보았습니다.

https://khakidiggin-log.vercel.app/authentication-and-authorization

인증 방식에 대해

• 상태가 없기 때문에 각 클라이언트를 식별할 수 없다.

• 각각의 HTTP 요청이 독립적이고 서버는 이전 요청에 대한 정보를 알 수 없다.

• 즉, 사용자의 상태(로그인, 로그아웃 등)를 추적하고 권한을 부여할 수가 없다.

1. 쿠키 인증 방식

2. 세션 기반 인증(Session-Based Authentication)

• 세션은 서버에 있고, 사용자가 식별될 때 세션 ID를 생성하여 이를 클라이언트에게 전달한다.

• 사용자의 상태(세션 데이터)는 서버에 저장된다. 세션은 서버 메모리나 데이터베이스, 파일 시스템 등에 저장하며 이는 환경에 따라 얼마든지 달라질 수 있다. (보통 DB를 사용한다.)

• 보안 상 안전하며 하나의 계정 정보를 관리하거나 사용자의 디바이스 별 인증을 관리하거나(여러 디바이스에서 접속을 하지 못하게 한다거나), 비정상적인 접근을 판단하여 강제로 로그아웃 시키는 등의 여러 기능들을 구현할 수 있다.

• 세션이 무거워질 수록 서버 부하가 생기고, 관리할 것들이 많다.

3. 토큰 기반 인증(Token-Based Authentication)

• 쿠키 인증 방식과 비슷하지만 쿠키를 직접 보내는 것이 아니라 토큰을 매개체로 한다는 부분이 다르다.

• 클라이언트에서는 요청에 따른 인가에 토큰을 포함하여 요청하며, 서버에서는 토큰 검증 후 사용자를 인증하거나 인가한다.

• 토큰 검증이란, 토큰이 포함된 요청을 받을 때 서버는 자신의 비밀 키로 만들어진 토큰인지를 확인한다. 위조 혹은 변조된 토큰을 구분할 수 있게 된다.

• 쿠키 방식보다 보안이 뛰어나고 서버 부하가 덜하지만, 세션 방식의 여러 기능들을 사용할 수 없다. 물론 보안도 세션 방식보다는 떨어진다.

토큰을 어디에 저장해야 할까?

로컬 스토리지와 세션 스토리지에 저장할 때

쿠키에 저장할 때

CSRF 예방 방법들

1. Referer 요청 헤더 검증하기

2. Anti-CSRF 토큰

3. Double Submit 쿠키

4. SameSite 쿠키

5. 패스워드 확인

6. Captcha 검증 사용

스토리지보다 쿠키가 선호되는 이유

• 쿠키에 httpOnly 옵션을 사용하면 공격자가 접근하기가 조금 더 까다롭도록 할 수 있다.

• sameSite 옵션, Secure 옵션 그리고 쿠키의 유효 범위를 설정하는 등의 여러 옵션들로 공격을 어느정도 예방이 가능하기 때문이다.

Access Token + Refresh Token을 사용할 경우에는?

1. Access Token을 스토리지에 저장하고, Refresh Token을 스토리지 혹은 httpOnly 쿠키에 저장하는 방법
• XSS 공격에 취약해진다.

2. Acess Token과 Refresh Token을 httpOnly 쿠키에 저장하는 방법
• CSRF 공격에는 취약하지만 어느정도 예방이 가능하고, XSS도 어느정도 예방할 수 있다.

3. Refresh Token을 httpOnly 쿠키에 저장하는 방법
• CSRF 공격으로부터 안전하고, XSS도 어느정도 예방할 수 있다.
• 그럼 Access Token은? ⇒ 메모리에 저장하기도 한다. 메모리에 저장하면 탭을 전환하거나 페이지를 새로고침 할 때 사라진다.

토큰을 쿠키에 저장하고 요청 시 전송하기

코드가 보이지 않으면 새로고침을 해주세요!

쿠키에 토큰 저장하기

// 토큰을 받아온 후 쿠키에 저장
document.cookie = `authToken=${token}; Secure; HttpOnly; SameSite=Strict; path=/`;

• Secure, HttpOnly, SameSite(Strict) 옵션을 적용

HTTP 요청 시 토큰 전송하기

fetch('/api/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token, // 토큰을 헤더에 포함
  },
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• Authorization 헤더에 Bearer 스키마와 함께 전송

완벽한 방법은 없다.