noreferrer, noopener, nofollow은 무엇인가
‘noreferrer’, ‘noopener’, 'nofollow’는 HTML의 anchor 태그 (a태그)에서 사용되는 rel 속성의 값이다. 이 속성들은 모두 하이퍼링크를 보호하기 위한 속성이다. 하이퍼링크를 클릭한 사용자의 개인정보를 보호하고 스팸 댓글 등을 방지하는 용도로 쓰인다.
noopener
noopener : 링크를 클릭한 사용자가 새 창에서 열린 페이지에서 원래 페이지에 악성 스크립트가 접근하는 것을 방지한다.
하이퍼링크를 클릭할 때, 해당 앵커 태그에 target="blank" 속성이 적용되어 있다면 성능과 보안 면에서 취약점이 발생할 수 있다. 새롭게 열린 페이지에서 javascript를 통해 원본 페이지에 직접 접근이 가능해져 이를 이용해 피싱 공격을 받을 수도 있는 것이다. 이러한 피싱 공격을 "탭 내빙" 이라고 부른다.
이러한 문제점을 해결하는 방법이 noopener 속성이다. noopener을 적용하면 원본 페이지에 대한 접근을 제공하지 않고 새 탭에서 최상위 브라우징 컨택스트를 새로 생성하여 링크를 열도록 브라우저를 제어한다. 그러므로 새 페이지에서 window객체로 접근하려고 해도 null값이 반환되게 한다.
noreferrer
noreferrer : 링크를 클릭한 사용자가 다른 웹사이트로 이동할 때 HTTP 리퍼러 헤더를 전송하지 않도록 한다.
여기서 HTTP 리퍼러 헤더란 HTTP 요청 헤더 중 하나로, 클라이언트가 서버에게 요청을 보낼 때 이전 페이지의 URL을 포함한다. 이전 페이지의 URL은 서버에서 사용자의 검색 활동을 추적하는 데 사용될 수 있다.
noreferrer도 noopener과 마찬가지로 새로 열린 사이트가 window객체에 접근하는 것을 방지하는 용도로 쓰인다.
nofollow
nofollow : 검색 엔진이 해당 링크를 따라가지 않도록 한다.
nofollow는 일반적으로 댓글에 달리는 링크에 주로 사용하는데, 웹사이트의 링크가 보증하거나 신뢰할 수 없기 때문에 현재 웹사이트와 연결되지 않기 바라는 경우에 쓰인다.
nofollow옵션이 제공된 링크는 크롤링하지 않고 검색 엔진에도 영향을 미치지 않게 로직이 짜여있기 때문에 noffolow가 없는 링크보다 보다 안전하다.
