noopener, norenoreferrer, nofollow를 사용하는 이유

a 태그의 rel 속성 값으로 사용되는 noopener, norenoreferrer, nofollow 에 대해 알아보자

---

a 태그의 rel 속성은 html 문서와 링크된 두 문서간의 관계를 명시해준다. 이때 href 속성이 있어야 rel 속성을 사용할 수 있고 검색 엔진은 이 속성을 통해 링크에 대한 추가 정보를 얻을 수 있다.

<a href="https://www.naver.com/"
   target="_blank"
   rel="value">

rel 속성에 사용되는 value 중 noopener, norenoreferrer, nofollow 값은 <a>, <area>, <form> 요소에서 사용되는데, 이 값들은 하이퍼링크를 생성하지는 않지만 저 요소들에 의해 생성된 다른 하이퍼링크의 주석이 되기도 한다.

 

 

1. noopener

<a href="https://www.naver.com/"
   target="_blank"
   rel="noopener">

보통 하이퍼링크를 만들 때 target 속성을 지정하면 새로 열린 브라우저 탭에 이름을 지정하고 보조적인 브라우저 탭을 생성한다. 이 브라우저 탭들은 서로 통신할 수 있으며 나중에 열린 탭은 자신을 연 브라우저 탭에 대한 정보를 가진다. 이때 악의적으로 opener 브라우저 탭에 접근하면 보안상의 문제가 발생 할 수 있다.

그럴 때 noopener 값을 사용하면, 열리는 브라우저 탭은 보조 브라우저 탭이 아닌 새로운 상위 브라우저 탭으로 생성된다. 이는 하이퍼링크를 클릭해서 열린 새로운 탭의 window.opener 속성에 null 값이 주어지면서 window.opener 속성을 통한 컨트롤을 막아준다.

 

2. noreferrer

<a href="https://www.naver.com/"
   target="_blank"
   rel="noopener">

하이퍼링크를 클릭하여 다른 페이지로 이동하면 브라우저가 우리에게 HTML 문서를 보여주기 전에 웹 서버와 클라이언트 간에 요청과 응답으로 정보를 주고 받는 과정을 거친다. 이 때 HTTP 헤더는 서버와 클라이언트의 동장을 설명하는데 사용된다. HTTP 헤더의 referrer 정보에는 현재 페이지 이전의 웹 페이지 주소를 가지고 있다.(구글 애널리틱스에서 내 사이트의 방문자가 어느 채널을 통해 방문했는지 분석할 수 있는 것이 이런 정보들을 모아서 보여주기 때문)

그래서 noreferrer 값을 사용하면 referrer 헤더를 포함하지 않는다. 즉, noreferrer 값을 사용하면 사용자가 내 사이트 안의 하이퍼링크를 클릭하여 다른 사이트로 이동할 때 내 사이트의 정보가 HTTP 헤더에 포함되지 않기 때문에 그 사이트에서는 사용자가 내 사이트를 통해 방문한 것을 모르고 직접 방문했다고 인식하게 된다.

 

3. nofollow

<a href="https://www.naver.com/"
   target="_blank"
   rel="nofollow">

nofollow 속성은 링크된 페이지의 발행인에 의해 보증되지 않았거나 광고 링크 혹은 유료 게재 링크에 지정하여 검색결과 순위에 영향을 주지 않게 해준다.

다양한 검색 엔진에서는 링크를 사용하여 사이트 인지도를 확인하고 사이트 순위에 영향을 주는데, 다른 사이트에서 내 사이트 링크를 건 횟수가 많을 수록 내 사이트에 대한 검색 결과의 순위가 높아진다. 그래서 검색 엔진은 링크를 조작하는 가이드라인을 만들고 비정상적인 링크는 패널티를 받는다.

구글은 광고성 링크를 걸 때는 nofollow 키워드를 사용하여 구글 검색 크롤러가 링크를 따라가지 않도록 가이드하고 있다.

---

noopener 와 noreferrer 는 브라우저의 새탭이 열릴 때 생길 수 있는 문제를 방지하는 것이므로 a 태그에 target="_blank" 속성을 지정할 때 사용하고 nofollow 는광고성 링크를 달거나 내 사이트와 링크된 페이지를 연결 혹은 크롤링하지 않기를 바랄 때 사용한다.

 

 

참고

https://usingu.co.kr/frontend/html/rel%EC%86%8D%EC%84%B1%EC%9D%98-noopener-noreferrer-nofollow/

rel속성의 noopener, noreferrer, nofollow - HTML | UsingU