⭐ <a>태그

= 하이퍼링크를 만드는 태그
(에이태그 혹은 앵커태그라고도 읽음)

앵커(anchor) : 닻을 의미하는 영단어 - 닻을 내려서 다른 목적지와 연결하는 느낌

📌 <a>태그에 사용하는 속성

• href : 하이퍼링크가 가리키는 url
• target : href로 명시한 목적지를 어디에 띄울건지
  값 : _self / _blank
  _self : 기본값으로 현재 창에서 링크가 열린다
  _blank : 새 창에서 링크가 열리게 한다

⭐ target=”_blank”의 문제점

📌 1. 보안상 취약점이 발생

blank는 새 탭에서 링크가 열리게하는 구조
만약 해당 링크 페이지가 악의적인 의도로 만들어진 페이지라면
이 페이지의 javascript를 이용해 window.opener로
링크를 건 페이지(부모 윈도우)의 오브젝트에 접근해서
‘’window.opener.location=새로운 url”로 부모 윈도우의 url을 바꿀 수 있음

(이럴 경우 개인정보 유출을 유도하는 가짜 페이지로 리디렉션을 하는 등의 심각한 문제 가능성)

📌 2. 퍼포먼스가 떨어질 수 있다

blank로 열린 링크 페이지는 링크를 건 페이지와 같은 프로세스를 통해서 실행
링크된 페이지에서 높은 부하를 유발하는 javascript가 실행되고 있으면
링크를 건 페이지에도 영향 미침

⭐ target=”_blank” 문제점 해결 방법

📌 1. rel=”noopener”

(no opener : 오프너, 즉 오픈한 주체를 없는 취급)
이 속성과 값을 추가하면 링크된 페이지에서 window.opener를 이용해
링크를 건 페이지를 참조할 수 없게 됨
링크된 페이지와 링크를 건 페이지를 별개의 프로세스로 취급
→ 퍼포먼스 떨어지지 않음

📌 2. rel=”noreferrer”

(no referrer : 참조할 대상을 없는 취급)
이 속성과 값을 추가하면 다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를
브라우저가 referrer로서 송신하지 않아 참조할 수 없게끔 할 수 있음

📌 3. rel=”noopener noreferrer”

두 개를 공백으로 구분해 모두 작성해서 문제 발생을 차단할 수 있다.