blog.stackframe.dev

외부 링크 클릭 시 Referer가 포함되지 않게 하기

사용자가 내 사이트에서 다른 사이트로 가는 링크를 클릭하면 출발지 URL이 Referer 헤더에 포함되어 목적지 서버에 들어간다. 이걸 통해 목적지 서버가 사용자들의 행동을 분석하는데 사용되기도 한다.

최근 브라우저들이 보안을 이유로 현재 호스트가 아닌 외부의 호스트로 요청을 보내게 된다면 URL 경로와 쿼리 부분을 뺀 현재 도메인 주소만을 Referer에 넣는다. 크롬은 85, 파이어폭스는 87 버전부터 이게 기본 설정으로 바뀌었다. 다만 아예 도메인마저 숨겨서 어디서부터 온 건지 모르게 하고 싶을 수 있다. 이 때 referrerpolicy 속성을 사용하면 된다. referrerpolicy에는 총 8가지 값이 올 수 있고, 이 값에 따라 Referer 헤더와 그 값이 달라진다.

  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url

위의 값들의 상세한 내용은 MDN을 참고하면 된다. 우리는 단지 링크를 클릭했을 때 Referer 헤더가 포함되지 않도록 하는 것이 목표이므로 신경써야 할 것은 no-referrersame-origin 두 개이다.

no-referrer는 말 그대로 절대 Referer 헤더를 넣지 않는다. 현재 도메인이 목적지인 내부 링크를 클릭하더라도 Referer가 포함되지 않는다. 문제는 내부, 외부 링크 구별하지 않고 사용한다면 사이트 접속 로그를 통해 사용자 행동을 분석할 때 Referer 정보가 없으므로 분석 정확도가 떨어질 수 있다. 특히 Google Ananlytics 같은 분석 툴을 사용하는 경우 잘못된 보고서가 나올 가능성이 있다.

same-origin은 외부 요소에 대해서만 no-referrer를 적용한 것과 같다. 따라서 위의 no-referrer와 다르게 내부, 외부 링크를 구별하지 않고 동일하게 적용하더라도 외부 링크를 클릭할 경우 Referer를 보내지 않고, 내부 링크를 클릭한다면 온전한 Referer 정보를 보낸다. 그러므로 코드를 조금만 수정하고 내 사이트에 영향이 없으면서도 외부에 Referer로 내 도메인을 알리지 않으려면 이 값을 사용하는 것이 가장 알맞다.

HTML에 적용하려면 아래와 같이 하면 된다:

<a href="https://google.com" referrerpolicy="same-origin">google</a>

댓글