<a> 태그의 target="_blank" 사용 시 무조건 noopener, noreferrer 추가해야 하는 이유!

<a> 태그의 target=”_blank” 사용 시 rel 속성값인 noopener, noreferrer을 사용하지 않으면

보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다.

그렇다면 왜 이 두 개의 속성값을 사용해야 하는지 자세히 알아보자!

 

target="_blank"는 연결한 웹 페이지를 새로운 탭에서 연다. 사용법은 아래와 같다.

<a href="연결할 페이지의 URL" target="_blank">새 탭에서 보기</a>

 

 

여기서, target="_blank" 사용 시 문제점은?

1. 보안상 취약점이 생긴다
   target="_blank”를 사용하여 새탭으로 페이지가 열리는데, 이 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크를 건 페이지)의 오브젝트에 접근해서 'window.opener.location = 새로운 URL'로 부모 윈도우의 URL을 바꿔 쳐 개인정보 유출을 유도하는 가짜 페이지로 부적절한 리디렉션을 하는 등의 보안상에 심각한 문제가 발생할 수도 있다.
2. 퍼포먼스가 떨어질 수 있다
   target="_blank"가 사용된 링크에 의해 열린 링크된 페이지는 링크를 건 페이지와 같은 프로세스를 통해서 실행된다. 그러므로 가령 링크된 페이지에서 높은 부하를 유발하는 JavaScript가 실행되고 있으면 링크를 건 페이지에도 그 영향이 미쳐져 의도하지 않게 퍼포먼스가 떨어지는 문제가 발생할 수도 있다.

 

그렇다면, 해결 방법은~?

noopener와 noreferrer 지정!

• noopener : noopener(노오프너)를 지정하면, 링크된 문서가 열리는 새 창이나 탭이 열리는 창에 자바스크립트로 액세스할 수 없도록 방지. 더불어 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 된다.
• noreferrer : 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않는다. → 보안상 좋음

사용 방법?

<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>