Tabnabbing 공격과 rel=noopener

블로그에 글을 쓰다 에디터의 링크 추가 기능 중 새 창으로 열기 기능을 이용했는데, target="_blank" 외에 rel="noopener" 라는 속성이 함께 추가되는 걸 발견했다. 무슨 기능을 하는 속성인지 궁금해 찾아보았는데 피싱공격에 대응하는 중요한 기능의 속성이라는 걸 알게 되었다. 이번 기회에 관련 내용을 정리하고 이를 실제 프로젝트에도 적용해보고자 한다.

Tabnabbing 공격

Tabnabbing이란 HTML 문서 내에서 새 창 링크(target="_blank"인 Anchor 태그)를 클릭 했을 때, 새로 열린 창에서 기존 문서의 window.opener의 location 값을 피싱 사이트로 변경해 사용자의 로그인 정보 등을 탈취하는 피싱 공격이다.

target="_blank"인 Anchor 태그 뿐만 아니라 window.open() 메서드를 이용해 띄우는 새창 팝업도 이 공격에 대상이 될 수 있다.

자세한 공격 절차 살펴보기

대응 방법

이러한 공격에 대응하기 위해 아래와 같은 방법을 사용할 수 있다.

1. rel=noopener 속성

<a> 태그와 window.open() 메서드에 직접 rel-noopener 속성을 추가하는 방법으로 취약점을 보완할 수 있다. noopener와 동시에 추가적인 보안 방법으로 noreferrer 속성도 추가할 수 있다. noreferrer는 브라우저가 다른 페이지로 이동할 때 Referer:HTTP 헤더를 통해 이 페이지 주소 또는 다른 값을 보내지 못하도록 방지하는 기능을 한다.

<a> 태그에 rel="noopener" 속성 추가하기

<a target="_blank" rel="noopener" href="#" target="_blank" rel="nooperner">링크</a>

(2021년 현재, 일부 브라우저에는 해당 기능이 자체적으로 추가되었다고 하지만, 이를 지원하지 않는 브라우저 대응을 위해 작업 시 위 속성을 추가하는 것이 좋을 듯 하다.)

// 피싱 공격 방지를 위한 noopener 속성 자동 추가
$('a[target="_blank"]').attr('rel','noopener');

위와 같이 자동으로 스크립트 처리를 하면 마크업 시 일일이 추가하지 않아도 된다.

윈도우 팝업용 스크립트에 noopener 속성 추가하기

window.open(url, windowName, "resizable,scrollbars,status,noopener")

이처럼 window.open() API paremeter로 noopener 속성을 바로 적용할 수 있지만 해당 속성을 적용할 경우, Chrome 브라우저에서 팝업창의 크기 설정이 불가능하다. 디자인에 민감한 고객사의 프로젝트인 경우 아래의 소스 사용을 고려해볼 수 있다.

$(document).on('click', '.open-pop', function(e){
    e.preventDefault();

    var popUrl = $(this).attr('href');
    var popup = window.open('', 'popup', 'width=1000,height=780,scrollbar=yes');
    popup.opener = null;
    popup.location = popUrl;

    return popup;
});

2. 라이브러리 사용 - blankshield

rel=noopener 속성은 완벽한 크로스 브라우징을 지원하지 않으므로 blankshield 등의 라이브러리를 사용하는 방법도 있다.

참고자료

• Links to cross-origin destinations are unsafe
• tabnabbing 공격 방어 대책 정리
• Tabnabbing 공격과 rel=noopener 속성
• Window.open() - MDN