noopener, noreferrer, nofollow이란 무엇일까?

noreferrer, noopener, nofollow은 a태그와 함께 사용되는 rel속성의 속성값들이다 우선 각각의 사용 목적이 다른데 하나하나 알아보도록 하자

noopener

우선 noreferrer에 대해 알아보자 우리가 a태그의 target의 속성값을 _blank로 주었다고 가정하자

위의 이미지와 같이 링크를 지정(어딘가에 지정했다고 가정)하고 target을 blank 속성으로 주어 새로운 탭에서 해당 링크가 열리도록 설정하였다 하지만 rel="noreferrer"을 설정하지 않는다면 새로 열린 탭에서는 이전 탭에서의 정보를 가지며 서로 통신또한 가능하다는 위험이 있다. 만약 이를 악용하여 새탭에 접근하게 된다면 심각한 보안상 위험이 생길 수 있으니 noreferrer를 통해 기존 탭의 보조 탭의 형태가 아닌 기존 탭과 같은 레벨의 새로운 탭으로 생성하여 기존의 window.opener 객체의 값을 이용하여 접근하는 방식에 값 자체를 null을 넘겨주어 통신이 불가능하게 만든다.

noreferrer

noreferrer이란 noopener과 비슷한 개념이다 nooperner과 마찬가지로 window.opener의 조작을 막을 수 있다 하지만 여기에 더해 우리가 웹 페이지를 불러올때 서버와 클라이언트 간의 http 통신을 하는데 이 곳에 referrer 이라는 정보도 함께 전송된다. 이곳에는 사용자가 어떤 사이트를 통해 해당 사이트로 왔는지에 대한 정보를 담게 되는데 이에 대한 정보를 막아 내가 어디서 해당 사이트를 접속하게 되었는지 알 수 없게 만든다.( 실제로 해당 속성을 적용하고 웹 트래픽을 분석해보면 referrer에는 direct로 들어갔다고 표시된다. )

nofollow

nofollow는 SEO(검색엔진 최적화)부분과 연관있다고 보면 될 것 같다. 구글 등 검색엔진은 내 사이트가 다른 사이트에 많이 링크 될 수록 사이트의 인지도를 확인하고 하이트의 검색결과에 영향을 주는 시스템인데 내 사이트에 만약 비정상적인 링크라고 판단되는 링크가 있다면 패널티가 부과된다. 해당 패널티를 피하기 위해 구글 검색 크롤러나 다른 크롤러가 이에 접근하지 않도록 지정해주는 속성이다.

언제 사용하면 되는걸까?

noopener, noreferrer은 언제 쓸까?

항상 사용하자 사용해서 나쁠게 없다 사용 방법은

위의 이미지처럼 둘다 같이 적어서 최신브라우저는 noopener 혹시 지원되지 않는 브라우저에서는 noferrer을 지원해준다.

nofollow는 언제 쓸까?

보통은 광고성 링크에 사용하지만 꼭 광고가 아니더라도 내 페이지와 연결되지 않기를 바라거나 크롤링 하지 않았으면 하는 링크에 쓰면 된다.