withCredentials: true

들어가기 전

프로젝트를 하면서 API들을 따로 관리하는 폴더를 만들어 관리하고 있다. axios 인스턴스 안에 baseURL과 withCredentials을 미리 세팅을 해놓았다. 그리고 내가 기존에 했던 일반 axios 호출을 따로 user.ts 에 추가를 했다. 처음에는 그냥 axiosInstance를 가져와서 무작정 user.ts에 사용하기 시작했다. 하지만 내가 필요한 axios 요청들이 withCredentials: true가 필요없는 상황에서도 쓰는게 맞을까 하는 의문이 들면서 쓰기 시작한 글이다.

 

지금 밑의 코드는 api를 관리하는 예시 코드이다.

 

index.ts

import axios from 'axios';

// 서버 주소를 가지고 있고, 요청 시 쿠키를 포함하는 axios instance 생성
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  withCredentials: true,
});

export default axiosInstance;

 

user.ts

import axiosInstance from '../libs';

const apiUrl = import.meta.env.VITE_API_URL;

/**
 * 현재 로그인한 사용자의 정보를 가져오는 API.
 *
 * @returns {Promise<any>} 사용자 정보 데이터
 */
export const getUserInfo = async () => {
  const response = await axiosInstance.get('/users/me');

  return response.data;
};

 

위의 getUserInfo 라는 함수는 로그인한 유저의 정보를 가져오는 함수이며, withCrendentials: true가 기본이다.

 

withCredentials 란?

브라우저에서 CORS(교차 출처 요청)를 보낼 때

쿠키나 인증 헤더(Authorization), 세션 정보 등 자격 증명(credentials)을 함께 보낼지를 결정하는 설정값이다.

-> true로 하면 이 요청에는 쿠키도 같이 보내줘 라는 의미가 된다.

 

withCredentials: true를 항상 넣었을 때 문제가 될 수 있는 점

문제 상황	설명
비로그인 상태 요청도 쿠키 포함됨	불필요한 요청 헤더가 생김 (보안 민감한 시스템에서는 감지될 수.
CORS 설정 안 된 외부 API 호출시 에러	외부 API는 credentials 요청을 허용하지 않을 수 있음
로그인이 필요 없는 요청인데 쿠키가 같이 가버림	서버 로그에 인증 로그 남을 수 있고, 의미 없는 쿠키 트래픽 증가 가능

 

이런 문제로 withCredentials: true 를 분리해서 사용을 한다는 판단을 했다.

그래서 index.ts 를 다음과 같이 수정을 하자는 것을 팀원과 상의를 했다.

// 1. 기본 인스턴스는 credentials 없이
const axiosDefault = axios.create({
  baseURL: apiUrl,
});

// 2. 인증 필요한 요청용 인스턴스
const axiosAuth = axios.create({
  baseURL: apiUrl,
  withCredentials: true,
});