새탭에서 안전하게 링크 열기: noopener와 noreferrer 속성

VS Code의 Emmet 자동완성 기능을 활용하면, a 태그에 target="_blank"를 설정할 때 자동으로 rel="noopener noreferrer"가 추가됩니다. 이 기능이 자동으로 추가되는 이유는 무엇일까요? ref 속성 rel은 "relationship"의 줄임말로, 웹 브라우저와 검색 엔진에게 현재 문서와 링크된 문서 사이의 연관 관계를 명시합니다. 일반적으로 사용자에게 직접적인 영향을 주지는 않습니다. 보안상의 이유 target="_blank"를 사용하면, 연결된 웹 페이지가 새 탭에서 열리게 됩니다. 이 과정에서 보안상 취약점이 발생할 수 있습니다. 예를 들어, 연결된 페이지가 악의적인 사람에 의해 만들어졌다면, window.opener.location을 조작해 부모 윈도우를 가짜 페이지로 리다이렉션할 가능성이 있습니다. noopener와 noreferrer noopener: 이 속성을 사용하면, 새로 열린 탭은 원본 페이지와 window.opener를 통한 스크립트 액세스를 허용하지 않습니다. 즉, window.opener의 값이 null로 설정됩니다. 이는 탭나핑(tabnapping) 공격을 방지하는 데 유용합니다. noreferrer: 이 속성은 브라우저가 새 탭을 열 때 'Referer' 헤더를 전송하지 않도록 합니다. 이를 통해 참조자 정보의 수집을 방지하게 됩니다. target="_blank"를 사용할 때는 이와 관련된 보안 취약점을 해결하기 위해 rel 속성에 noopener와 noreferrer를 추가하여 사용자에게 더 안전한 환경을 제공해보세요.