window.opener 공격 막기 — target="_blank" 링크에 noopener 붙여야 하는 이유

1. target="_blank" 링크에서 왜 보안 이슈가 생길까

1) 새 탭을 여는 링크가 늘어난 이유

웹사이트에서 외부 링크를 클릭할 때 기존 페이지를 유지한 채 새 탭으로 열어두는 방식은 꽤 흔합니다. 사용자 입장에서는 원래 페이지로 돌아오기 편하고, 서비스 입장에서도 이탈을 줄이는 데 도움이 되기 때문입니다. 그래서 target="_blank"는 여러 화면에서 자주 사용됩니다.

2) 하지만 새 탭이 항상 안전한 것은 아님

문제는 새 탭으로 열린 페이지가 원래 페이지를 어느 정도 제어할 수 있는 구조라는 점입니다. 이때 핵심이 되는 것이 window.opener입니다.
새로 열린 페이지가 window.opener를 통해 원래 탭에 접근할 수 있으면, 의도치 않은 동작이 발생할 수 있습니다.

3) 검색하는 이유는 결국 “내 링크가 안전한가” 확인하려는 것

많은 사람이 window.opener, noopener, tabnabbing, 링크보안을 검색하는 이유는 단순합니다.
겉으로는 평범한 링크처럼 보여도, 새 탭을 여는 순간 보안상 취약해질 수 있기 때문입니다. 특히 외부 사이트를 많이 연결하는 블로그, 쇼핑몰, 홍보 페이지, 문서 사이트에서 자주 확인하는 항목입니다.

2. window.opener가 정확히 무엇인지

1) 부모 창과 새 창을 연결하는 역할

window.opener는 새 탭이나 새 창에서 “이 창을 열어준 원래 창”을 가리키는 참조입니다.
즉, target="_blank"로 열린 페이지가 원본 페이지와 연결되는 통로처럼 작동할 수 있습니다.

2) 편리하지만, 경우에 따라 위험할 수 있음

원래는 서로 연동되는 작업을 위해 쓰일 수 있지만, 외부 사이트로 이동한 경우에는 상황이 달라집니다.
만약 새로 열린 페이지가 악의적이거나 변조된 페이지라면, window.opener를 이용해 원래 페이지의 위치를 바꾸거나 다른 사이트로 유도할 수 있습니다. 이 때문에 링크보안 관점에서 주의가 필요합니다.

3) 모든 새 탭이 문제가 되는 것은 아님

중요한 점은 window.opener 자체가 무조건 나쁜 것은 아니라는 점입니다.
같은 서비스 내부에서 신뢰할 수 있는 페이지끼리 상호작용해야 하는 경우에는 활용될 수 있습니다. 다만 일반적인 외부 링크에서는 불필요한 연결을 끊는 쪽이 더 안전한 경우가 많습니다.

3. tabnabbing 공격은 어떻게 발생하나

1) 사용자가 원본 페이지를 그대로 믿는 점을 악용

tabnabbing은 사용자가 새 탭으로 이동한 뒤 원래 탭을 계속 신뢰한다는 점을 노립니다.
새 탭에서 악성 페이지가 열려도, 사용자는 원래 사이트가 그대로 열려 있다고 생각하기 쉽습니다.

2) 원래 탭을 로그인 화면처럼 바꿔치기할 수 있음

공격자가 새 탭에서 window.opener를 이용할 수 있으면, 원래 탭의 주소나 화면을 피싱 페이지처럼 바꾸려 시도할 수 있습니다.
이후 사용자가 다시 돌아왔을 때 실제 사이트라고 착각하고 비밀번호나 계정 정보를 입력하는 문제가 생길 수 있습니다. 이런 방식이 바로 tabnabbing과 연결됩니다.

3) 특히 외부 링크가 많은 사이트에서 더 중요

블로그 댓글, 추천 글, 자료실, 커뮤니티, 외부 제휴 링크가 많은 사이트는 이런 위험을 더 신경 써야 합니다.
한 번의 클릭이 곧바로 사고로 이어지지는 않더라도, 링크보안 설정이 빠져 있으면 불필요한 위험을 남길 수 있습니다.

4. noopener를 붙이면 무엇이 달라질까

1) window.opener 연결을 끊는 역할

noopener는 새 탭이 원래 창을 참조하지 못하도록 만드는 설정입니다.
즉, target="_blank"로 새 창을 열더라도 window.opener를 통해 부모 창에 접근하지 못하게 하는 것이 핵심입니다.

2) tabnabbing 위험을 줄이는 기본 방법

외부 링크에 rel="noopener"를 넣으면 새로 열린 페이지가 원본 페이지를 건드리기 어려워집니다.
그래서 tabnabbing 같은 공격 가능성을 줄이는 데 도움이 됩니다.
실무에서는 링크보안의 가장 기본적인 체크 항목으로 보는 경우가 많습니다.

