a태그의 target="_blank"와 rel="noopener noreferrer nofollow"

a href="#" target="_blank"... a태그로 페이지 이동 태그를 작성하다보면
target="_blank" 사용 시 보안상 취약점으로 인한 피싱 공격을 피하기 위해
추가해서 사용하는 태그가 있는데요. rel 속성에 대해 잘 모르는 경우가 대부분입니다.
저도 나중에 참고할겸 'rel 속성은 무얼까' 해서 찾아보고 궁금해하실 분들도 계실 것 같아 나눕니다.

rel 속성
rel 속성은 현재 html 문서와 링크된 문서 둘 사이의 관계를 명시하는데 사용합니다.
주로 <a>, <link>, <area>, <form> 태그와 함께 사용되며,
검색엔진은 이를 통해 링크에 대한 추가 정보를 파악하게 됩니다.

<a> : 하이퍼링크 태그
<a href="<https://www.example.com>" rel="nofollow">예시 링크</a>

<link> : 외부 스타일시트 연결 태그
<link rel="stylesheet" href="styles.css">

<area> : 이미지 맵 영역 정의 태그
<area href="<https://www.example.com>" rel="nofollow" shape="rect" coords="0,0,100,100" alt="예시 링크 영역">

<form> : 폼 제출 태그
<form action="./submit" method="post" rel="nofollow">...</form>

* target="_blank" 입력한 링크가 새 탭에서 열리게 만들어주는 속성인데요.
이 속성만 사용했을 경우, 기존 페이지의 referrer 정보를 a 태그 링크에게 전달할 수 있습니다.

★ referrer 정보에는
개인정보(메시지, 비밀번호 등)나 브라우징 히스토리 등이 담겨 있기 때문에
개인정보 유출의 위험이 있고, 보안 및 안전에 대한 문제가 발생할 수 있습니다.
무엇보다 탭내빙 (Tabnabbing)과 같은 공격에 노출될 수 있습니다.

※ 탭내빙 (Tabnabbing)?
사용자가 하이퍼링크를 클릭하여 새 탭으로 링크를 열고 오랫동안 비활성 상태로 두었을 때, 
비활성 상태의 탭에서 원본 페이지를 탐색할 수 있고, 그 결과 부모 탭을 다른 페이지로 변경해버리는 공격입니다.
이로 인해 사용자는 가짜 사이트를 동일한 사이트라고 인식하여 의심 없이 개인 정보를 입력하고,
공격자는 이러한 정보들을 취득하는데 성공하게 되는 것입니다.


▶ rel="noreferrer"
새 탭을 열어 내가 입력한 링크로 이동할 때, 
새 탭을 통해 연결된 링크에게 
기존 페이지의 referrer 정보를 전달하지 않도록 설정하는 속성

▶ rel="noopener"
새 탭에서 열린 링크가 기존 페이지에 접근하지 못하도록 막는 속성

▶ rel="nofollow"
원본 페이지에서 새 탭으로 열리는 링크를 따라(연결)가지 않도록 설정하는 속성


모든 링크를 nofollow로 설정하는 것은 권장하지 않습니다.
검색엔진은 이를 통해 링크 구조나 프로필이 부자연스럽다고 판단하여
SEO에 부정적인 영향을 줄 수 있고, 악성코드나 피싱과 같은 활동들을 감지하는데
어려움이 발생할 수 있어 nofollow 사용 시엔 신중하게 선택을 해야 합니다.


※ SEO(Search Engine Optimization)
검색 엔진 최적화...검색 시 내 결과물이 최상단에 노출될 수 있도록 최적화하는 방법을 말합니다.