[HTML] noopener noreferrer 노오프너 노리퍼너 사용 이유 : rel="noopener noreferrer"

[HTML]
rel="noopener noreferrer"
noopener noreferrer
노오프너 노리퍼너 사용 이유

 

✅ noopener 노오프너란?
→ 링크된 페이지에서 window.opener을 사용해서 링크를 건 페이지를 참조 할 수 없게 됨
링크된 페이지와 링크를 걸어둔 페이지를 서로 다른 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어진다거나,
신뢰할 수 없는 페이지 이동의 경우에도 사용하면 좋음

✅ noreferrer 노리퍼너란?
→ 노리퍼너 코드를 작성하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 정보를 브라우저가 Referer : HTTP 헤더로 리퍼러로서 송신하지 않음

✅ noopener noreferrer 사용하는 이유 ?
→ a태그에서 target="_blank"로 새로운 페이지로 새 창 열기를 할 때 보안상의 취약한 점이 생기고, 퍼포먼스가 떨어지는 문제가 있는데, 이 2가지의 문제를 해결하기 위해서 사용함!

 

 

✅ 코드 작성

<!-- HTML 작성법 -->
<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer"> 새 창으로 열기 </a>