noreferrer, noopener, nofollow

noopener, noopener

 

하이퍼링크 해당 앵커 태그에 target="_blank"을 자주 쓸 때가 있다. 하지만 이는 성능과 보안면에서 취약점이 발생한다.

새롭게 열린 페이지는 보조 브라우징 컨텍스트이기 때문에 , 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있기 때문에 원본 페이지와 동일한 프로세스에서 실행될 수 있다. 

 

- 보안상 취약하다.

링크된 페이지의 javascript에서 window.opener API를 통해 부모 윈도우를 참조하거나 window.opener.location의 값을 변경하여 부모 윈도우의 URL을 변경할 수 있다. 이렇게 부모 윈도우를 피싱 페이지로 변경하여 사용자의 개인 정보가 유출될 수 있기 때문에 보안상의 문제가 발생할 수 있다.

 

- 성능이 저하된다.

 링크된 페이지는 부모 윈도우와 같은 프로세서에서 실행되기 때문에 링크된 페이지에서 높은 부하를 일으킨다면 부모 윈도우에 영향을 미쳐 성능이 저하될 수 있다.

 

noopener속성값은 이를 막기 위해 등장했다. noopener를 적용하면 원본 페이지에 대한 컨텍스트 액서스를 제공하지 않고 새 탭에서 최상위 브라우징 컨텍스트를 새로 생성하여 링크를 열도록 브라우저에게 지시한다. 따라서 새 페이지에서의 window.opener의 값은 null이 된다. 단순히 브라우징 컨텍스트의 연결을 끊어달라고 브라우저에게 말하는 것이기 때문에, 검색엔진최적화(SEO)에는 영향을 미치지 않는다.

 

noreferrer는 noopener의 기능과 동일하게 새로 열린 사이트가 window.opener객체에 접근하는 것을 방지하는 역할을 한다. noreferrer에는 추가 기능이 포함되어 있는데, 브라우저가 해당 페이지를 불러오면서 HTTP요청을 보낼 때 referer헤더를 생략하는 것이다. 즉, noreferrer 설정값이 있으면 링크를 클릭할 때 해당 유입이 어디에서 발생되었는지에 대한 정보가 새 페이지에 제공되지 않는다. 

 

그렇다면 언제 noreferrer 를 사용해야 하고 언제 noopener 를 사용해야 할까요? 일반적으로는 둘 다 사용하는 것이 좋다. 대부분의 최신 브라우저는 두 속성 모두를 지원하지만 일부 구형 브라우저의 경우에는 noreferrer 만 지원하는 경우가 있기 때문에 일반적으로는 두 속성값을 모두 적어주어야 한다.

 

nofollow

 

nofollow 속성값은 검색 엔진에게 링크된 웹사이트를 보증하거나 신뢰할 수 없으니 현재 웹사이트와 연결하지 않기를 바라는 경우에 사용한다. 댓글이나 포럼처럼 사용자 참여 콘텐츠의 링크에 적합하다. 웹사이트의 SEO에 영향을 미칠 수도 있다.

 

검색 엔진 최적화(SEO)로 검색 결과 상위에 노출되는 방법

nofollow가 도입된 배경에서 말한 인위적으로 검색 순위를 높이는 방법을 사용하지 않고 웹 페이지가 검색 결과 상위에 노출되기 위해서는 검색 엔진에 최적화(SEO) 된 문서를 작성하는 것이다. 검색 엔진 최적화를 할 수 있는 방법은 다음과 같다.

1. • 문법에 맞는 HTML 작성하기 - Semantic tag 사용
   • 페이지 제목 명확하고 간결하게 작성하기
   • 메타 태그 활용하기 - keywords, description 작성
   • 이미지에 alt 속성 기재
   • 이미지 맵에 중요한 링크 사용 피하기
   • 플래시 전용 페이지 피하기
   • anchor 태그를 활용하여 적절한 키워드 배치하기
   • 시리즈로 된 콘텐츠 검색 최적화
   • 모든 페이지에서 메인 페이지로 이동할 수 있는 링크 작성
   • HTTPS 사용 권장