target="_blank"의 문제점 / noopener noreferrer 사용

보통 새 탭 열기 링크를 만들 때 target = "_blank"를 사용하게 되는데

target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다는 것을 알게되었다.

 

JavsScript에서 windoe.opener로 부모 윈도우의 오브젝트에 접근하여 부모 윈도우의 URL을 바꿀경우

부적절한 페이지로 리디렉션을 하는 등 보안 상의 문제가 발생 할 수 있다.

 

그리고 _blank로 링크를 열 경우 링크를 건 페이지와 같은 프로세스를 통해 실행되는데

링크를 건 페이지가 부하가 높은 페이지일 경우 링크된 페이지에도 적용이되어 퍼포먼스가 떨어질 우려가 있다.

 

문제 해결을 위해 noopner, noreferrer를 사용하자.

<a href="URL" target="_blank" rel="noopener noreferrer"></a>

noopener : 링크된 페이지에서 window.opener를 사용하여 링크를 건 페이지를 참조할 수 없게되며,

링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 실행이 된다.

 

noreferrer : 다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를

브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않는다.

 

 

참고 : https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html