<a> 외부링크에 noopener noreferrer를 사용하는 이유

target="_blank" 의 문제점

1. 보안상 취약점이 생긴다

링크에 target="_blank" 속성을 추가하면 새탭에서 링크된 페이지가 열린다.
이 페이지는 window.opener 로 부모 윈도우(링크를 건 페이지)에 접근을 해서
부모 윈도우의 정보를 마음대로 조작할 수 있다.

ex) 'window.opener.location = 새로운URL' URL를 바꿔치기 하면 해커가 만든 피싱사이트로 리디렉션를 할수가 있다.

2. 퍼포먼스가 떨어질 수 있다.

target="_blank" 속성으로 링크된 페이지는 링크를 건 페이지(부모 페이지)와 같은 프로세스로 실행이 된다. 예를 들어 링크를 건 페이지 에서 높은 부하를 유발하는 JS코드 가 실행되고 있으면 링크된 페이지도 그 영향을 받아 퍼포먼스가 떨어질 수 있다.

noopener 와 norefferer

noopener

링크된 페이지에서 window.opener 에 접근할 수 없도록 함 -> 링크를 건 페이지 참조 불가
또한 링크를 건 페이지와 별개의 프로세스로 취급하기 때문에 퍼포먼스가 떨어지는 일도 없어짐

noreferrer

링크를 건 페이지의 주소 등의 정보를 브라우저가 Referfer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않는다.

최종 코드

<a href="링크된 페이지 URL" target="_blank" rel="noopener noreferrer">새탭 링크</a>