noreferrer, noopener, nofollow

우리가 사용하는 <a> 태그에는 rel 속성이 있고 요즘 웹 페이지에서는 noreferrer, noopener, nofollow 등이 자주 보인다. 보안과 관련해 3가지 속성에 대해서 정리해보자.

a태그 rel 속성

<a> 태그의 rel 속성은 현재 문서와 링크된 문서 사이의 연관 관계를 명시할 때 사용한다. 이 속성은 반드시 href 속성이 설정되어 있어야만 사용 가능하다.

noopener

target="_blank" 속성 값을 noopener 속성을 사용하지 않고 사용한다면 <a>태그로 링크된 페이지를 열었을경우 연결 페이지에 window.opener 객체가 존재하는 것을 확인할 수 있다. 이렇게 열린 페이지는 자신을 연 브라우저에 대한 정보를 가지고, 제어할 수 있는 권한이 생긴다.
악의적으로 접근해 이를 이용한 피싱 공격을 탭 내빙(Tab nabbing)이라고 한다.

noopener를 적용하면 원본 페이지에 대한 컨텍스트 엑세스를 제공하지 않고 새 탭에서 최상위 브라우징 컨텍스트를 새로 생성하여 링크를 열도록 브라우저에게 지시한다. 따라서 새 페이지에서의 window.opener의 값은 null이 된다.

noreferrer

noopener 와 유사한 기능으로 noreferrer는 새로 열린 사이트가 window.opener 객체를 조작하지 못하게 한다.

noopener 와 noreferrer는 언제 사용할까?

일반적으로 둘 다 사용하는것이 좋다. 브라우저 호환성 때문이고, IE가 문제다. 대부분의 최신 브라우저는 두 속성 모두를 지원한다. 하지만 일부 구형 브라우저의 경우에는 noopener만 지원하기 때문에 일반적으로는 둘 다 사용하도록 하자.

nofollow

nofollow 속성값은 검색 엔진에게 광고성 링크, 댓글등 또는 웹사이트와 연결하지 않기를 바라거나 크롤링하지 않기를 바라는경우 사용한다.

nofollow 스팸 댓글 때문에 등장했다. 페이지에 부분별하게 달린 스팸 댓글이 페이지 순위에 영향을 주고, 평판이 내려간다. 따라서 구글은 nofollow 속성이 있는 링크는 크롤링 하지 않고 검색 엔진에도 영향을 미치지 않게 로직을 변경했다. 하지만 nofollow 속성이 적용되었다해도 해당 페이지의 크롤링을 완전히 막을수는 없다. nofollow에 의존하기 보다 robots.txt 또는 메타 태그를 이용하는 것이 가장 좋은 방법이다.