noreferrer, noopener, nofollow는 모두 HTML의
<a>태그의 rel 속성값이며 각각 보안 및 검색 엔진 최적화(SEO)에 영향을 미친다.
🫥 noreferrer
noreferrer은 사용자가 링크에 연결된 외부 페이지로 온 경로에 대한 정보를 마스킹 처리한다. 페이지 A에서 B로 이동할 때 브라우저는 B의 페이지를 렌더링하고자 서버에 요청을 보내게 되는데, HTTP 요청 헤더에 리퍼러(referer)정보(A의 url을 비롯한 정보)를 포함해서 요청을 전송한다. 하지만 리퍼러 정보에는 사용자의 세션 ID나 개인정보가 포함될 수 있기 때문에 noreferrer를 사용하여 민감한 정보가 노출되지 않도록 방지할 수 있다.
🔐 noopener
새로운 탭에서 링크를 열 때 target="_blank" 라는 속성을 종종 사용하는데, 이 때 noopener 속성을 사용하지 않으면, 새로 열린 페이지가 window.opener라는 객체를 이용하여 기존의 페이지를 부분적으로 접근할 수 있는 권한이 생겨서 보안 문제가 생길 수 있다. noopener를 사용하면 새로열린 페이지에 자바스크립트 실행 문맥이 원래 페이지와 분리돼서 피싱 공격에 노출되는 것을 막을 수 있다.
보통 이렇게 2가지 속성을 같이 사용한다.
<a href="https://www.abc.com" target="_blank" rel="noopener noreferrer">외부 링크</a>
🧐 mdn에 따르면 target="_blank" 사용 시 기본값으로 rel="noopener"가 같이 사용된다고 한다. 하지만 모든 사용자가 최신 버전의 브라우저를 사용하는 것은 아니기 때문에 링크에 추가적으로 noopener를 명시적으로 사용하는 것이 좋다.
🚫 nofollow
nofollow는 noreferrer와 반대 역할을 한다. 리퍼럴 트래픽 정보는 유지한 채 페이지 내 링크에 대한 검색 엔진의 크롤링을 막는다. 그리고 링크를 통해 전달되는 페이지의 순위에도 영향을 주지 않게된다.
nofollow는 이렇게 사용한다.
<a href="https://www.abc.com" target="_blank" rel="nofollow">외부 링크</a>
언제 nofollow를 사용할까?
1. 신뢰할 수 없는 사이트에 대한 링크
- 링크가 신뢰할 수 없는 사이트나 페이지로 연결되어 있는 경우(ex.유료광고)는 nofollow를 설정하여 링크 전달을 비활성화 하는 것이 좋다.
2. 유료 링크
- 유료링크란 페이지 랭크나 검색순위를 의도적으로 조작하기 위해 돈으로 구입한 링크를 말한다. 만약 SEO목적이 아닌 홍보/광고용으로 유료링크를 설정할 때는 nofollow를 지정할 것을 권장한다.
3. 사용자 생성 컨텐츠
- 댓글란에 사용자가 남긴 url과 같은 성격의 링크에 사용할 수 있다.
정리하자면
noreferrer: 트래픽 정보를 숨기고 싶을 때
noopener: 피싱과 같은 악성 공격에 대비하여 보안을 강화하고 싶을 때
nofollow: 검색엔진이 크롤링하지 않는 링크를 만들고 싶을 때
