noopener noreferrer
문제점
1. 보안 문제
외부 링크로 보내기 위해 target="_blank" 라는 속성을 종종 사용하게 되는데 이때 noopener 속성을 사용하지 않는다면 링크된 페이지는 window.opener 라는 객체를 이용하여 링크를 건 페이지를 제어할 수 있는 권한이 있어서 보안상으로 굉장히 위험하다.
2. 퍼포먼스 문제
target="_blank" 가 사용된 링크에 의해 열린 페이지는 링크를 건 페이지와 같은 프로세스를 통해 실행이 된다. 즉 링크된 페이지에서 연산이 큰 작업이 수행된다면 링크를 건 페이지에도 영향이 미쳐 퍼포먼스가 떨어질 수 있다
해결방안
1. noopener
noopener 값을 rel 속성으로 사용하면 링크된 페이지에서 window.opener 객체가 존재하지 않기 때문에 보안 문제를 해결할 수 있다. 더불어 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 퍼포먼스 문제도 해결된다.
2.noreferrer
noreferrer를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 referer로서 송신하지 않는다. 쉽게 말하면 noreferrer 값은 링크를 클릭하면 참조자 정보를 숨긴다.
HTTP 리퍼러(HTTP referer)는 웹 브라우저로 월드 와이드 웹을 서핑할 때, 하이퍼링크를 통해서 각각의 사이트로 방문시 남는 흔적을 말한다.
사용
보통 이렇게 2가지 속성 같이 사용한다.
<a href="https://www.abc.com" target="_blank" rel="noopener noreferrer">외부 링크</a>nofollow
nofollow 는 링크 전달에 따른 페이지 평가를 비활성활 할 수 있는 속성이다.
페이지에 설정되어 있는 링크에 nofollow 를 설정하면 검색엔진에게 이 링크 페이지를 전달하고싶지 않다고 알 알리는 것이다. 쉽게 말하면 검색엔진이 해당 링크 페이지를 인식하지 못하게 한다.
결과적으로 링크된 페이지는 SEO 혜택을 받지 못한다.
nofollow 사용
<a href="https://www.abc.com" target="_blank" rel="nofollow">외부 링크</a>nofollow 를 그럼 어떤 경우에 사용할까?
1. 신뢰할 수 없는 사이트에 대한 링크
링크가 신뢰할 수 없는 사이트나 페이지로 어쩔 수 없이 연결되어 있는 경우(예를 들면 유료 광고 등)는 nofollow를 설정하여 링크 전달을 비활성화 하는 것이 좋다.
2. 유료 링크
유료링크는 페이지 랭크나 검색순위를 의도적으로 조작하기 위해 링크를 돈으로 구입하는 것을 말한다. 유료링크는 Google에서 금지되어 있다. 만약 SEO 목적이 아니라 홍보나 광고용으로 유료링크를 설정할 때는 nofollow로 지정할 것을 권장한다.
3. 사용자 생성 컨텐츠
사용자 생성 콘텐츠는 스팸 및 저품질 링크의 출처가 될 수 있다.
이렇게 링크로 연결된 페이지가 특별한 평가를 받을 필요가 없는 경우 사용할 것을 권장한다.
Reference
Link types: noopener - HTML: HyperText Markup Language | MDN
[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)
