[HTML] <a>에 target="_blank"와 rel="noreferrer noopener"를 함께 사용해야 하는 이유

neori·2022년 4월 26일

`<a>` 태그의 `target` 속성

HTML에서 링크를 추가하기 위해 <a> (anchor) 요소를 사용한다. <a> 태그의 target 속성에는 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시할 수 있다.

속성값	설명
`_blank`	링크된 문서를 새로운 윈도우나 탭에서 열기
`_self`	(기본값) 링크된 문서를 링크가 위치한 현재 프레임에서 열기
`_parent`	링크된 문서를 현재 프레임의 부모 프레임에서 열기
`_top`	링크된 문서를 현재 윈도우 전체에서 열기
`프레임 이름`	링크된 문서를 명시된 프레임에서 열기

`target="_blank"`의 문제점

보안상 취약점

링크된 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크가 걸려있는 페이지)의 오브젝트에 접근해서 window.opener.location=새로운 URL로 부모 윈도우의 URL을 바꿔칠 수도 있다.
이렇게 부모 윈도우의 정보를 사용하거나 조작하여 개인정보를 유출시키는 가짜 페이지로 부적절한 리다이렉션을 하는 등 보안상 심각한 문제가 발생할 수 있다.

성능 저하

링크된 페이지는 부모 윈도우와 같은 프로세서를 통해 실행된다. 만약 링크된 페이지에서 높은 부하를 일으키는 JavaScript가 실행된다면 부모 윈도우에 영향을 미쳐 퍼포먼스가 떨어질 수 있다.

문제점 해결 방법

target의 속성값으로 _blank를 지정할 때는 rel="noreferrer noopener"를 추가하자! 링크된 페이지를 열면 referrer(이전 페이지)와 opener(새 페이지를 연 사람) 정보가 생기는데 두 정보를 아예 없앤다.

최신 브라우저에서는 target="_blank"를 지정하면 자동으로 rel="noopener"가 적용된다.

<a
   href="https://velog.io/@neori"
   target="_blank"
   rel="noreferrer noopener">
  Made by Neori
</a>

rel 속성: 링크된 페이지와의 관계(relationship). 공백으로 구분해서 관계 목록을 나열하여 지정할 수 있다.
noopener: 링크된 페이지에서 window.opener로 부모 윈도우를 참조할 수 없게 된다. 그리고 링크된 페이지와 부모 윈도우는 별개의 프로세스로 취급되어서 서로 퍼포먼스에 영향을 미치지 않는다.
noreferrer: 다른 페이지로 이동 시 링크를 건 페이지의 정보를 브라우저가 Referer HTTP 헤더로 송신하지 않는다. (참고: Referer header: privacy and security concerns)

참고
<a> 태그의 target 속성
링크에 noopener noreferrer 사용하는 이유
MDN <a> 보안과 개인 정보
MDN Referer header: privacy and security concerns
Target="_blank" - the most underestimated vulnerability ever