<a> tag
HTML의 <a> 요소는 같은 페이지나 다른 페이지의 URL로 연결할 수 있는 하이퍼링크를 만들때 사용된다. 그렇다면 <a> 요소는 주로 어떤 상황에 사용할까?
- 같은 URL 경로에서 페이지 이동을 하는 경우
주로, 페이지에서 중요한 정보가 있는 위치로 이동하는 경우에 사용한다.- 다른 URL 경로로 페이지 이동을 하는 경우
현재 페이지에서 제공하지 않는 정보등을 링크로 제공하는 경우에 사용한다.
때문에, <a> 요소 내부에는 기본적으로 href 라는 속성이 사용된다. 해당 속성에 이동하고자 하는 목적지를 적어서 그 위치 혹은 경로로 이동하게 된다.
이때, 2번 상황에서는 몇가지 속성을 추가하여 사용할 수 있다.
target="_blank"
해당 속성은 다른 URL로 페이지 이동을 하는 경우, 새로운 탭을 열고 그 탭으로 연결된 페이지를 표시하는 경우에 사용된다.
이때, 일반적으로 함께 사용되는 속성이 rel 이다.
rel
해당 속성은 relation의 줄임말로, 링크간의 관계를 명시하는데 사용된다.
rel 속성의 여러 값들에 대해 알아보자.
norefferer
우리가 다른 페이지로 이동을 하는 경우에, HTTP 요청 헤더에 refferer 라는 것을 포함시키게 되는데, refferer 에는 현재 요청된 페이지가 어디서 링크되었는지를 나타낸다.
때문에, 보안이 취약한 웹 페이지의 경우에는 HTTP 요청 헤더에 refferer 가 보호되지 않았을 경우에 refferer 가 노출되는 일컬어 reffere leakage 가 발생할 수 있고, 이를 통해 개인 정보나 키 값등이 탈취되어 보안에 위험을 초래할 수 있다.
따라서, norefferer 값을 설정하여 refferer를 보호할 수 있다.
noopener
norefferer 와 비슷한 목적으로 사용되는데, 보안 위험을 방지하는 속성이다.
noopener 가 적용되지 않은 상태로, 우리가 페이지를 이동하게 되면, window.opener 라는 값에 이동하기 전 페이지의 경로를 담아주게되는데, 이때, 이동한 페이지에서 이전 페이지를 참조할 수 있게 된다.
noopener를 적용하지 않았을 때, window tab nabbing이라는 악의적인 공격이 발생할 수 있는데(물론, 모든 경우가 아닌 처음부터 위험한 페이지로 이동한 후에 해당 페이지에서 다른 링크를 클릭하거나 하는 경우) 해당 공격은 다른 링크로 이동할 때, 새로 열리는 페이지의 URL을 조작하여 다른 웹사이트로 이동시키게 한다. 흔히들 뉴스에서 분명 평소 사용하던 메일 서비스의 로그인 페이지 였으나 이후 계정정보가 해킹되는 사례 등이 이에 해당된다.
따라서, noopener 속성을 사용하게 되면, window.opener의 값이 null로 되어, 이동한 페이지에서 이전 페이지에 대한 참조가 불가능해지기 때문에 보안 위험을 방지할 수 있다.
nofollow
nofollow의 경우는 검색 엔진 최적화(SEO)와 관련된 속성값으로, 해당 속성을 사용하면, 검색 엔진 크롤러가 해당 페이지를 크롤링하지 못하게 한다. 보통 스팸 댓글과 같은 경우에 해당 속성을 설정하여 해당 페이지로 이동하더라도 스팸 댓글의 링크에 검색 엔진 크롤러가 동작하지 못하여 검색 엔진에 영향을 주지 않게 한다.
이와 같은 nofollow 속성은 약 18년전 스팸 댓글을 퇴치(?)하기 위해 도입되었다고 한다. 점점 웹이 진화함에 따라 검색 엔진과 관련된 몇가지 추가된 속성이 있다.
sponsored
해당 링크가 광고성 링크임을 나타내주는 속성값으로, 구글에서 2020년에 도입하였다고 한다. 이 속성값을 사용하여 검색 결과 랭킹에 해당 링크가 미치는 영향을 조절하고, 사용자에게 보다 정확한 검색 결과를 제공하는 기능을 한다.
ugc
해당 링크가 사용자가 생성한 콘텐츠(게시물, 댓글 등)임을 나타내는 속성값으로, 구글에서 2020년에 도입하였다고 한다. 이 속성값을 통해 Google 검색 엔진이 링크를 보다 정확하게 해석하여 검색 엔진 최적화에 도움이 된다고 한다.
reference
자칫하면 이해하기 어려운 개념일 수 있는데 쉽게 잘 설명해 주셨네요 :)