Tabnabbing
먼저 noopener, noreferrer, nofollow 속성을 알기 전에 해야할 것이 이 속성이 왜 나오게 되었는지를 확인하는 것이다.
특정 anchor 구조를 통해 페이지를 이동 시에 선택지는 "새 창에 열거나", 현재 창을 바꾸어주는 두 가지가 있다. 페이지의 특성마다 다르겠지만, 현재 창을 유지하고 싶은 경우 새 창을 열어주는 방식을 선택한다. 이 때 anchor에 줄 수 있는 속성이 target = "_blank" 이다. 하지만 이 방식은 피싱에 취약한데, 이 취약점을 이용해 공격하는 것이 Tabnabbing 기법이다.
Tabnabbing 은 새로운 창이 열리면서 기존의 location을 통해 이동하게 만들어놓은 태그를 변경해 자신의 사이트나 원하는 피싱 사이트로 변경해 이동하게 만드는 공격이다. 예를 들어 페이스북(페이스북은 이 공격이 막혀있다.)에서 탐색을 하다가 특정 페이지를 클릭했는데, 페이스북 로그인을 하라는 창이 뜬다면, 음 로그인이 풀렸군! 하면서 자연스럽게 로그인을 하게 될 것이다. 이 페이지가 피싱사이트라면 개인정보가 유출되는 것이다.
공격 절차는 다음과 같다.
- 사용자가 cgm.example.com에 접속한다.
- 해당 사이트에서 happy.example.com으로 갈 수 있는 외부 링크를 클릭한다.
- 새탭으로 happy.example.com가 열린다.
- happy.example.com에는 window.opener 속성이 존재한다.
- 자바스크립트를 사용해 opener의 location을 피싱 목적의 cgn.example.com/login 으로 변경한다.
- 사용자는 다시 본래의 탭으로 돌아온다.
- 로그인이 풀렸다고 생각하고 아이디와 비밀번호를 입력한다.
- cgn.example.com은 사용자가 입력한 계정 정보를 탈취한 후 다시 본래의 사이트로 리다이렉트한다.
https://blog.coderifleman.com/2017/05/30/tabnabbing_attack_and_noopener/
noopener
취약점 방어
이러한 취약점을 방어하기 위해 noopener 속성이 추가되었다.
개발자는 anchor에 rel="noopener" 속성을 추가함으로써 페이지의 location 변경 요청을 막을 수 있다. location 자체를 null로 인식하게 만들어서 접근 자체를 할 수 없게 만든다.
그림 출처:https://blog.coderifleman.com/2017/05/30/tabnabbing_attack_and_noopener/
성능 개선
_blank 속성을 이용해 새 창을 열면 그 창을 연 부모 창에 지속적으로 연결되어 있다. 같은 스레드에서 동작하기 때문에, 새 창에서 계속 부모 창을 참조할 수 있으며 이 말은 새 창에서 부담이 큰 작업을 한다면 부모 창까지도 느려질 수 있다는 이야기이다.
대부분의 브라우저는(파이어폭스 제외) 멀티 프로세싱 기반으로 작동한다. 각각의 탭은 하나의 프로세스이며, 이 때문에, 하나의 탭이 동작하지 않으면 그 탭만 종료할 수 있다. 하지만 DOM 접근은 하나의 스레드에서만 이루어진다. 때문에 DOM 에서 href 가 이루어진다면, 그 스레드에서만 작동하게 되고, 새 창과 기존의 부모 창에 참조가 이루어진다면 스레드에서 독립될 수가 없다. 때문에 부모 창과 새 창은 반드시 하나의 스레드에서 동작할 수 밖에 없다. rel="noopener" 통해 새 창과 부모 창이 연결될 필요 없다고 선언해주면 크로니움 기반 브라우저는 새로운 프로세스에서 새 창을 열게 만들어준다.
SEO 영향 없음
링크가 끊어지면 SEO에 안 좋은 영향이 있는 것 아닌가? 생각할 수 있지만,
Rel=”noopener” and SEO
Noopener has zero impact on your SEO so you can safely use it to enhance the security of your website.
https://www.reliablesoft.net/noreferrer-noopener/
전혀 영향이 없다.
단점
-
noopener를 사용할 경우 독립적인 프로세스로 실행되게 되므로, 콜백을 할 수 없다.
-
새로운 창을 팝업 형태로 띄우게 될 경우, 부모 창에서 해당 창의 크기를 지정해서 열어주는 경우가 있는데, 이런 코드가 먹히지 않는다. 독립적인 프로세스이기 때문에, 기본 창 크기로 열리게 된다.
