설명

• a(앵커요소)는 href 을 통해 다른 URL로 연결할 수 있는 하이퍼 링크를 생성

• rel 속성은 연결된 URL과의 관계를 나타내는 링크 유형 목록을 작성, 스페이스로 구분.

<aside> 📌

**링크 유형 목록 Link types :**HTML에서 두 문서간의 관계를 명시

noopener

• 링크 클릭 시 브라우저 컨텍스트 권한 없이 열림
• Window.opener 속성이 null을 반환
• 신뢰할 수 없는 링크를 열 때 유용하게 사용
• Referer HTTP Header 사용

noreferrer

• 다른 페이지로 이동할 때, 브라우저가 Referer HTTP 헤더를 통해 이 페이지의 주소 혹은 다른 값을 참조자로 보내지 못하도록 함 </aside>

• target 속성은 링크한 URL을 표시할 위치를 서술

<aside> 📌

target 속성 값 : 탭, 창, <iframe> 이름이나 특정 키워드로 작성 : target을 사용하는 경우, rel=”noreferrer”을 추가하여 window.opener의 악의적 사용을 방지하라고 권고되어 있다.

• _self : URL을 현재 브라우징 맥락에 표시
• _blank : URL을 새로운 브라우징 맥락에 표시. 보통 새 탭. 브라우저 설정을 통해 새 창으로도 바꿀 수 있음.
• _parent : URL을 현재 브라우징 맥락의 부모에 표시. 부모가 없다면 _self 와 동일하게 행동
• _top : URL을 최상단 브라우징 맥락에 표시. 부모가 없다면 _self 와 동일하게 행동 </aside>

Reverse Tabbing 역탭핑

• 필요에 따라 새 탭에서 열지 않는 경우가 선호 되는 경우가 있는데 이를 역탭핑이라 함.
• 웹사이트에서 사용자가 링크를 클릭했을 때, 현재 탭에서 링크로 이동하도록 하는 것을 의미한다.
• HTML에서 링크에 target=”_blank”를 사용하지 않으면 기본적으로 현재 탭에서 링크가 열리는데, UX와 보안 관점에서 이를 선호하는 경우를 의미하는 것이다.

target=”_blank”일 때 rel=”noopener” 또는 rel=”noreferrer”속성을 사용해라

• rel=”noopener” 보안 취약점 방지
  • target=”_blank” 사용 시, window.opener 객체를 통해 부모창에 접근할 수 있다. 악의적 웹사이트는 이 기능을 악용하여 부모창의 location을 변경하거나, 스크립트를 삽입하여 사용자의 세션 데이터를 훔치는 공격(Tabnabbing, 탭납치)를 시도할 수 있다.
  • rel=”noopener” 를 추가하면 새 탭에서 원래 페이지에 접근하지 못하도록 window.opener을 null로 설정
• rel=”noreferrer” 프라이버시 보호
  • 링크를 클릭하여 다른 사이트로 이동할 때, 브라우저는 기본적으로 HTTP Referer 헤더를 통해 원래 페이지의 URL을 새 페이지에 전송
  • 사용자의 방문 경로를 노출할 위험이 있고, 민감한 정보가 포함된 URL이 전송될 수 있음
  • noopener를 암시적으로 포함