자바스크립트 document.referrer – 참조 URL 가져오기

올바른 이해와 사용 방법

document.referrer 속성은 현재 문서(페이지)로 이동(navigated)하게 만든 이전 문서의 URL을 반환합니다.

알아두세요!
현재 문서(페이지)로 이동(navigated)하게 만든 이전 문서의 URL을 참조 URL(Referrer URL 또는 HTTP Referer)이라고 합니다.

이 속성은 어떤 경로(링크, 검색 엔진 등)를 통해 현재 페이지로 이동했는지 확인할 때 주로 사용됩니다.

기본 예제

JavaScript

// 참조 URL 가져오기
const referrerUrl = document.referrer;

if (referrerUrl !== "") { // 빈 문자열("")이 아니면
    console.log(referrerUrl); // 참조 URL이 문자열로 출력됩니다.
} else { // 빈 문자열("")이면
    console.log("참조 URL을 가져올 수 없습니다.");
}

구문

window 객체는 생략할 수 있으며, 보통 document.referrer를 사용합니다.

반환 값

현재 문서(페이지)로 이동하게 만든 이전 문서의 URL을 문자열(string)로 반환합니다.
현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보가 없는 경우 빈 문자열("")을 반환합니다.

현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보가 없는 경우

다음과 같이 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보가 없는 경우에는 빈 문자열("")을 반환합니다.

직접 URL 입력 또는 북마크로 접속한 경우

이 경우 이전 문서(페이지) 자체가 없기 때문에 빈 문자열("")을 반환합니다.

`rel="noreferrer"`가 적용된 링크를 통해 이동한 경우

rel="noreferrer"가 적용된 링크를 클릭하여 이동하는 경우, 브라우저는 이전 문서의 URL 정보를 전달하지 않습니다. 즉, 사용자가 어떤 문서를 거쳐서 해당 링크를 방문했는지 감추어 줍니다.

이 경우 이전 문서(페이지)의 URL 정보가 없기 때문에 빈 문자열("")을 반환합니다.

그 밖의 경우

이전 문서(페이지)에서 HTTP 헤더 또는 HTML meta 요소로 Referrer Policy를 설정한 경우
(예: Referrer-Policy: no-referrer, <meta name="referrer" content="no-referrer">)
브라우저의 보안 정책에 따라 URL 정보 전달이 제한되는 경우
(예: 보안 수준이 낮아지는 프로토콜 변경 등)

주의할 점

document.referrer 속성을 사용할 때는 몇 가지 주의할 점이 있습니다.

브라우저의 방문 기록(Session History) 아님

브라우저는 사용자가 현재 창이나 탭에서 방문한 페이지를 방문 기록(Session History)으로 관리합니다. 사용자가 새로운 페이지로 이동하거나 브라우저의 "뒤로 가기" 또는 "앞으로 가기" 기능을 사용할 수 있는 것도 이 방문 기록을 기반으로 동작합니다.

그러나 document.referrer 속성은 이 방문 기록(Session History)을 가져오는 기능이 아닙니다.
이 속성은 브라우저가 관리하는 전체 방문 기록이 아니라, 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보만 제공합니다.

예를 들어 사용자가 현재 창이나 탭에서 여러 페이지를 방문한 후 주소창에 URL을 직접 입력하거나 북마크를 통해 현재 페이지로 이동한 경우, 브라우저 방문 기록에는 이전에 방문한 페이지가 존재할 수 있습니다. 다음과 같은 경우를 생각해 볼 수 있습니다.

이 경우 브라우저 방문 기록(Session History)에는 페이지 C가 존재할 수 있지만, 페이지 D로 이동하게 만든 이전 문서는 존재하지 않습니다.
따라서 document.referrer는 페이지 C의 URL을 반환하지 않고 빈 문자열("")을 반환합니다.

document.referrer 속성은 브라우저의 방문 기록(Session History)에 저장된 이전 방문 기록를 조회하는 기능이 아니라, 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보를 확인하는 기능입니다.

따라서 document.referrer 속성으로 가져오는 URL 정보는 브라우저의 방문 기록(Session History)에 저장된 이전 방문 기록과 다를 수 있다는 것을 기억하세요.

부연설명
예를 들어, window.history.back() 메서드는 브라우저의 방문 기록(Session History)에 저장된 이전 항목으로 이동하지만, 이때 이동하는 URL은 document.referrer 속성이 반환하는 URL 정보와 다를 수 있습니다.

참조 URL 정보 확인의 한계

document.referrer 속성은 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL을 문자열(string)로 반환합니다.
하지만 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보가 없는 경우에는 빈 문자열("")을 반환합니다. 따라서 document.referrer 속성을 사용할 때는 빈 문자열("")이 반환될 수 있다는 점을 고려해야 합니다.

빈 문자열("")을 반환하는 현재 문서(페이지)로 이동하게 만든 이전 문서의 URL 정보가 없는 경우는 다양하게 발생할 수 있다는 것을 기억하세요.

부연설명
이렇듯 document.referrer 속성만으로 참조 URL 정보를 확인하는 것은 한계가 있습니다.
따라서 정확한 유입 경로 분석이 필요한 경우에는 document.referrer 값에만 의존하지 않고, URL 쿼리 파라미터, 직접 저장한 sessionStorage 데이터, 서버 측 정보 등 다른 방법과 함께 활용해야 합니다.