target="_blank"의 문제점
Intro
a태그에 target="_blank" 속성을 주는 경우 새창에서 웹 페이지가 열리게 됩니다. 하지만 이 경우 치명적인 보안의 취약점이 있습니다.
바로, 이를 활용해 도메인이 다른 임의의 사이트로 유도하는 것입니다. 이는 새로 열린 페이지에서 window.opener속성으로 기존 부모 페이지를 컨트롤하며 부모 페이지의 도메인 주소를 임의의 다른 사이트로 변경해 유도를 하게 되는 것입니다.
게다가 target="_blank"가 사용된 링크에 의해 열린 새 페이지는 기존 부모 페이지와 같은 프로세스를 통해서 실행이 됩니다. 만약 새페이지에서 높은 부하를 유발하는 JavaScript가 실행되고 있다면 기존 부모 페이지에도 그 영향을 미쳐 의도하지 않게 퍼포먼스가 떨어지는 문제가 발생할 수 있습니다.
이를 보완할 수 있는 방법으로는 rel="noreferrer", rel="noopener" 속성을 적용하는 것입니다.
1. rel="noopener"
rel="noopener"을 추가하면 새로 열린 페이지에서 window.opener을 통해 기존 부모 페이지를 참조할 수 없게됩니다. 그렇기 때문에 새로운 페이지를 여는 과정에서 기존 부모 페이지가 다른 임의의 도메인으로 바뀌는 것을 방지할 수 있습니다.
또한 새 페이지와 기존 부모페이지가 별개의 프로레스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 합니다.
그렇기 때문에 신뢰할 수 없는 페이지로 이동하는 링크를 부득이하게 만들어야할 때 사용하면 유용합니다.
2. rel="noreferrer"
rel="noreferrer"속성은rel="noopener"과 유사하게 새로 열린 페이지에서 window.opener을 통해 기존 부모 페이지를 조작할 수 없게합니다.
하지만 기능이 완벽하게 동일하지는 않습니다.rel="noreferrer"속성은 새 페이지로 이동할 때, 기존 부모페이지의 주소 등의 정보를 브라우저가 Referer:HTTP헤더로 리퍼러(referer)로서 송신하지 않도록 하는 것입니다.
3. rel="noopener noreferrer"
최신 브라우저의 대부분은 noopener를 지원하지만 그렇지 않은 경우도 있기에 두가지 속성을 함께 사용하는 것을 권장합니다.
참고자료
