document.referrer 구현

회사에서 이번에 맡은 업무 중에 referrer를 통해 resource를 전달받아야 하는 경우가 있었다. 구현 도중에 safari 환경에서 난관에 부딪혀, 구현 방향을 referrer가 아닌 query parameter로 바꾼 과정에 대한 일지를 작성.

먼저, document.referrer 란?

1. 현재 페이지 이전의 URI 정보를 반환

• Ex) example.com -> secondExample.com
  • secondExample.com 에서 referrer를 통해, example.com 값을 받아 올 수 있다.

2. header 쪽에 종속되어 있다.

 

---

접근 방법 (GET)

document.referrer;

 

설정 방법 (SET)

Object.defineProperty(document, "referrer", {get : function(){ return "my new referrer"; }});

- referrer를 임의로 설정 할 수 있는 방법이 있는 거 같긴 하나 확실하진 않다*

• 참조 내용

 

NOTE

- referrer는 브라우저 종류, 브라우저 설정, http/https 등 환경 여부에 따라 종속되는 값이 상이 할 수 있다.

• 간단한 예시로 들자면, 가령 https://test.com/events/one 에서 https://testExample.com 으로 넘어 갈 때, https://testExample.com 에서 referrer 값으로 https://test.com/events/one이 아닌 https://test.com (origin) 까지만 반환 되는 경우가 있다.
• 이러한 경우는 여러가지 이유로 유추 해볼수 있는데, referrer-policy 에 의해 발생 하는 경우라고 유추 해볼수 있다.
• 따라서, 위 예시에서 full url를 referrer를 통해 접근하고 싶다면 아래와 같이 설정하면 된다.

<meta name="referrer" content="unsafe-url" />

 

 

 

하지만 이번 업무를 통해 직면한 문제는 위와 같은 방법으로 full url 을 접근 할 수가 없었다.
조금 더 정확히는, 위와 같이 설정 했음에도 불구하고 safari에서만 origin으로 반환을 받았다.
원인은 safari의 ITP 인걸로 추정 된다.

결국, 해답을 찾지 못해 referrer가 아닌 query parameter로 전달 받아 태스크를 끝내는 방향으로 재진행 했다

 

Safari's ITP - Reference

Preventing Tracking Prevention Tracking