Redirect URL 완전 정복: 쿼리 파라미터와 리다이렉트 흐름 설계

 

 

---

Redirect URL 소개

Redirect (리다이렉트)란, 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻입니다. 예를 들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것을 말합니다.

Redirect URL은 요청 결과를 전달해주는 역할을 합니다. 사용자가 요청을 마친 후 돌아갈 수 있는 웹사이트 URL로, 요청 결과를 알려주고 그 결과를 바탕으로 최종 비즈니스를 진행하는 중요한 중간 역할을 합니다.

 

기본 Redirect URL 예시

https://example.com/redirect?status=success&orderId=12345

 

OAuth 인증 시 Redirect URL 예시

https://myapp.com/auth/callback?code=abc123&state=xyz

 

Redirect URL 프로세스

1. 이벤트 요청시 트리거 될 각 URL의 목적에 맞는 동작을 정의하고, 이를 기반으로 origin URL, 성공 URL, 실패 URL 값을 미리 설정합니다.
2. 사용자가 이벤트를 트리거하면 설정된 origin URL로 요청을 보냅니다. 요청 데이터에는 설정한 값이 포함됩니다.
3. 서버는 전달받은 요청 데이터를 처리하여 결과를 생성합니다.
4. 서버는 처리 결과에 따라 사용자에게 리다이렉트할 URL을 결정합니다.
5. 리다이렉트 URL에는 요청 처리 결과(예: status=success 또는 code=XXX)를 나타내는 데이터를 쿼리 파라미터로 추가합니다.
6. 리다이렉트된 URL에서 후속 동작을 처리합니다.

// 예를 들어, 성공 URL은 승인 API를 요청하는 콜백 함수로 연결되며, 실패 URL은 에러 팝업을 표시하는 페이지로 연결되도록 구현할 수 있습니다.

// 1. 성공 URL 예
https://example.com/payment/success?status=success&orderId=1234

// 2. 실패 URL 예
https://example.com/payment/failure?status=failure&code=INVALID_CARD

 

Redirect URL 설계 전략

• 이벤트를 호출한 URL과 동일한 origin 주소를 사용하는 것이 권장됩니다. 물론, 다른 origin 주소를 사용하는 경우 서버 측에서 CORS 설정을 추가할 수 있지만, 같은 origin 주소를 사용하는 것이 보안과 성능 측면에서 더 안전합니다.
• 사용자가 요청한 이벤트의 완료나 실패 후, 원래 쇼핑 중이던 앱이나 웹사이트로 돌아가는 것은 사용자 경험 향상에 중요한 영향을 미칩니다. 브라우저를 원래 사이트로 리다이렉트하면서 성공 또는 실패에 대한 정보를 전달하고, 필요 시 추가 정보를 제공할 수 있습니다.
• 서버로 리다이렉트하여 코드 검증을 수행함으로써 클라이언트의 조작을 방지하고, 서버 측에서 효율적으로 데이터를 처리할 수 있습니다.

 

쿼리 파라미터(Query Parameter)

쿼리 파라미터는 URL의 ? 이후에 위치하며, 클라이언트가 서버에 요청 시 전달하는 추가적인 데이터입니다.

(쿼리 파라미터 2개 : category=shoes, page=2)

 

https://example.com/products?category=shoes&page=2

 

쿼리파라미터 유효시간?

• 인증 결과로 넘어오는 값을 쿼리파라미터로 주고 받는다.
• 보통 이러한 값의 유효시간을 서버에서 정의해준다.
• 해당 시간동안 요청이 없는경우 취소 프로세스를 태워 유효하지 않게 만든다.

커스텀 쿼리파라미터 추가 여부?

• 정해진 파라미터 외 커스텀 파라미터는 사용하지 않는다.
• 필요시 쿠키나 세션에 데이터를 저장하거나, 성공 리다이랙트URL에 쿼리 파라미터 key로 임의로 붙여서 사용한다. (단, 200자이내로)

쿼리 파라미터 노출과 보안성?

• 쿼리 파라미터로 넘겨주는 값은 노출되어 보여도 보안 문제는 없다.
• 별도 시크릿 키가 있어야만 동작하기 때문에, 시크릿키를 노출하지 않는 것이 매우 중요하다.

 

HTTP 리다이렉트 응답 결과

HTTP 리다이렉트의 요청 결과는 클라이언트가 서버로부터 3XX 상태 코드를 응답받고, 응답에 포함된 Location 헤더의 URL로 자동 이동(재요청)하는 것입니다.

