[HTML] <a> 태그 'target' 요소

target 요소는 주로 _blank를 사용해서 새로운 탭에서 페이지를 열려고 할 때 말고는 사용한 적이 거의 없었다.
하지만 이번에 기능 하나를 개발하면서 다른 요소를 사용해야 하는 경우를 만나서 mdn을 보고 정리해 보았다!

의미

target 요소는 링크한 URL을 표시할 '위치'를 말한다. 위치는 브라우징 맥락을 말하는데, 탭, 창, <iframe>의 이름 등이 될 수 있다.

target 요소에는 총 네 가지 값이 들어갈 수 있다.

 

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

 

나의 경우 iframe 내부에서 _self 값을 사용해서 문제가 되었다. iframe은 하나의 브라우징 맥락이기 때문에, 원래 전체 창 맥락에서 redirect시키고 싶었지만 iframe 내부에서만 이동이 되었다. _top 값을 사용해서 문제를 해결할 수 있었다.

 

Good to know

target을 사용할 때는 rel="noreferrer"을 추가해 window.opener API의 악의적인 사용을 방지하는 걸 고려해야 한다.

rel  요소에 noreferrer을 지정하는 것은 굉장히 중요한 문제일 수 있다. 링크를 열면 referrer, 즉 이전 페이지와 opener, 링크를 연 사람의 정보가 생긴다. 링크된 페이지 내부의 JavaScript 함수가 window.opener 요소를 이용해 링크가 있던 부모 페이지의 정보에 접근해 새로운 URL로 바꿔치기 하거나, 정보를 수집할 수 있는 가능성이 있다. 이런 위험을 막아주는 요소가 rel="noreferrer"이다.

 

최근의 브라우저에서는 targtet="_blank"를 지정하면 rel="noopener"을 적용한 것과 같은 동작을 한다고 한다. 하지만 모든 버전에서 작동하는 것이 아니기 때문에 꼭 함께 써주는 것이 좋다.

 

Reference

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a#target

<a> - HTML: Hypertext Markup Language | MDN