3) 브라우저와 환경에 따라 차이가 있을 수 있음

요즘 브라우저는 일부 경우 target="_blank"를 상대적으로 안전하게 처리하기도 하지만, 모든 환경에서 동일하다고 보기는 어렵습니다.
그래서 명시적으로 noopener를 넣는 방식이 여전히 권장됩니다.
명확하게 설정해 두면 브라우저 동작 차이로 인한 불확실성을 줄일 수 있습니다.

5. noopener와 함께 자주 보는 관련 속성들

1) noreferrer는 어떤 역할을 하나

noreferrer는 링크를 통해 이동할 때 리퍼러 정보가 전달되지 않도록 하는 속성입니다.
즉, 어떤 페이지에서 왔는지 상대 사이트가 확인하기 어려워집니다.
보안뿐 아니라 개인정보나 유입 정보 노출을 줄이는 목적에서도 사용됩니다.

2) noopener와 noreferrer는 목적이 다름

둘 다 함께 쓰이는 경우가 많지만 기능은 다릅니다.
noopener는 window.opener 연결을 끊는 것이 핵심이고, noreferrer는 참조 정보 전달을 막는 데 더 가깝습니다.
따라서 링크보안 관점에서는 둘의 차이를 알고 선택하는 것이 좋습니다.

3) 상황에 따라 필요한 수준이 다를 수 있음

외부 사이트로 보내는 일반 링크라면 noopener를 기본으로 적용하는 편이 안전합니다.
반면 분석 도구나 제휴 트래킹처럼 리퍼러가 필요한 경우에는 noreferrer 사용 여부를 따로 검토해야 합니다.
즉, 무조건 많이 넣는 것보다 목적에 맞게 쓰는 것이 중요합니다.

6. 실제로 어떤 경우에 점검이 필요할까

1) 블로그나 콘텐츠 사이트

외부 자료를 소개하거나 참고 링크를 자주 거는 블로그는 target="_blank" 사용이 많습니다.
이때 noopener가 빠져 있으면 링크보안 점검 대상이 됩니다.
특히 여러 작성자가 함께 운영하는 사이트라면 실수로 빠질 가능성이 있습니다.

2) 쇼핑몰과 랜딩 페이지

상품 상세페이지에서 비교 사이트, 후기 페이지, 결제 관련 외부 페이지로 이동시키는 경우도 있습니다.
이런 경우 사용자의 이탈을 줄이기 위해 새 탭을 열기도 하지만, 동시에 보안 설정도 함께 확인해야 합니다.
외부 제휴 링크가 많은 구조라면 더 살펴볼 필요가 있습니다.

3) 사내 서비스나 관리자 페이지

외부 문서, 도움말, 고객지원 페이지를 새 탭으로 여는 업무 시스템도 많습니다.
내부 도구라고 해서 항상 안전한 것은 아니며, 외부 콘텐츠가 섞이기 시작하면 window.opener 관련 위험도 고려해야 합니다.
기본 설정을 정리해 두면 이후 프로젝트에도 같은 기준을 적용하기 쉽습니다.

7. 점검할 때 함께 보면 좋은 기준과 마무리

1) 단순히 코드 한 줄보다 전체 링크 구조를 보는 것이 중요

noopener는 간단해 보이지만, 실제로는 사이트 전체의 링크 습관과 연결됩니다.
새 탭을 여는 모든 외부 링크에 일관되게 적용하는지, 예외가 있는지 살펴보는 것이 좋습니다.
또한 브라우저에서 실제로 window.opener가 어떻게 동작하는지도 확인해 두면 도움이 됩니다.

2) 기본 보안 상태를 빠르게 확인하는 도구가 유용한 이유

개발자라 하더라도 매번 모든 링크를 수동으로 추적하기는 어렵습니다.
이럴 때 URL만 넣고 기본 보안 상태를 빠르게 확인하는 방식이 도움이 될 수 있습니다.
예를 들어 HTTPS, 보안 헤더, 쿠키 설정뿐 아니라, 링크보안처럼 실제 사고와 이어질 수 있는 항목을 함께 보는 식입니다.

3) window.opener 공격을 막는 출발점은 기본 설정 정리

정리하면 window.opener 공격과 tabnabbing을 막기 위해서는 target="_blank" 링크에 noopener를 붙이는 습관이 중요합니다.
특히 외부 사이트로 연결되는 링크가 많거나, 새 탭 열기를 자주 사용하는 사이트라면 링크보안을 한 번 점검해 볼 필요가 있습니다.
직접 전화처럼 즉각적인 상호작용이 필요한 구조가 아니라면, 새 탭 링크는 편의성을 주면서도 보안 설정을 함께 챙기는 방식이 더 균형 잡힌 선택이 될 수 있습니다.