웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있습니다. 이 속성들은 무슨 역할을 하고 왜 사용할까요?
target=”_blank”의 보안 취약점 해결하기
링크 태그에 target="_blank" 속성을 사용할 때의 보안 문제는 악의적인 웹사이트가 탭 내빙(Tabnabbing)이라고 하는 피싱 공격을 시도할 수 있다는 것입니다.
브라우징 컨텍스트(Browsing Context)는 웹 페이지가 렌더링되어 사용자에게 표시되는 환경입니다.
보조 브라우징 컨텍스트(Auxiliary Browsing Context)는 속성 “_blank”이 지정된 링크를 클릭하거나, JavaScript가 window.open()메서드를 사용하여 새 창을 열 때 생성됩니다. 보조 브라우징 컨텍스트는 새 창이나 탭에 표시되고, 상위 브라우징 컨텍스트에 대한 접근과 같은 고유한 기능을 가지고 있습니다.
오프너 브라우징 컨텍스트(Openr Browsing Context)는 보조 브라우징 컨텍스트를 연 브라우징 컨텍스트입니다. window.opener 속성을 통해 보조 브라우징 컨텍스트에서 접근할 수 있습니다. 이 속성을 사용하면 보조 브라우징 컨텍스트가 오프너 브라우징 컨텍스트와 통신하고 해당 속성 및 메서드에 접근할 수 있습니다. 오프너 브라우징 컨텍스트는 보조 브라우징 컨텍스트를 닫거나, 다른 URL로 이동하는 등 동작을 제어할 수 있습니다.
탭 내빙은 보조 브라우징 컨텍스트와 오프너 브라우징 컨텍스트의 이런 관계때문에 가능합니다. 사용자가 속성이 “_blank”로 지정된 링크를 클릭하면, 새로운 보조 브라우징 컨텍스트에서 JavaScript를 사용하여 해당 페이지의 콘텐츠를 변경하고 신뢰할 수 있는 사이트인 것처럼 사용자에게 보여줄 수 있습니다.
❗️noreferrer 및 noopener 속성을 사용하면 이러한 위험으로부터 사용자를 보호할 수 있습니다.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>noopener
noopener 속성이 적용된 링크를 클릭하는 경우, 새 탭이나 창이 원본 페이지에 접근할 수 없도록 새로운 브라우징 컨텍스트 그룹을 생성하여 완전히 분리합니다. 새로운 브라우징 컨텍스트에 할당했기 때문에 원래 페이지의 window.opener 속성에 접근할 수 없습니다.
noreferrer
사용자가 웹 페이지의 링크를 클릭하면 브라우저는 해당 페이지를 불러오면서 HTTP 리퀘스트를 보내는데, 이 때 사용자가 링크를 클릭한 페이지의 URL(사용자의 원래 위치)를 함께 전송합니다. 이 때 URL에 사용자의 검색 쿼리 및 필터에 대한정보가 포함되어 있다면 개인정보가 노출될 수 있습니다.
noreferrer 옵션이 있으면 HTTP 리퀘스트를 전송 할 때 이 정보가 담겨있는 referer 헤더를 제외합니다. 사용자의 개인 정보를 보호하기 위해 이 속성을 사용할 수 있습니다.
nofollow와 검색 엔진 최적화 SEO
SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자로 검색 엔진 결과 페이지(SERP)에서 웹사이트의 가시성과 순위를 개선하는 방법입니다. SEO를 향상시키기 위해 키워드 및 페이지 최적화, 링크 구축 등 여러 가지 방법을 사용할 수 있습니다.
Google과 같은 검색 엔진에는 링크의 품질과 관련성을 평가하여 검색 순위에 미치는 영향을 결정하는 알고리즘이 있습니다. 웹사이트가 저품질 혹은 스팸성 사이트로 연결되는 경우 검색 엔진은 웹사이트를 신뢰할 수 없다고 판단하고 순위를 떨어트리게 됩니다. 이런 링크에 nofollow를 사용하여 검색 엔진에게 순위 알고리즘에서 링크에 가중치를 두지 않으며, 링크된 웹사이트를 보증하지 않는다는 것을 알릴 수 있습니다.
Reference
① Tabnabbing 피싱 공격의 동작 원리와 대응책 https://tech.lezhin.com/2017/06/12/tabnabbing
② Tabnabbing 피싱 공격에 대해 알아보기. (noopener, noreferrer)
https://velog.io/@sisofiy626/Tabnabbing-피싱-공격에-대해-알아보기.-noopener-noreferrer
③ 하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow https://yozm.wishket.com/magazine/detail/1586/
