문제 상황

<a 
  href="https://github.com/joyfuljoeunlee"
  target="_blank"
>
 Blog
</a>

위와 같이 a태그를 작성하고 새창으로 외부 링크를 열도록 구현했다.

그리고 보안 이슈로 인한 경고를 콘솔에서 볼 수 있었다.

target="_blank" 속성을 사용하게 되면 Window.opener 객체로서 새 탭에서 부분적으로 이전 탭으로 접근할 수 있다. 이 말인 즉슨 새 탭에서 이전 탭을 제어할 수 있는 권한이 있다는 것인데, 악의적으로는 Tabnabbing을 가능하게 한다. 그렇기 때문에 이전 탭의 참조를 없애는 noopener 혹은 noreferrer를 추가하라고 콘솔에 뜨는 것이었다.

해결 방법

<a 
  href="https://github.com/joyfuljoeunlee"
  target="_blank"
  rel="noopener noreferrer"
>
 Blog
</a>

noopener

위 속성을 사용하면 이전 탭의 참조를 없앤다. 새 탭에서 Window.opener 속성이 null 값을 반환하게 되는 것이다. 더불어 두 페이지가 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 된다.

noreferrer

위 속성을 사용하면 새 탭으로 이동할 때 링크를 건 이전 탭의 정보를 HTTP 헤더의 referer 값으로 사용하지 못한다. 그렇기 때문에 새 탭에서 이전 탭이 무엇이었는지 알 수 없다.

어떤 웹사이트 제작 플랫폼에서는 target="_blank"에 rel="noopener noreferrer"가 자동으로 덧붙여진다고 한다. 그만큼 이 속성들이 필수적이라는 것을 말해준다.

도움이 된 자료

About rel=noopener, (2022.03.08), https://mathiasbynens.github.io/rel-noopener/#recommendations

target="_blank"를 아무생각 없이 쓰면 안되는 이유, (2022.03.08), https://hogni.tistory.com/150