HTML에서 a 태그는 페이지(문서)와 페이지를 연결하는 역할을 합니다. a 태그의 rel 속성으로 a 태그가 있는 페이지와 a 태그의 href 속성으로 설정한 페이지가 어떤 관계인지를 선언할 수 있습니다.
rel은 관계를 뜻하는 relationship의 줄임말입니다. 웹 브라우저와 검색 엔진을 위한 속성입니다. 이 속성이 있고 없고가 사용자에게 미치는 영향은 거의 없습니다.
전통적인 rel 속성 값에 더 맞는 설명입니다. 예를 들어 help는 현재 페이지의 도움말 페이지임을 알려줍니다. author는 저자 설명 페이지를, license는 라이선스 정보 페이지를 의미합니다.
이 포스트에서 다룰 nofollow, noreferrer, noopener 등은 관계보다는 정책 또는 지침 성격이 더 강합니다.
예를 들어 nofollow을 사용하면 검색 엔진이 해당 링크를 크롤링하지 않을 수 있습니다. 검색 대상이 아닌 로그인 페이지 링크를 이렇게 설정할 수 있습니다.
<a href="/r/signon/login" rel="nofollow">로그인</a>
크롤링 여부는 검색 엔진의 자유입니다. nofollow를 무시하고 검색을 할 수도 있습니다.
웹 브라우저를 위한 속성도 있습니다. noreferrer를 사용하면 링크를 클릭했을 때 HTTP 리퍼러 헤더(referer header)를 넘기지 않을 수 있습니다.
<a href="https://www.google.com/chrome" rel="noreferrer">크롬 내려받기</a>
이렇게 하면 요청을 받는 쪽에서 해당 요청이 어디에서 왔는 지를 알 수 없습니다.
noopener는 보안을 위한 속성입니다. target 속성이 _blank인 링크를 클릭하면 새 탭에서 페이지가 열립니다. 이 때 열린 쪽에서 자바 스크립트를 이용 window.opener 속성으로 연 쪽의 window 객체에 부분적으로 접근할 수 있습니다. noopener를 사용하면 이를 막을 수 있습니다.
<a href="https://www.google.com/chrome" rel="noopener" target="_blank">크롬 내려받기</a>
더 나아가 보안을 위해 target 속성을 _blank로 지정하지 말아야 한다는 주장도 있습니다. 마우스 가운데 버튼을 클릭하거나 <1새 탭에서 링크 열기>를 했을 때는 열린 쪽에서 window.opener 속성으로 연 쪽을 접근할 수 없습니다.
앞으로 쓰리래빗츠 북은 target _blank인 모든 링크의 rel 속성을 noopener로 설정할 예정입니다. noreferrer 사용 여부는 고민이 필요합니다. 열린 웹이라는 생각에 부합하지 않아 보입니다.
관련 문서