rel="noopener" 속성은 target="_blank"를 사용하는 앵커 태그의 외부 링크 보안에 직접적인 영향을 주기 때문에, 웹 개발자라면 반드시 알아두어야 할 가장 중요한 HTML 속성 중 하나입니다.
target="_blank"는 클릭한 링크가 새 브라우저 탭에서 열리도록 만드는 속성입니다.
rel="noopener" 속성이 적용된 링크의 작성 예시는 다음과 같습니다.
<a href="https://www.youtube.com" rel="noopener" target="_blank"
>Link to youtube.com</a
>rel="noopener"의 작동 원리
웹사이트의 외부 링크에 target="_blank"와 함께 rel="noopener"를 추가하면, 링크된 웹사이트가 window.opener 속성을 통해 window 객체에 접근하여 내 페이지를 조작하는 것을 차단할 수 있습니다.
쉽게 말해, 연결된 페이지에 악성 코드가 포함되어 있다면, 이 코드는 window.opener라는 뒷문을 이용해 사용자의 브라우저를 하이재킹하고, 개인정보를 탈취하거나 악성코드를 설치하는 위험한 피싱 사이트로 리디렉션할 수 있습니다.
바로 이러한 이유 때문에 WordPress는 새 브라우저 탭에서 열리는 모든 외부 링크(target="_blank" 사용)에 자동으로 rel="noopener" 속성을 추가합니다. 순전히 보안상의 이유입니다.
어떤 종류의 웹사이트를 운영하든 이 속성을 사용하는 것이 장점이 단점보다 훨씬 많으므로, 저 역시 동일하게 적용할 것을 권장합니다.
rel="noopener"와 SEO
좋은 소식은, rel="noopener"는 SEO에 아무런 영향을 미치지 않는다는 점입니다.
noopener 사용 시 단점
현재까지 알려진 유일한 단점은 rel="noopener"가 Internet Explorer 11을 지원하지 않는다는 것입니다.
하지만 크게 걱정할 필요는 없습니다.
- IE11은 곧 역사 속으로 사라질 브라우저입니다(마이크로소프트도 지원을 종료하고 있습니다).
- 방문자가 IE11을 사용하더라도 링크를 클릭하는 데는 문제가 없으며,
rel="noopener"속성만 적용되지 않을 뿐입니다.
게다가 책임감 있는 웹사이트 운영자라면 어차피 어떤 사이트로 외부 링크를 걸지 신중하게 판단해야 합니다. 신뢰할 수 없는 사이트로 사용자를 보내지만 않으면, 이 보안 문제는 사실상 존재하지 않게 됩니다.
대안 1: noreferrer 사용하기
Internet Explorer 사용자가 걱정된다면, 지원되는 noreferrer 속성 값을 앵커 링크에 함께 추가하면 됩니다.
<a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank"
>Link to youtube.com</a
>"noreferrer" 속성은 HTTP 헤더에서 참조 정보(referrer)를 제거하여, 링크된 대상 웹사이트로 정보가 전달되지 않도록 차단합니다.
단, rel="noreferrer"는 웹 분석(analytics)에 영향을 줄 수 있습니다. 링크된 웹사이트는 어디서 방문자가 유입되었는지 알 수 없게 되며, 특정 제휴 계약 등에 불이익이 발생할 수도 있습니다.
따라서 이 부분은 본인의 상황에 맞게 신중하게 판단하여 적용하시기 바랍니다.
rel="noreferrer"와 SEO
많은 사람들이 오해하는 것과 달리, rel="noreferrer"는 SEO에 직접적인 영향을 미치지 않습니다. 최소한 그러한 근거는 없습니다. 다만 앞서 언급했듯이 데이터 수집·분석에는 지장을 줄 수 있으므로, 상황에 따라 간접적으로 손해를 볼 가능성은 있습니다.
noreferrer나 noopener를 SEO에 확실한 영향을 미치는 nofollow 속성과 혼동해서는 안 됩니다.
대안 2: target="_blank" 사용하지 않기
애초에 앵커 링크에 target="_blank" 속성을 사용하지 않으면, 이런 고민 자체를 하지 않아도 됩니다.
target="_blank"가 없으면 방문자가 링크를 클릭하는 즉시 내 웹사이트를 떠나 해당 링크 사이트로 이동하게 됩니다.
다만, target="_blank"를 사용하지 않으면 SEO, 특히 이탈률(bounce rate)에 부정적인 영향을 미칠 수 있다는 점에 유의하세요.
특히 튜토리얼 성격의 글이라면 더욱 권장하지 않습니다. 독자가 링크된 사이트의 다른 콘텐츠에 관심을 빼앗겨 내 사이트를 잊어버리고 끝날 수 있기 때문입니다.
"외부 링크 하나로 독자가 콘텐츠를 잊는다면 그 콘텐츠 자체가 매력적이지 못한 것 아니냐"라고 반박할 수도 있습니다. 일리 있는 지적이지만, 사람들은 원래 쉽게 주의가 산만해지며 그것이 본인에게 도움이 되지 않는 경우가 많다는 점도 고려해야 합니다.
이 주제는 흑백논리로 나눌 수 있는 문제가 아니며, 다른 의견도 충분히 열려 있습니다.
참고 자료
외부 링크의 보안 이슈에 대해 더 자세히 알아보세요.