HTML a 태그의 링크에 noopener noreferrer를 사용하는 이유
안녕하세요 개발하며 달리는 쿼카입니다.
프론트엔드 개발을 하게되면 a 태그를 이용한 링크에 rel="noopener noreferrer" 같은 값을 주도록 가이드하는데요 각각의 역할은 무엇이고 왜 작성을 해야하는건지 알아봅시다.
우리는 HTML 코드에서 링크를 생성하고자 할 때 a 요소를 사용합니다. 그리고 a 요소의 href 속성에 명시된 웹 페이지(URL)을 새탭에서 열게 할 경우에는 target="_blank"라는 속성을 추가합니다. 그런데 여기에서 target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 수 있다고 합니다!
target 속성의 값
그 전에 target 속성에 어떤 값들을 지정할 수 있는지 먼저 알아보겠습니다. target은 href 속성에 들어갈 URL에 해당하는 웹 페이지를 어디에서 열 것인가?를 지정하기 위한 속성으로 크게 2가지가 있습니다.
첫번째는 _self로 연결한 웹 페이지를 현재의 탭에서 엽니다. 코드는 아래처럼 작성합니다. 하지만 _self를 설정한 건 본적이 거의 없죠? 해당 값은 기본 설정값이므로 target 속성을 생략해도 위와 같이 동작하게 됩니다.
<a href="연결할 웹 페이지의 URL" target="_self">현재의 탭에서 보기</a>
두번째로 _blank는 연결한 웹 페이지를 새로운 탭에서 엽니다. 코드는 아래처럼 작성합니다.
<a href="연결할 웹 페이지의 URL" target="_blank">새 탭에서 보기</a>
target="_blank"의 문제점
1. 보안상의 취약점
target="_blank"가 사용된 링크를 사용자가 클릭하면 새 탭에서 링크된 페이지가 열립니다. 하지만 만약 이 링크된 페이지가 악의를 가진 사람이 만든 링크이고, 이 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크를 건 페이지)의 오브젝트에 접근해서 window.opener.location = 새로운 URL로 부모 윈도우의 URL을 바꿔친다고 생각해봅시다.
이렇게 부모 윈도우의 정보를 마음대로 사용하거나 조작한다면 어떤 일이 벌어질까요? 개인정보 유출을 유도하는 가짜 피싱페이지로 부적절한 리다이렉션을 하는 등 보안상의 매우 심각한 문제가 발생할 수 있습니다.
2. 퍼포먼스가 떨어질 수 있다.
target="_blank"가 사용된 링크에 의해 열린 링크된 페이지는 링크를 건 페이지와 같은 프로세스를 통해서 실행됩니다. 그러므로 링크된 페이지에서 높은 부하를 유발하는 JavaScript가 실행되고 있다면 링크를 건 페이지에서도 그 영향이 미쳐져서 의도치 않게 해당 사이트의 퍼포먼스가 떨어지는 문제가 발생할 수 있습니다.
target="_blank" 문제점 해결 방법
1. noopener 지정
noopener(노 오프너)를 지정하게 되면, 링크된 페이지에서 window.opener를 사용해서 링크를 건 페이지를 참조(reference)할 수 없게 도비니다. 또한, 링크된 페이지와 링크를 건 페이지는 별개의 프로세스 취급이 되어 서로 연결되면서 퍼포먼스가 떨어지는 일도 없게 됩니다. 이는 신뢰할 수 없는 페이지로 이동하는 링크를 부득이하게 만들어야하는 경우에 매우 유용합니다.
2. noreferrer 지정
noreferrer(노 리퍼러)를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤러로 리퍼러(referer 혹은 referrer)로 송신하지 않습니다.
3. noopener와 noreferrer 코드 작성
위의 설정을 아래와 같이 적용합니다. rel 속성은 링크된 페이지(href="연결할 웹 페이지의 URL")와의 관계(Relationship)를 나타냅니다. 그리고 공백을 통해 값을 구분해서 관계 목록을 나열해서 지정할 수 있습니다.
<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>
마무리
지금까지 target="_blank"의 문제점과 그 해결방법에 대해 소개해보았습니다.
정리하자면 target="_blank"를 사용하게되면 보안상의 취약점이 발생하고, 퍼포먼스의 저하가 될 수 있다는 2가지 문제점이 있었고, 이 문제를 해결하기 위해서는 noopener와 noreferrer를 지정해야한다는 것입니다.
Workpress 같은 유명 블로그 제작 플랫폼에서는 target="_blank"에 자동으로 rel="noopener noreferrer"가 붙은다고 합니다. 그만큼 해당 코드가 일반화되어있고, 이제는 필수적 요소라는 것을 보여주는 증거입니다.
해당 글을 읽고 a 태그를 사용한 링크에 noopener와 noreferrer를 사용하는 이유에 대한 궁금증이 풀렸으면 좋겠습니다.