Remark : Problem Solving : Reverse Tabnabbing Software Attack, noopener, noreferrer (last update: 2020.12.21.)
Debugging & Problem Solving
2-1. Tabnabbing : Using target="_blank" without rel="noreferrer" is a security risk
Notion의 Debugging & Problem Solving 통합 페이지 바로가기
0. References
Link with target="_blank" and rel="noopener noreferrer" still vulnerable? - stackoverflow
Reverse Tabnabbing -OWASP
Tabnabbing 피싱 공격의 동작 원리와 대응책 - 레진 기술 블로그
tabnabbing 공격 방어 대책 정리 - Medium
1. Introduction
React에서 Component를 컴파일하는 과정에서 Compiled with Warnings 문구가 떴었다. 작동에 지장을 주는 Error는 아니니 가볍게 흘려보다 생소한 내용이 있어 리서칭 해 보았다. 여기서 내가 본 문구는 Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener인데, 직역하면 <a> 태그 작성 시 <rel="noreferrer">없이 <target="_blank">를 사용하는 것은 보안 상의 위험이 있다는 의미이다. 이 보안 상의 위험이란 무엇인지, 또 rel="noreferrer"와 rel="noopener"란 어떤 의미인지, 어떻게 이 보안 상 위험을 방지할 수 있는 지 알아보기로 한다.
2. Problem
이 보안 상의 위험이란 바로 Reverse Tabnabbing Software Attack을 말한다. 브라우저에서 사용자의 개인 정보를 가로채는 여러가지 피싱 공격 기법 중 하나로, <a href="link-path" target="_blank">인 요소를 클릭했을 때, 새로 열린 탭 또는 페이지가 기존 문서의 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술이다. 예를 들자면 이러한 상황의 경우다:
- 사용자가 평소에 이용하던 사이트에 접속하고, 링크를 클릭한다.
- 클릭한 링크에서 새 창이 열린다. (
_blank는 링크를 클릭했을 때 새 창을 열기 위한 attribute) - 본래의 창을 js로 opener의 location을 변경하여 Phishing(피싱) 사이트로 변조한다.
- 사용자가 본래의 창으로 돌아왔을 때, 바뀐 주소를 확인하지 못 하고 계정 정보를 입력한다.
- phishing 사이트를 통해 사용자의 계정 정보는 탈취된다.
즉, target="_blank"에 이 attribute를 대입하지 않는다면 연결 중인 페이지(이하 새 창)는 연결 페이지(이하 부모 창)에 부분적인 접근이 가능해 진다. 이는 window.opener 객체가 존재하기 때문으로, 개발자모드(F12)의 콘솔에 window.opener를 입력해 보면 알 수 있다. 이 객체의 존재 유무는 새 창에서 부모 창을 제어할 수 있는 권한이 존재함을 의미하며, 최악의 경우 window.opener 객체를 통해 악의적인 동작을 일으킬 수 있다.
React에서 <a href="location-path" target="_blank">를 사용하여 링크 요소를 대입하고 컴파일하였을 때, rel="noreferrer"와 rel="noopener"를 a 태그에 함께 삽입해야 한다는 주석이 Warning 메세지로 뜨는 이유가 바로 이 것이다. 그렇다면 rel="noreferrer"와 rel="noopener"의 역할은 무엇인가? 이들은 어떤 과정을 거쳐 이 Reverse Tabnabbing Software Attack을 방지할 수 있는 것인가?
3. Solve
해결 방법은 간단하다.
target="_blank" attribute를 선언할 때 rel="noopener noreferrer"를 함께 선언해 주면 된다.
<a href="https://link-path.com" target="_blank" rel="noopener noreferrer"></a>
각 요소의 역할은 다음과 같다:
rel="noopener"
window.opener 객체가 존재하지 않게 하여, 자바 스크립트를 사용한 외부의 접근과 변경 처리 등을 방지한다.
rel="noreferrer"
noopener와 유사한 기능으로, HTTP referrer header를 넘기지 않게 한다. 즉, 타 페이지를 탐색할 때 브라우저가 참조 웹 페이지의 주소를 보낼 수 없게 하여, 사용자가 링크를 클릭할 때 해당 사용자의의 정보를 숨기는 역할을 수행한다.
