요약

• a 태그를 사용하여 새 창에서 열기를 구현할 때, target=”_blank”로 구현할 수 있다.

• 그러나 target=”_blank”를 사용할 때는 보안에 주의해야 한다. 새로 열린 웹페이지의 JavaScript에서 window.opener를 사용하여 이전 웹페이지에 접근할 수 있기 때문이다.

• 보안 조치로 rel=”noopener noreferrer” 속성도 한 세트로 작성하자.

• noopener는 window.opener의 접근을 방지하고 noreferrer는 사용자의 브라우저 히스토리에 접근하지 못하게 한다.

속성

target

<a target="_blank"></a>

• 새 탭 또는 새 창에서 열기 기능
• 이 속성이 없으면 현재 페이지에서 열기

rel

<a rel="noopener noreferrer"></a>

noopener: 새 페이지의 JavaScript에서 window.opener를 통해 이전 페이지로 접근하는 것을 방지한다. 이로 인해 새로 열린 페이지는 이전 웹 페이지의 JavaScript 실행 환경에 접근할 수 없게 되며, 이는 보안성을 높이는 중요한 조치가 된다.

noreferrer : HTTP 요청 헤더에서 referrer를 생략한다. <a>태그의 rel속성으로 사용될 때, 새로 열린 웹페이지에서 사용자의 이전 브라우징 기록을 추적할 수 없게 하여 개인정보 보호 및 보안을 강화한다.

최근 브라우저는 기본적으로 보안을 위해 해당 기능을 가지고 있으나 여러 환경의 경우를 대비해 항상 명시적으로 작성하는 것이 좋다.

참고자료

https://yozm.wishket.com/magazine/detail/1586/

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