부트캠프에서 하는 개인 미션 프로젝트 중에, "target="_blank"를 사용해서 새로운 탭으로 접근 할 시 보안상에 문제가 없도록 마크업 하시오" 라는 문구가 있었는데, 생전 처음듣는 말이라 한참 찾아보다가 관련 정보를 블로그로 남기면 좋을 것 같아 포스팅 해본다.

rel 속성

rel속성은 현재 HTML 문서와 링크된 두 문서간의 관계를 명시할 때 사용된다. href 속성이 있어야만 rel 속성을 사용할 수 있고, 검색엔진은 이 속성을 이용하여 링크에 대한 추가 정보를 얻을 수 있다.

이 rel 속성의 value로 noreferrer, noopener, nofollow을 쓸 수 있다.

noopener

이름이 붙어있어서 누프너라고 읽었었는데 no opener라고 읽으면 된다.

하이퍼링크(a태그)를 만들면서 target 속성을 지정하면 새롭게 열린 브라우징 맥락에 이름을 지정하고 보조적인 브라우징 맥락(browsing context)을 생성한다. 이렇게 열린 브라우징 맥락 간에 서로 통신할 수 있으며 브라우징 맥락은 자신을 연 브라우징 맥락에 대한 정보를 가지게 된다. 여기서 만약 악의적으로 opener 브라우징 맥락에 접근한다면 보안상의 문제가 발생 할 수 있다고 한다.

따라서 target="_blank" 속성이 적용된 링크를 열 때, 새롭게 열린 페이지에서 원본 페이지(window.opener)의 컨텍스트에 접근이 가능해지는 것이다. (2023/04/03 피드백 수정)

<a  href= "..." rel = "noopener" target="_blank">

noreferrer

noreferrer 키워드를 사용하면 사용자가 내 페이지의 하이퍼링크를 클릭하여 다른 사이트 페이지로 이동할 때 내 사이트에 대한 정보가 HTTP 헤더에 포함되지 않기 때문에 그 사이트에서 사용자가 내 사이트를 통해서 방문한 것을 모르고 다이렉트로 방문 했다고 인식하게 된다.

무슨 말이냐 하면, 하이퍼링크를 클릭하여 다른 페이지로 이동하면 브라우저가 우리에게 HTML 문서를 보여주기까지 웹 서버와 클라이언트 간에 요청과 응답으로 정보를 주고 받게 된다. 이 때 HTTP 헤더는 서버와 클라이언트의 동작을 설명하는데 사용된다. HTTP 헤더의 referrer 정보에는 현재 페이지 이전 웹 페이지 주소를 가지고 있다.

즉, 이용자의 예전 웹페이지 방문기록을 확인할 수 있으므로 구글 애널리틱스에서 내 사이트의 방문자가 어느 채널을 통해 방문했는지 분석할 수 있는 것이 이런 정보들을 모아서 보여 준다고 생각하면 된다.

이러한 것들을 원치 않다면 no referrer을 사용하여 HTTP referrer 헤더를 생략할 수 있다. 헤더를 생략하게 되면 요청을 받는 쪽에서는 해당 요청이 어디에서 왔는지 알 수 없으므로, 이용자의 방문기록을 체크할 수 없다.

SEO에는 직접적인 영향을 끼치지 않지만, direct traffic으로 판단되어 분선 및 추적 소프트웨어 수치를 왜곡 시킬 수 있다고 한다.

noopener의 기능에서 헤더를 생략하는 버전이 noreferrer이라고 생각하면 된다.
(2023/04/03 피드백 수정)

<a  href= "..." rel = "noreferrer">

nofollow

구글 등 검색 엔진에서는 링크를 사용하여 사이트 인지도를 확인하고 사이트 순위에 영향을 준다. 내 사이트를 다른 사이트에서 링크를 건 횟수가 많을 수록 내 사이트에 대한 검색 결과의 순위는 높은 순위를 가지게 된다. 그래서 검색 엔진은 링크를 조작하는 가이드라인을 만들고 비정상적인 링크는 패널티를 받을 수 있다.

nofollow 키워드는 링크된 그 페이지의 원저자 또는 발행인에 의해 보증되지 않았거나 광고 링크나 유료 게재 링크에 nofollow를 지정하여 검색결과 순위에 영향을 주지 않도록 한다.

페이지에 설정되어 있는 링크에 nofollow 를 설정하면 검색엔진에게 이 링크 페이지를 전달하고싶지 않다고 알 알리는 것이다. 쉽게 말하면 검색엔진이 해당 링크 페이지를 인식하지 못하게 한다.
따라서 SEO혜택을 받지 못한다.

링크가 신뢰할 수 없는 사이트나 페이지로 어쩔 수 없이 연결되어 있는 경우(예를 들면 유료 광고 등)는 nofollow를 설정하여 링크 전달을 비활성화 하는 것이 좋다.

<a  href= "..." rel = "nofollow">

따라서

• noopener : target="_blank만 사용하면 보안에 취약하므로 꼭 같이 작성써야 함
• noreferrer: 해당 사용자의 이전 방문기록을 감추고 싶다면 써야 함
• nofollow: 광고 혹은 신뢰할 수 없는 사이트에 설정해서 링크 전달을 비활성화 해야할때 사용해야 한다. 다만 SEO에 값을 전달하지 못하므로 잘 판단하여 써야 한다.

출처:https://usingu.co.kr/frontend/html/rel%EC%86%8D%EC%84%B1%EC%9D%98-noopener-noreferrer-nofollow/