[javascript] Request Referer 와 관련한 몇 가지 사항

2019. 3. 19.

관련 지식
#html #referer #referrer

화면A의 어떤 링크를 클릭하여 화면B의 URL을 호출하면 브라우저는 request 의 header에 화면A에서 호출했다는 referer 정보를 같이 보내줍니다.

네이버

따라서 배너 광고 등에서 클릭 유입 경로를 알기 위해 referer 정보를 참고하기도 합니다.

원래 referrer가 맞지만 HTTP RFC에서 referer라고 잘못 타이핑하여 흔히 referer 로 사용함. Hypertext Transfer Protocol — HTTP/1.1

그런데 때로는 사이트 컨텐츠를 보호하기 위해 사용하기도 합니다.
예를 들어 아래 URL은 브라우저의 주소창에 직접 입력 했을땐 잘 보입니다.

http://optimal.inven.co.kr/upload/2019/02/18/bbs/i13272562861.gif

그러나 <img> 태그를 이용하여 본인이 개발하는 사이트의 화면에 넣으면 볼수 없습니다.

<img src="http://optimal.inven.co.kr/upload/2019/02/18/bbs/i13272562861.gif"/> <!-- 401 오류 -->

브라우저 주소창에서 직접 입력하여 호출 했을땐 어떤 화면을 통해 들어간것이 아니므로 referer 정보가 없습니다.
그러나 <img> 태그를 사용할 경우 <img> 태그를 사용한 사이트 주소가 referer 정보가 됩니다. 즉 인벤은 사이트의 컨텐츠를 보호하기 위해 referer 정보가 있을 경우 자신이 허용하는 도메인인지 체크하고 있습니다.

만약 본인이 옥션 같은 사이트C를 만들고 여러 쇼핑몰의 이미지와 링크를 쇼핑몰의 “허락없이” 목록화해서 보여주고 싶을때 쇼핑몰에 위와 같은 policy 체크가 적용되어 있다면 특별한 처리가 필요할 겁니다.

referer 로 인해 직접 호출이 어려울때

메타 태그 추가 추가
가장 간단한 방법입니다. 사이트C의 HTML에 아래의 meta 태그를 추가하면 <img> 태그로 호출할 때 referer 정보를 전달하지 않습니다. 그러나 사이트C에서 호출되는 모든 request 에 대해 referer 정보가 없어지게 되므로 referer 정보를 사용해야 하는 경우가 있다면 혼용이 어렵습니다.
```
<meta name="referrer" content="no-referrer" />
```
iframe + meta 태그 적용
referer 정책을 부분부분 다르게 쓰고 싶다면 iframe 방식을 써야 합니다.(코딩이 좀 들어감) iframe.srcdoc 속성에는 html 태그 등을 넣을수 있습니다. 아래와 같은 문자열을 넣으면 서버에 부담주지 않고 referer 정보를 전달하지 않게 됩니다. iframe 안에서만 동작하기 때문에 사이트C에 영향을 주지도 않습니다.
```
<html>
 <head><meta name="referrer" content="no-referrer" /></head>
 <body><img src="' + url + '"></img></body>
</html>
```
그러나 이 방식은 referer를 없애는것은 가능하지만, 만약 상대측 서버에서 특정한 referer 주소를 요구할 경우 사용이 어렵습니다.
URL 스트리밍
호출하고 싶은 이미지를 직접 호출하지 않고 서버를 경유하여 스트리밍 처리를 할 수도 있습니다.
```
<img src="http://www.abc.de/fghi.jpg"/> 
<img src="http://www.sitec.com/getimage?url=http%3A%2F%2Fwww.abc.de%2Ffghi.jpg"/> 
```
(브라우저)사이트C 화면 -> (서버)사이트C 로직 -> 쇼핑몰URL
화면에서 자신의 서버 로직을 호출하고 서버 로직에서 쇼핑몰을 다시 호출하여 원하는 이미지의 stream을 그대로 브라우저로 전달할 수도 있습니다.
referer 값이 반드시 필요한 경우, 필요 없는 경우 등 여러 상황을 유연하게 대처할 수 있어서 매우 유용하지만 적지 않은 네트워크 트래픽을 감당해야 합니다.

기타

자바스크립트에서 화면 이동을 시킬때 많이 쓰는 방법으로 location.href 와 location.replace()가 있습니다.

location.href = "URL";  //referer 값이 무조건 전달됨
location.replace("URL");  //하위 브라우저에서 referer 값을 안주는 경우 있음

이 두 가지는 브라우저의 URL 이동에 대한 히스토리가 생기는지만 달라야 하는데 ie 구버전에서 location.replace() 호출시 referer 정보를 전달하지 않는 문제가 있습니다. 만약 구형 브라우저에서도 referer 정보가 반드시 필요하다면 location.href를 사용하는것이 좋습니다.

저작자표시 비영리 변경금지

'javascript' 카테고리의 다른 글

[javascript] Pignose Calendar (1)	2019.03.24
[javascript] JQuery를 사용하지 않는 웹페이지에서 쓸수 있게 하기 (0)	2019.03.20
[javascript] 디폴트 값을 이용한 코딩 (0)	2019.03.12
[javascript] 알게 모르게 모르는 논리연산 (0)	2019.03.08
[javascript] 반드시 알아야 할 비교연산 특징 (0)	2019.03.07

쓸데없는 코딩하기