웹 사이트를 개발할 때 <a> 태그를 통해서 여러 페이지를 연결시키고 해당 페이지를 외부 링크로 보내기 위한 마크업을 할 때가 많다.
이때 연결된 페이지를 새로운 브라우징 맥락에 표시할 때 사용하는 속성이 바로 target="_blank다.
<a href="url 주소" target="_blank">흥미로운 점은 target="_blank와 함께 사용되는 rel 속성값이다.
여러 웹 사이트를 살펴보면 target="_blank 속성을 사용한 <a> 태그에 rel 속성값으로 noopener 혹은 noreferrer가 사용되는 걸 종종 볼 수 있다.
<a href="url 주소" target="_blank" rel="noopener noreferrer">target="_blank까지는 알겠는데... noopener, noreferrer 대체 어떤 역할을 하는 속성일까?
쉽게 말해, 성능과 보안을 향상시켜주는 속성이라고 생각하면 된다.
1️⃣ noopener
웹 사이트 내에 있는 링크를 클릭할 때, 해당 링크 태그에 target="_blank 속성이 있다면 성능과 보안 측면에서 취약점이 발생하게 된다.
이는 링크로 연결되어 새롭게 열린 페이지가 원본 페이지와 동일한 프로세스에서 실행될 수 있기 때문이다. 말이 어렵게 느껴질 수도 있지만, 쉽게 말해서 새롭게 열린 페이지가 자기 자신을 생성한 원본 페이지를 참조하고 있다고 이해하면 된다.
새롭게 연결된 페이지가 원본 페이지와 완전히 독립적으로 존재하는 것이 아니고, 원본 페이지와 연결되어 참조하고 있기 때문에 만약 새롭게 연결된 페이지에서 많은 기능을 동작할 경우(자바스크립트 코드가 굉장히 많을 때) 성능 저하가 원본 페이지까지 영향을 주게 되는 것이다.
더불어, 가장 큰 문제점은 보안상의 문제점이다. 새롭게 열린 페이지는 window.opener을 통해서 원본 페이지에 직접적인 접근이 가능하게 된다.
자바스크립트를 통해 충분히 원본 페이지에 직접 접근이 가능하기 때문에 이를 이용한 탭내빙이라는 피싱 공격을 받게 될 수 있다.
💡 window.opener?
window 인터페이스의 opener 속성은 현재 창을 열었던 원본 창의 참조를 반환한다. 즉, 만약 A가 B를 열었다면 B.opener을 통해서 A를 반환하게 된느 것이다.
https://developer.mozilla.org/ko/docs/Web/API/Window/opener💡 탭내빙?
window.object API를 통해서 웹 페이지에 접근하기 위해 target="_blank"와 브라우저의 기본 동작을 이용하는 취약점 공격이다.
이러한 성능의 문제, 보안상의 문제를 막기 위해서 noopener이라는 속성값이 등장하게 되었다.
rel 속성값으로 noopener을 사용하게 되면 새롭게 열린 페이지가 원본 페이지를 참조하지 않게 하며 새 탭에서 최상위 브라우징 컨텍스트로 생성하여 링크를 열도록 브라우저에게 알리게 된다.
따라서 noopener 속성값을 주게 되면 원본 페이지와의 연결이 끊기게 되어 새 페이지의 window.opener 값이 null이 된다.
즉, noopener를 통해서 브라우저에게 원본 페이지와의 연결을 끊어달라고 요청을 하게 된다.
최근 대부분의 신뢰할 수 있는 페이지에서는 해당 속성값을 지정하지 않아도 크게 문제 되지는 않지만, 그럼에도 혹여나 발생할 수 있는 문제를 미리 막기 위해서 링크를 연결할 때는 해당 속성값을 적극적으로 사용하는 것이 좋을 것 같다.
→ noopener = 원본 페이지와의 연결을 끊어줘!
2️⃣ noreferrer
noreferrer은 noopener와 매우 유사하지만 한 가지 더 추가 기능을 제공한다. 바로, referer 헤더를 생략하는 것인데 속성값 noreferrer를 사용하게 되면 브라우저가 새로운 페이지를 불러오면서 HTTP 요청을 보낼 때 referer 헤더를 생략하게 되는 것이다. referer 헤더를 생략하게 되면 링크를 클릭해서 열리게 된 새 페이지의 유입이 어디서 발생했는지 알 수가 없게 된다. 즉, 해당 페이지의 유입이 일어난 정보가 제공되지 않는 것이다.
💡 referer 헤더?
referer 헤더는 현재 요청을 보낸 페이지의 절대 혹은 부분 주소를 포함하게 된다. 즉, referer 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해준다.
쉽게 말해서, 현재 페이지에 요청한 이전 페이지의 uri 정보가 담겨있는 것이라고 생각하면 된다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Referer
→ noreferrer = 새롭게 연결된 페이지에게 원본 페이지의 정보를 제공해 주지 마!
❓ noopener vs noreferrer
사실상 noopener와 noreferrer가 거의 동일한 기능을 제공하기 때문에 어떤 것을 사용할지, 두 속성값 모두를 사용해야 하는지 고민이 될 수 있는데 두 속성값을 모두 지정해주는 것이 좋다고 한다.
단, 최신 브라우저의 경우 두 속성을 모두 지원하지만 오래된 구형 브라우저에서는 noreferrer만 지원하는 경우가 있기 때문에 어떤 것을 사용할지 고민하는 것보다는 그냥 두 속성 모두 적용하는 것이 좋다.
3️⃣ nofollow
nofollow는 위의 두 속성과는 달리, SEO(검색 엔진 최적화)에 직접적으로 영향을 미치는 속성값이다. nofollow에 대해 살펴보기 위해서는 검색 엔진 최적화 시장에서 링크들이 어떻게 작동하고 있는지 그 원리에 대해 먼저 이해할 필요가 있다.
가장 핵심이 되는 부분은, 특정 페이지가 다른 타 페이지의 인바운드 링크를 획득하게 되면 그 특정 페이지는 작은 SEO 부스트를 받게 되는 것이다.
즉, 특정 페이지가 다른 타 페이지에서 링크로서 연결이 되었다면 그 연결된 페이지가 SEO 점수를 획득하게 되는 것이다.
이 원리대로라면, 다른 페이지에서 많이 연결된 특정 페이지가 SEO 점수를 많이 획득하게 된다.
구글에서는 특정 페이지가 다른 페이지에서 많이 연결되었다면, 해당 페이지가 신뢰도도 높고 질 좋은 정보를 제공하고 있다는 것을 의미한다고 생각했기 때문에 위와 같은 원리를 이용해서 PageRank라는 지표를 만들게 되었다.
결국, 다른 페이지에서 우리 페이지가 많이 노출이 되어야 높은 SEO 점수를 받게 되는 것인데 이를 위해서 편법을 사용해 순위 부풀리기를 하는 사이트들이 많아지게 되었다.
가장 대표적인 것이 스팸 댓글인데, 페이지 내의 정보와 상관없는 코멘트를 작성하면서 본인의 웹 사이트 주소 링크를 남기는 방법이다.
이러한 방법들로 검색 순위를 높게 하는 등의 부적절한 행위가 진정한 토론 기회를 파괴하고 있다고 하여 구글에서 nofollow 링크를 도입하게 된 것이다.
<a href="url 주소" rel="nofollow">클릭하면 페이지가 열립니다!</a>rel="nofollow" 속성을 가진 링크는 페이지 랭크에 영향을 주지 않으며, SERP 순위(검색 순위) 상승에 도움을 주지도 않게 된다.
만약 블로그나 포럼 등에 스팸성 댓글이 작성되었다면 해당 댓글에 달린 링크에 nofoloow 속성값을 지정해서 해당 링크가 검색 엔진에서 제외될 수 있도록 설정을 하게 되는 것이다.
즉, 무분별하게 달린 신뢰성이 떨어진 링크가 검색 엔진에 제외되어 순위에 영향을 미치지 않도록 하는 것이다.
따라서, 사용자 참여가 많은 사이트나 댓글 등의 소통이 주된 사이트의 경우에는 무분별한 스팸성 댓글과 링크가 달리는 것을 방지하기 위해서 nofoloow을 많이 사용한다.
✅ 참고 사이트
https://webruden.tistory.com/262
https://yozm.wishket.com/magazine/detail/1586/
https://www.freecodecamp.org/korean/news/how-to-use-html-to-open-link-in-new-tab/
