<a href=""></a> 형식으로 외부 링크를 연결해둘 때, 보안을 위해 rel 속성의 noreferrer, noopener, nofollow 속성값을 지정하라는 지시를 쉽게 찾을 수 있다.
각 속성값이 무엇인지, 왜 설정해야 하는지, 무조건 설정하는게 맞는지 정리해보겠다.
rel
The rel attribute defines the RELationship between a linked resource and the current document.
출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
개별 속성값을 알아보기 이전에, <link>, <a>, <area>, <form>에서 사용할 수 있는 rel 속성에 대해 알아보자.
위 인용문처럼 연결된 대상과 현재 문서(Document)의 관계(Relationship)를 정의하는 속성이며, class와 유사하게 공백으로 구분된 키워드의 집합을 속성값으로 가진다.
class와 다른 점은 반드시 공식적으로 정의된 키워드를 사용해야 하며, 키워드는 HTML의 Living Standard에 정리되어 있다.
재미있는 부분은 대소문자를 구분하지 않고, 역사적인 이유로 표준은 아니지만 동의어로 취급하는 키워드가 일부 있으며, 이를 사용자 에이전트(브라우저)가 반드시(must라고 명시되어 있다.) 동일하게 취급하도록 지시하고 있다.
잘못된 키워드를 사용한다고 해서 오류가 발생하지는 않고, 유효성 검사를 수행할 경우 경고만 표시된다.
유명한 noreferrer, noopener, nofollow 외에도 수많은 키워드가 있으며, 태그 종류에 따라 적용할 수 있도록 허용된 키워드가 다르다.
모든 키워드는 아래 세가지 중 하나의 역할을 수행한다.
1. 현재 문서를 처리하기 위한 외부 리소스 정의 (External Resource)
2. 사용자가 접근 가능한 하이퍼링크 처리 (Hyperlink)
3. 하이퍼링크 처리 시 의미를 정의하는 주석 (Annotation)
대표적으로 헤더에서 사용하는 <link rel="" /> 형식에 포함되는 stylesheet, icon 등이 "1. 현재 문서를 처리하기 위한 외부 리소스 정의" 역할을 수행하며,
"2. 사용자가 접근 가능한 하이퍼링크 처리"의 경우 메타데이터와 같이 Semantic 역할을 수행하는 tag, help, next 등이 있지만 많이 사용되지는 않는다.
이 글에서 정리하려는 noreferrer, noopener, nofollow가 "3. 하이퍼링크 처리 시 의미를 정의하는 주석"의 역할을 수행하는 대표적인 키워드로, 일반적으로 <a>태그에 사용되어 외부 하이퍼링크의 처리 시 의미를 정의하도록 사용된다.
noreferrer
noreferrer 키워드는 사용자가 링크를 클릭할 때 HTTP referrer의 헤더를 숨기도록 지시하는 주석 역할을 수행한다.
사용자가 링크를 클릭하거나, 직접 새로운 웹페이지로 이동하는 경우 기본적으로 브라우저는 HTTP 요청 헤더에 현재 웹 페이지의 URL을 표시하는 참조를 전송하며, 이를 referrer라고 한다.
referrer는 HTTP 1.0 사양에서 도입되었으며, 사이트 소유자가 마케팅을 위한 정보를 일방적으로 수집할 수 있도록 설계되었다.
HTTP 요청의 헤더에 포함되므로, 원래는 다른 사이트의 리소스를 무단으로 링크해 사용하는 것을 추적할 수 있는 용도로 사용되기도 한다.
하지만 기존의 HTTP 참조 헤더에 인증 토큰, 세션 ID 등 개인정보가 포함되어 있는 상황에서 의도치 않은 페이지 이동이 일어나는 경우 이를 악용한 피싱 공격의 위험이 있으며, 해당 페이지과 관계없는 사용자의 검색 기록에 대한 정보를 악의적으로 수집할 수 있다.
noreferrer 키워드는 이 referrer를 전송하지 않음으로써 HTTP 참조 헤더에 의존하는 유형의 공격 위험을 방지하며, 사용자가 해당 링크를 통해 방문하는 웹사이트는 사용자가 어떤 웹사이트에서 왔는지 확인할 수 없다.
SEO와의 관계
말 그대로 해당 페이지에서 사용한 링크에서 다른 페이지로 이동할 경우 referrer를 제공하지 않을 뿐이므로 해당 웹페이지에 진입하는 단계의 SEO에 직접적인 영향을 미치지는 않는다.
하지만 SEO에서 웹페이지를 평가하는 항목 중 이탈률(Bounce rate)이라는 항목이 있다. 말 그대로 페이지를 탐색하고 상호작용 없이 이탈한 세션의 비율로, 해당 페이지가 검색을 통해 유입된 사용자에게 유용한 동작을 제공하는지 평가하는 지표로 사용된다.
noreferrer는 링크를 통해 이동할 때 헤더 참조를 모두 제공하지 않으므로 검색을 통해 유입된 트래픽의 출처를 추적할 수 없도록 만든다. 만약 웹페이지에 사용된 링크에 noreferrer를 과도하게 사용한다면 SEO는 해당 페이지에서 발생한 상호작용을 추적할 수 없어 해당 페이지의 이탈률을 높게 평가할 수 있으므로 주의해야 한다.
noopener
noopener 키워드는 새로 열린 창이 해당 창을 열었던 창을 참조할 수 없도록 한다.
만약 링크를 통해 접근한 웹페이지가 악성 사이트로서 기존(상위) 창에 액세스하여 사용자 세션에 액세스할 때 발생할 수 있는 크로스 사이트 스크립팅(XSS) 공격을 방지하기 위해 사용된다.
크로스 사이트 스크립팅(XSS) 공격 중 대표적인 예시가 탭 가로채기(Tabnapping) 공격이며, 이는 기존 창이나 새로 열린 창에 개인 정보 입력을 유도하고 해당 입력을 스크립트를 통해 수집하는 방식이다.
noopener 키워드는 새로 열린 페이지에서 기존 페이지에 접근하지 못하도록 하므로, 만약 링크된 페이지가 악의적인 스크립트를 포함하는 경우에도 기존 페이지에 대한 참조 공격을 수행 할 수 없도록 한다.
당연히 새로 열린 페이지에서 기존 페이지에 대한 접근만 방지하므로, SEO에 대한 영향은 사실상 없다.
nofollow
nofollow 키워드는 검색 엔진에 해당 링크를 추적하지 않도록 지시하는 주석이다.
SEO가 추적하지 않길 원하는 외부 링크, 예를 들면 광고 또는 유료 링크에 nofollow 속성을 사용할 수 있으며,
일반적으로 커뮤니티나 개인 페이지의 댓글에 포함되는 외부 사용자가 생성한 링크가 웹사이트의 검색 엔진 순위에 영향을 미치지 않도록 처리하는 역할을 수행한다.
보안과의 관계
당연히 SEO를 위한 주석이므로 웹페이지의 보안에 직접적인 영향은 미치지 않으며, 사용자가 nofollow 링크에 대한 경고를 제공하는 보안 툴을 사용할 경우 의도하지 않은 외부 페이지로의 이동이나 내부 페이지 링크로 의태한 외부 링크를 구분할 수 있도록 할 수 있다.
외부링크가 많이 포함되는 커뮤니티에서 자주 포함되는 기능인 "해당 링크는 외부 페이지로 이동합니다. 계속하시겠습니까?" 페이지가 nofollow 링크에 대해서 적용하는 일반적인 보안 기능이며, Google Search Console의 경우 웹페이지 내에 포함된 링크에 대한 nofollow 여부를 확인할 수 있는 '링크 보고서' 기능을 제공해 외부 사용자의 악의적 외부 링크를 식별할 수 있다.
마무리
즉 noreferrer, noopener, nofollow 주석 키워드는 모든 외부 링크에 대해 무의미하게 남용되지 않아야 하며, 페이지 개발자에 의해 생성되는 링크와 외부 사용자에 의해 생성되는 링크에 대해 다르게 적용되어야 한다.
개인적으로 주제의 세 키워드 외에, <link>에 사용할 수 있는 키워드 중 일부는 헤더가 아닌 <body> 내에서도 사용할 수 있다던가, <form>에서는 rel 속성이 어떻게 사용되는가 등 다양한 키워드 값에 대해서 알아볼 수 있었던 것이 도움이 많이 되었다.
안녕하세요, 제로베이스 프론트엔드스쿨 멘토입니다. 작성해주신 글 잘 읽었고, 앞으로의 더 나은 블로깅을 응원하는 마음에서 작은 의견을 남기고 갑니다 :)
감사합니다!