noopener 속성으로 Tabnabbing 공격 방어하기

<a> 태그를 활용할 때 새 창에서 페이지를 이동하기 위해서는 target="_blank" 라는 속성을 활용합니다.

<a href="https://www.naver.com/" target="_blank">네이버로 이동!</a>

그런데, 이 속성에 보안 문제가 숨어있다는 사실을 알고 계신가요?

Tabnabbing 공격

window.opener 라는 전역 객체는 현재 창을 열었던 이전 창의 참조를 반환합니다.

opener라는 이름처럼 "이 페이지를 연 페이지" 의 정보가 담겨 있습니다.

그런데 해커들이 기가 막힌 방법을 고안해냈는데요, 이 window.opener의 location을 피싱 사이트의 주소로 바꿔치기하는 것입니다. 그러면 원래 사이트는 피싱 사이트로 변하게 되고 사용자는 별 의심 없이 정보를 건네주게 되는 것이죠.

간단 시연

_blank 속성으로 새 탭에서 네이버에 들어간 뒤, 네이버에서 window.opener.location 속성을 조작해 이전 탭을 피싱 사이트로 바꿔치기한 모습입니다.

 

이렇게 _blank 속성을 활용하면 opener 객체가 생성된다는 점으로 인해 성능과 보안상 취약점이 생기게 되는데요, 이를 극복하기 위한 것이 바로 rel=noopener 속성입니다.

noopener & noreferrer

<a href="https://www.naver.com/" target="_blank" rel="noopener">네이버로 이동!</a>

noopener 속성을 사용하면 새 탭에서 opener를 참조할 수 없게 되는데요, 이러면 보안 문제와 함께 *성능 문제를 함께 해결할 수 있습니다.

(* opener에 참조가 가능할 경우 이전 탭을 항상 지켜보고 있어야 하므로 같은 스레드에서 두 페이지가 동작하게 됩니다.)

 

추가적인 보안을 위해 noreferrer 속성을 활용할 수도 있는데요, 요청이 어느 오리진으로부터 왔는지에 대한 정보를 담고 있는 referrer 헤더를 숨겨 잠재적인 위협을 방지할 수 있습니다.

(좌) - noreferrer 사용하지 않을 때 / (우) - noreferrer 사용할 때

하지만 2021년 이후의 브라우저 버전에서는 대부분 링크에 기본적으로 noopener와 noreferrer 속성이 적용됩니다.

 

다만 그래도 여러 브라우저를 지원하는 것이 프론트엔드 개발자의 목표이니, target=_blank 속성을 사용할 때는 습관처럼 noopener 속성을 붙여줄 수 있도록 합시다. 😄

TL;DR

- target=_blank 속성은 window.opener 객체를 활용한 Tabnabbing 공격에 노출되어 있다.

- 이를 막기 위해 rel=noopener noreferrer 속성을 추가하자.