[CSSS] noopener, noreferrer, nofollow가 뭐야??

..들어가며

Html로 하이퍼링크를 작성할 때 noopener, noreferrer, nofollow 라는 속성을 넣어줄 수 있다고 한다.

위에 속성들은 무엇이고, 언제 사용해야 하는지 알아보자.

noopener

웹사이트를 만들 때 a 태그에 target=blank 속성을 자주 넣게 되는데 이는 자칫 사이트의 성능과 보안을 취약하게 만들 수 있다고 한다.

이유는 바로 탭 내빙(Tab nabing) 이라는 피싱 공격 때문인데 JS만 있다면 *window.opener를 이용해 새롭게 연 페이지에서 기존에 원본 페이지에 직접 접근할 수 있게 된다.

noopener 속성값은 이를 방지하기 위한 녀석이다. noopener를 사용하면 원본 페이지에 대한 *컨텍스트 액세스를 허용하지 않고 새 탭에서 *최상위 브라우징 컨텍스트를 새로 생성하여 링크를 열도록 브라우저에게 명령한다.

따라서 탭 내빙에 사용되는 window.opener의 값은 null이 된다. 이는 검색 엔진 최적화(SEO)에 영향을 주지 않는데 이유는 단순히 브라우징 컨텍스트의 연결을 끊어달라는 메시지만 브라우저에게 전달하는 것이기 때문이라고 한다.

HTML의 표준이 업데이트됨에 따라 최근 크롬의 경우 88버전, 사파리의 경우 66버전부터 기본 tager=blank 속성에 noopener 속성값이 부여된다고 한다.

noreferer

noreferer은 기능적인 측면에서는 noopener와 동일하다.
하지만 noreferer은 더 나아가 추가 기능이 있는데, 바로 브라우저가 해당 페이지를 불러오면서 HTTP 요청을 보낼 때 refer 헤더를 생략하는 것이다. noreferre 설정값이 존재하다면 링크를 클릭할 때 해당 유입이 어디에서 발생하였는지에 대한 정보가 새 페이지에 제공되지 않기에 원본 페이지에 접근이 불가한 것이다.

이 또한 검색엔진최적화(SEO)에 영향을 주지 않는데 이유는 통계 분석 도구에서 noreferer의 트래픽은 추천 유입이 아닌 직접 유입으로 나타나기 때문에 해당 웹페이지의 통계 수치를 어느정도 왜곡시키는 기이한 상황이 발생한다고 한다.(솔직히 무슨 소리인지 모르겠따 ㅎㅎ;)

🤔 언제 무엇을 사용하는게 좋은가?

정답은 둘 다 사용하는게 좋다. 이유는 일부 구형 브라우저가 noreferrer을 지원하지 않기 때문이다. 고로 두 속성값 모두 적어주도록 하자.

nofollow

nofollow 속성값은 검색 엔진에게 링크된 웹사이트를 보증하거나 신뢰할 수 없으니 현재 웹사이트와 연결하지 않기를 바라는 경우에 사용된다고 한다. "이 링크는 무효화입니다!"라는 메시지를 검색엔진에게 전달하는 행위이다.

이것이 생겨난 이유는 바로 스팸 댓글 때문이라고 하는데 구글이 웹사이트를 제작할 때 이용했던 많은 알고리즘 중 PageRank 라는 것을 개발 당시에 각 블로그에 무분별하게 달린 스팸 댓글이 이 페이지 순위에 영향을 주었다고 한다.