[IT] HTML - noopener, noreferrer 사용법 정리

ㅇ 먼저 링크에 noopener noreferrer 사용하는 이유는 ?

HTML에서 우리가 링크를 만들 때 <a> 태그를 사용한다 . 여기에서 href의 링크를 새창에서 열려면

target="_blank" 속상 값을 넣어준다. 이 때 보안상 취약점, 퍼포먼스 저하의 가능성이 있다는 것이다.

 

ㅇ 그렇다면 어떻게 해줘야 할까 ?

이때 추가로 작성해야하는것이 noopener(노오프너) 과 noreferrer(노리퍼러) 이다.

noopener : 링크된 페이지에서 window.opener를 사용하여 링크건 페이지를 참조할 수 없게 한다.

noreferrer : 페이지 이동할 때 기존 페이지의 정보를 (HTTP헤더로 ) 송신하지 않는다.

 

ㅇ 사용방법

 <a>요소 안에  rel=" " 속성을 이용하여 함께 작성해준다.  

rel=" noopener noreferrer"

<a href="https://www.naver.com/" target="_blank" rel="noopener noreferrer">