[HTML] <a>태그 rel속성 noreferrer , noopener, nofollow 에 대해 알아보기

 

noreferrer , noopener, nofollow 속성 이란?

 

 

 

해당 속성들은 HTML의 링크(<a> 태그)에 사용되는 속성이다.

noreferrer, noopener, nofollow 속성에 대해 사용목적과 보안이슈, SEO관련 이슈에 대해 정리해 보았다. 

 

 

 

1. noreferrer 속성

사용목적	보안이슈
1. 이 속성은 링크를 클릭했을 때 브라우저가 참조(refer) 정보를 전송하지 않도록 한다. 2. 다른 사이트로 이동하는 링크를 클릭할 때, 브라우저는 일반적으로 이전 페이지의 URL을 참조 정보로 전송한다. 이를 방지하기 위해 noreferrer 속성을 사용한다.	1. referer 정보 노출은 개인정보 노출, 권한 상승 공격 등의 보안 이슈로 이어질 수 있다. 예를 들어, 이전 페이지 URL에 접근 권한이 없는 사용자가 링크를 클릭하면 참조 정보를 통해 이전 페이지의 URL이 노출될 수 있다.

 

2. noopener 속성

사용목적	보안 이슈
1. 이 속성은 링크를 클릭했을 때 새 탭이나 새 창에서 열린 페이지가 원래 페이지의 JavaScript 동작에 액세스할 수 없도록 한다. 이렇게 하면 링크를 클릭한 사용자가 새 탭이나 새 창에서 열린 페이지의 JavaScript로부터 개인정보가 유출되는 것을 방지할 수 있다.	1. 다른 도메인에서 열린 페이지의 JavaScript가 원래 페이지에 접근하여 개인정보를 탈취하거나 사이트 위조 공격을 시도할 수 있다. noopener 속성을 사용하면 이러한 보안 이슈를 방지할 수 있다.

 

 

 

 

 

 

3. nofollow 속성

사용목적

SEO 관련 이슈

1. HTML 링크 태그의 속성 중 하나로, 검색 엔진 크롤러에게 해당 링크를 따라가지 않도록 지시하는 역할을한다.  2. 검색 엔진 스팸 방지 3. 검색 엔진 순위 관리 4. 사용자 경험 개선 * 백링크란?  다른 웹 페이지로부터 해당 웹 페이지로 연결되는 링크를 의미

[2. 검색 엔진 스팸 방지 설명] 1. 검색 엔진은 웹 페이지의 링크 구조를 분석하여 페이지의 신뢰도와 중요도를 결정하는 데 사용한다. 2. 일부 웹 사이트 소유자들은 검색 엔진의 알고리즘을 속이기 위해 링크 스팸링(link spamming) 기법을 사용할 수 있다. 이는 무분별하게 링크를 게시하거나, 낮은 품질의 웹 사이트로 연결하는 것을 의미한다. 3.nofollow 속성을 사용하면 검색 엔진이 이러한 링크를 무시하도록 지시할 수 있다. [3. 검색 엔진 순위 관리 설명] 1. 많은 웹 사이트 소유자들은 검색 엔진에서의 웹 페이지의 순위를 향상시키기 위해 다른 웹 사이트로부터 많은 백링크(backlink)를 받으려고 노력한다.  2. 그러나 모든 백링크가 신뢰할 수 있는 웹 사이트로부터 오는 것은 아니며, 백링크의 품질과 신뢰성은 중요하다. 3. 웹 사이트 소유자는 nofollow 속성을 사용하여 백링크를 조정하고, 특정 링크를 백링크로 간주하지 않거나 검색 엔진의 신뢰도와 중요도에 영향을 미치지 않도록 할 수 있습니다. [4. 사용자 경험 개선 설명] 1. nofollow 속성을 사용하여 일부 링크를 제어할 수 있다. 예를 들어, 웹 사이트에서 광고 링크를 게시하는 경우 광고 링크에 nofollow 속성을 추가하면 사용자가 광고를 클릭하더라도 해당 광고로 인한 검색 엔진의 영향을 최소화할 수 있다. 또한, 외부 링크가 많은 웹 페이지에서 nofollow 속성을 사용하면 사용자가 웹 페이지를 떠나는 것을 방지하여 사용자 경험을 개선할 수 있다.

 

 

 

 

 

---

<참고사이트>

 

https://www.contentkingapp.com/academy/nofollow/

The nofollow link (rel=nofollow) attribute explained

 

https://blog.coderifleman.com/2017/05/30/tabnabbing_attack_and_noopener/

Tabnabbing 공격과 rel=noopener 속성

https://webruden.tistory.com/262

[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)

https://velog.io/@mangozoo20/HTML-a-%ED%83%9C%EA%B7%B8%EC%9D%98-targetblank-%EC%86%8D%EC%84%B1-%EB%B3%B4%EC%95%88-%EC%B7%A8%EC%95%BD%EC%A0%90

[HTML] a 태그의 target="_blank" 속성 보안 취약점

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

<a> - HTML: Hypertext Markup Language | MDN