[IT]noreferrer, noopener, nofollow 무엇인가 ? - 보안이슈, SEO

[noreferrer, noopener, nofollow]
해당 속성 등을 사용하는 이유와 보안 이슈에 대해 처리하는 방법, SEO에 연관되는 방법 등에 대해 작성

웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있다.

이 속성들은 무슨 역할을 하고 왜 사용할까요?

 

---

< 보안이슈 >

ㅡ target="_blank" 의 보안 취약점 해결하기

: 링크 태그에 해당 속성을 사용하면 보안 문제가 발생한다. 악의적인 웹사이트가 피싱 공격을 시도할 수 있다는 것 !

 

< "_blank" 의 취약점이란 ? >

 먼저 브라우징 컨텍스트의 상호 관계가 있다.

ㅡ 보조 브라우징 컨텍스트 (Auxiliary Browsing Context)

"_blank" 속성이 지정된 링크를 클릭하거나, js가 window.open()메서드를 사용하여 새창을 열 때 생성된다.

보통 새 창이나 탭에 표시되고 , 상위 브라우징(원본사이트) 컨텍스트에 대한 접근과 같은 기능을 가진다 .

상위 브라우징 컨텍스트에 대한 접근과 같은 고유한 기능을 가진다 .

ㅡ 오프너 브라우징 컨텍스트 (Opener Browsing Context) 

보조브라우징 컨텍스트를 연 브라우징 컨텍스트이다. window.opener속성을 통해 조 브라우징 컨텍스트에 접근가능

보저 브라우징과 오프너 브라우징간의 컨텍스트에 통신하고 해당 속성 및 메서드에 접근 가능하다.

접근 가능성이 보안상 문제 이다.

사용자 속성이 "_blank"로 지정된 링크를 클릭하면 , 새로운 보조 브라우징 컨텍스트에서 js를 사용하여 해당 페이지의 콘텐츠를 변경하거나 신뢰할 수 있는 사이트인 것처럼 사용자에게 보여 줄 수 있다.

여기서 noreferrer , noopener 속성을 사용해서 보호 가능하다 !

 

ㅇ noopener

ㅡ 해당 속성이 적용된 링크를 클릭하면, 새 탭이나 창이 원본 페이지에 접근 할 수 없도록 한다.

브라우징 컨텍스트 그룹을 새엉하여 완전히 분리한다. window.opener속성에 접근 불가

ㅇ noreferrer

ㅡ 사용자의 개인정보 보호를 위해 사용함.

ㅡ 사용자가 웹 페이지의 링크를 클릭하면 브라우저는 해당 페이지를 불러오면서 HTTP리퀘스트를 보내는데,

HTTP리퀘스트를 전송할 때 이 정보가 담겨있는 referer헤더를 제외한다.

 

ㅇ nofollow 와 검색엔진 최적화 SEO

ㅡ SEO란 ?

검색 엔진 최적화 (Search Engine Optimization)의 약자로 웹사에트에서 검색엔진결과 페이지 순위를 개선하는 방법이다.

향상 시키기 위해 키워드 빝 페이지 최적화, 링크 구축 등 여러 가지 방법을 사용할 수 있다.

 

그런데 Google과 같은 검색 엔진에는 링크의 품질과 관련성을 평가하여 검색 순위에 미치는 영향을 결정하는 알고리즘이 있다.  이런 링크에 nofollow 를 사용하여 검색 엔진에게 순위 알고리즘에서 링크 순위를 내리고, 웹사이트를 보증하지 않는다는 것을 알릴 수 있다.