상태 코드

코드	메시지	리다이렉트 종류	설명
301	Moved Permanently	영구적인 리다이렉션	요청이 GET 메서드로 변할 수 있고 메시지 본문이 제거돼요.
208	Permanent Redirect	영구적인 리다이렉션	최초 요청과 메서드 및 메시지 본문은 변하지 않아요.
302	Found	일시적인 리다이렉션	301과 원리는 같지만 검색 엔진이 링크를 갱신하지 않아요.
302	See Other	일시적인 리다이렉션	요청이 GET 메서드로 바뀌고 본문이 제거돼요.
307	Temporary Redirect	일시적인 리다이렉션	요청 메서드와 본문이 유지되지만 검색 엔진이 링크를 갱신하지 않아요.
300	Multiple Choice	특수 리다이렉션	요청에 2개 이상의 응답이 가능할 때 사용돼요.
304	Not Modified	특수 리다이렉션	업데이트되지 않은 리소스라서 캐시를 사용할 수 있다는 것을 뜻헤요.

 

Location

클라이언트 결제 성공 페이지

• 승인 결과에 따라 조건부 렌더링 되는 페이지
• 렌더링 되는 페이지에서 서버를 호출하여 요청한 이벤트 처리를 하는 방식

로딩 페이지

• 조건부 렌더링이 복잡하거나 중복에 대한 처리(확인)이 필요한 경우 로딩페이지로 연동
• 로딩페이지에서 서버를 호출하여 성공시 (1)번화면 성공페이지로 리다이렉트하는 방식
• 로딩 페이지, 리다이렉트 과정을 추가되지만, 비즈니스 로직은 더 간단해질 수 있다.

서버 엔드포인트

• 성공 url도 서버 엔드포인트로 설정하여, 후속 동작도 서버에서 처리하는 방식
• 클라이언트는 새로운 페이지가 아예 필요없고, 데이터 효율성이 좋다.
• 서버 처리 시간동안 클라이언트 단에서 보여주는 동작이 필요하고, 서버의 로직이 복잡해질 수 있다.

// client
window.location.origin+'/confirm'

// server 
api.post('/confirm').then(()=>{})

 

 

리다이렉트 고려 사항

리다이렉트 응답 후 이전 시나리오로 돌아가기

가정

1. 현재 페이지에서 로그인 페이지로 리다이렉트
2. 로그인 성공 후 토큰발급 시, 이전에 수행하던 작업이나 페이지로 복귀

방법

• 원본 페이지를 브라우저 내 로컬 스토리지, 쿠키를 사용하여 저장

순서

1. 원본 페이지의 현재 URL(A) 데이터를 저장

currentPath = window.location.pathname + window.location.search
localStorage.setItem('currentPath ', currentPath);

1. 후속 작업 후 (A)로 복귀

const currentPath = localStorage.getItem('currentPath');
if (currentPath ) {
  localStorage.removeItem('currentPath');
  window.location.href = currentPath ;
}

 

 

로그가 유실 될 가능성

• 로그를 가지고 수집, 분석을 하지 않아도, 프론트앤드에서 정확한 시점에 로그를 전송해주는 것은 중요한 문제이다.
• 하지만 웹페이지의 라이프사이클에서 이러한 요청을 시도하는 타이밍이 애매하다.
• 왜냐하면 세션 종료 직전에 발생하는 페이지 이탈은 요청이 완료되기 전에 중단될 수 있기 때문이다.
• 페이지 이탈 : 탭/창을 닫거나, 링크를 클릭하여 페이지 이동, 301 또는 302 리디렉션 등

기존 로그 프로세스

1. URL 이동 전 로그를 쌓고, 로그 응답 값으로 실제 이동하고자 하는 페이지를 HTTP 302 상태 코드와 함께 클라이언트에 응답
2. URL 이동과 로그를 논블로킹 방식으로 백엔드 서버에 비동기 단방향으로 데이터를 송신

Redirect URL 활용 사례

• URL 단축 서비스 (e.g. 소셜 미디어에서 공유)
• 더 이상 업데이트되지 않는 페이지요청시 새로운 페이지로 리다이렉트 설정 및 삭제
• 사이트 도메인 변경 (e.g. 브랜드 리뉴얼 및 통합, SSL인증서 설치, 검색엔진에 새도메인 등록)