HTML 마크업을 작성하다 보면 새창 열기 기능을 위해서 다음과 같이 작성하는 경우가 많습니다. 겉보기에는 새창도 잘 열리고 아무 문제가 없는 것 같지만, 이렇게 작성하면 tabnabbing 피싱 공격에 노출됩니다.
<a href="https://www.example.com" target="_blank">
이런 문제가 있기 때문에 MDN에서도 target을 사용할 때, rel="noreferrer noopener"를 추가해 window.opener API의 악의적인 공격을 방지하라고 권고하는 내용을 찾아볼 수 있습니다.
Tabnabbing이란
target="_blank"에 의해 열린 새 페이지에서 window.opener.location을 변경하여, 기존 페이지를 피싱 페이지로 변경해 사용자 정보를 탈취하는 것입니다. 이러한 피싱이 가능한 이유는 기본적으로 새 탭을 열면 현재 탭을 열었던 탭의 참조를 반환하기 때문입니다. 이 참조를 없애는 방법이 바로 rel="noreferrer noopener"를 추가하는 것입니다.
피싱 시나리오의 예
- 사용자가 cgm.example.com에 접속합니다.
- 사용자가 happy.example.com로 이동하는 게시물을 클릭합니다.
- 새 탭에서 happy.example.com이 열리고 자바스크립트를 사용해 기존 탭을 피싱 사이트로 이동시킵니다.(window.opener.location='cgn.example.com')
- 기존 탭으로 이동한 사용자는 로그인이 풀렸다고 생각하고 아이디와 비밀번호를 다시 입력합니다.
- 피싱 페이지(cgn.example.com)는 사용자 정보를 탈취하고 본래 페이지(cgm.example.com)로 리다이렉션 시킵니다.
[참고] noopener
해당 타입을 사용하면 현재 탭을 열었던 탭의 참조를 없앱니다. 즉, 새 탭에서 Window.opener 속성이 null 값을 반환합니다.
[참고] noreferrer
해당 타입을 사용해도 Window.opener 속성이 null 값을 반환합니다. 또한 다른 페이지로 이동할 때 브라우저가 HTTP 헤더에 referer로 이 페이지 주소 또는 다른 값을 전송하지 못하도록 차단합니다. 때문에 새 탭을 요청한 이전 탭이 무엇인지 알 수 없게 됩니다.