HTML <a>태그의 target 사용 시 주의점 (rel = "noreferrer")

a 태그의 속성 중 target 을 사용할 때는 rel="noreferrer" 속성을 추가해서 함께 사용해야한다.

리액트 JSX에도 a태그를 사용하는데 읽고 있는 책에서 target 과 noreferrer, noopener 속성이 같이 있어서 어떤 연관이 있는지 알아보게 되었다.

https://www.reliablesoft.net/noreferrer-noopener/

 

 

[MDN]

target

링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

• _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
• _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
• _parent: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
• _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

 

 

최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 rel="noopener"를 적용한 것과 같은 동작을 한다고 한다.

 

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