크로스 도메인 로그인

장세진·2024년 11월 20일

들어가며

크로스 도메인 로그인은 서로 다른 도메인 간의 데이터 통신을 가능하게 하는 중요한 기술입니다. JavaScript의 동일 출처 정책(Same Origin Policy) 때문에, 기본적으로 다른 도메인의 서버에 요청하는 것이 차단되지만, 크로스 도메인 로그인을 구현하기 위해 다양한 방법들이 사용됩니다.

크로스 도메인 로그인 배경

기존에는 같은 도메인 내에서만 작업하고 데이터 통신을 하다가, 새로운 비즈니스 프로젝트를 진행하면서 서로 다른 도메인 간의 통신이 필요하게 되었습니다. 특히, JWT(JSON Web Token)를 브라우저의 로컬 스토리지에 저장하여 사용하던 기존 방식은 서브도메인 간 데이터 공유에 한계가 있었습니다. 로컬 스토리지는 현재 도메인에서만 데이터를 보관하고 공유하기 때문에, 서브도메인 간의 통신을 위해 다른 방법이 필요했습니다.

쿠키(Cookie) 활용

쿠키는 도메인 간 데이터를 공유할 수 있는 좋은 수단입니다. 특히, SameSite=None 옵션을 사용하면 크로스 도메인에서도 쿠키를 공유할 수 있습니다. 이 옵션을 사용할 때는 반드시 SSL(secure: true) 통신을 통해 보안을 강화해야 합니다. 이를 통해 서로 다른 도메인 간에 JWT 값을 공유할 수 있게 되었습니다.

HTTP 3XX 상태 코드 활용

HTTP 3XX 상태 코드는 리소스가 다른 URL로 이동되었음을 나타내며, 브라우저가 백그라운드에서 리디렉션을 처리할 수 있도록 도와줍니다. 301 Moved Permanently와 302 Found와 같은 상태 코드를 통해 브라우저는 자동으로 새로운 URL로 리디렉션됩니다. 이를 통해 사용자는 도메인 이동을 인지하지 못하고 자연스럽게 로그인이 이루어질 수 있습니다.

구현 방법

API 설계: 각 도메인에서 쿠키를 설정하고, 다음 도메인의 URL로 리디렉션하는 API를 설계합니다. 이때, GET 요청을 사용하여 모든 값을 쿼리 파라미터로 전달합니다. 예를 들어, 다음 리다이렉트 URL과 최종 목적지 URL을 쿼리 파라미터로 전달하여 프로세스를 자동화합니다.
JavaScript Location Interface 활용: window.location.replace 또는 window.location.href를 사용하여 브라우저가 리디렉션을 처리하게 합니다. 이를 통해 302 Found 상태 코드의 동작을 브라우저에 위임할 수 있습니다. 이 방법은 브라우저의 주소창에 URL을 입력하여 직접 이동하는 것과 같은 효과를 줍니다.
결과: 최종적으로, 사용자는 로그인 과정에서 도메인 이동을 인지하지 못하고, 자연스럽게 로그인 및 로그아웃이 이루어집니다. 이는 브라우저의 동작을 활용하여 코드의 복잡성을 줄이고, 사용자 경험을 향상시킵니다.

이러한 방법을 통해 크로스 도메인 로그인을 구현하면, 사용자는 복잡한 리다이렉션 과정을 인지하지 못한 채 매끄럽게 서비스를 이용할 수 있습니다. 이는 단순히 코드와 알고리즘만으로 해결하려는 접근에서 벗어나, 브라우저의 동작을 적절히 활용하는 방법을 보여줍니다.