[HTML] <a> rel 속성

rel

• <link>, <a>, <area>, <form> 등의 태그로 연결된 자원과 현재 문서의 관계를 명시하는 속성
• 각 태그에 따라 사용할 수 있는 값이 다르지만 이 포스트에서는 <a> 태그에 대해서만, 일부 값만 다루기로 함

noopener, opener

• JavaScript에 window.opener라는 속성이 있는데, 현재 창을 연 창의 정보를 나타냄
  • 이로부터 이전 창의 uri 주소를 가져와서 자신의 주소를 가려 사용자를 속이는 피싱 방식이 있음
• rel="noopener" 속성을 넣으면 window.opener 값이 null이 됨
  • 보안을 위해서는 noreferrer 값과 함께 사용할 것을 권장
• 다음 창이 아예 독립적으로 열리기 때문에 이전 창의 퍼포먼스를 저하시키지 않음
• rel="opener" 속성은 window.opener에 값을 명시적으로 전달할 때 씀
  • 자식 창을 연다든지 할 때 필요할 수 있음

noreferrer

• noopener가 이전 창과의 연결을 끊는 속성값이라면, noreferrer는 이전 페이지와의 연결을 끊는 속성값이라 할 수 있을 듯
• Referer 헤더를 제외시킴
  • 보안을 위해서는 noopener 값과 함께 사용할 것을 권장
  • 어떤 경로로 해당 링크를 들어가게 되었는지 알 수 없게 되므로 대상 문서의 애널리틱스에서는 직접 접속한 것으로 나타나게 됨
• 속성값은 refeRRer인데 헤더는 refeRer
  
  그림 출처: https://privacyinternational.org/guide-step/4150/http-referer-explanation

nofollow

• 현재 문서 작성자가 해당 링크를 보증(endorse)하지 않음을 나타냄
• 주로 검색 엔진에 해당 사이트의 영역이 아님을 알려주는 데에 쓰임
  • noopener와 noreferrer는 검색엔진에 영향을 미치지 않으며, 반대로 nofollow는 검색엔진 외에는 영향을 미치지 않음

기타

• prev, next
  • 일련의 문서들 중 각각 이전, 이후의 문서임을 나타냄
• external
  • 자체 기능은 없지만 속성 선택자를 통해서 일괄적으로 외부로 연결되는 링크라는 것을 표시할 수 있음
• tag
  • 단일 문서 내의 태그(id?)로 이동함을 나타냄
• help, search, license
  • 각각 도움말, 검색, 라이센스로 연결됨을 나타냄
  • help의 경우 마우스 커서가 help로 나타남

참고한곳

• HTML attribute: rel @ MDN
• 링크에 noopener noreferrer 사용하는 이유 @ Blogspot/수아뎁
• noreferrer noopener의 의미와 SEO에 미치는 영향 @ Tistory/지오스콘