[HTML] <a> rel 속성

브리셀·2021년 9월 28일
1

common

목록 보기
4/6

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)하지 않음을 나타냄
  • 주로 검색 엔진에 해당 사이트의 영역이 아님을 알려주는 데에 쓰임
    • noopenernoreferrer는 검색엔진에 영향을 미치지 않으며, 반대로 nofollow는 검색엔진 외에는 영향을 미치지 않음

기타

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

참고한곳

profile
풀스택도 프론트부터

0개의 댓글