과제를 진행하는 중 "하이퍼링크의 보안 취약점을 보완하기 위한 속성도 선언"하라는 요구사항을 받았다. a 태그에서 target을 사용을 해보면서 처음 알게된 내용이라 무슨 이슈가 있는지를 알아보고 싶었다.
MDN 문서를 보면 target 영역에 참고로 window.opener API의 악의적인 사용을 방지하는 걸 고려하라는 문구가 있다.
window.opener는 현재 창(또는 탭)을 열기 위해 사용된 원본 창을 참조한다. 만약 어떤 웹 페이지에서 새로운 팝업 창을 열었다면, 그 팝업 창은 window.opener를 통해 자신을 연 부모 창에 접근할 수 있습니다. 자식 창의 JavaScript 코드에서 window.opener를 사용하면 부모 창의 JavaScript 객체에 접근할 수 있습니다.
window.opener는 아래와 같은 상황에서 자주 사용된다.
로그인 팝업: 사용자가 팝업 창에서 로그인하면, 팝업 창은 window.opener를 사용해 부모 창에 로그인 정보를 전달하거나, 부모 창을 새로고침해 로그인 상태를 반영할 수 있다.
데이터 전송: 팝업 창에서 폼을 작성하고 제출한 후 부모 창에 결과를 표시할 수 있다.
target="_blank"를 사용하여 새로운 탭이나 창을 열 때, 새로 열린 페이지는 window.opener를 통해 원본 페이지에 접근할 수 있다. 악의적인 페이지가 window.opener를 이용하여 원본 페이지를 조작하거나, 원본 페이지를 피싱 사이트로 변경하는 등의 공격을 할 수 있습니다. 이러한 공격을 Tabnabbing이라고 한다.
해결방안
rel="noopener noreferrer" 속성을 사용해줄 수 있다.
<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>noopener: 새로 열린 페이지에서 window.opener에 접근할 수 없도록 한다. 즉, window.opener가 null이 되어 악의적인 코드가 부모 페이지에 접근할 수 없게 된다.
noreferrer: 새로 열린 페이지에 리퍼러(Referer) 정보를 전달하지 않는다. 추가적인 프라이버시 보호 기능이다.
참고자료
