rel="noopener"

 

 rel="noopener"

a태그의 rel=”noopener norefeere” 무엇을 의미하는지 알아보겠습니다.

 

<a> 태그 코드 블록

워드프레스로 블로그 운영하는 분들이 많을 거라 생각됩니다.

글을 작성할 때 링크가 걸린 부분의 html 코드를 보면 a태그에 rel = “noopener” 속성 값이 설정되어 있음을 확인할 수 있습니다.

워드프레스 html모드

 <a> 태그

하나의 페이지에서 다른 페이지를 연결하기 위한 하이퍼링크를 정의할 때 사용

href 속성 필수 - 연결할 페이지의 주소 url

 

 rel

현재 문서와 링크된 문서 사이의 연관 관계

검색 엔진들이 링크에 대한 정보를 수집할 때 rel 속성을 사용할 수 있음

href 속성 값이 있어야만 사용 가능

 

 noreferrer

rel의 속성값 중 하나

사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP refere header 전송해서는 안 됨noopener

보안을 위한 속성

target = "_blank" → 새 창으로 페이지가 열림

이때 열린 창은 window.opener 속성으로 열리게 됨

이때 새로 열린 창에서 링크가 걸린 페이지의 window 객체에 부분적으로 접근할 수 있음

rel = “noonper” ⇒ window 객체에 접근할 수 없도록 막아줌

 

보안을 위해 링크된 페이지가 외부 페이지에 의한 간섭을 받지 않기 위한 장치

 

참고

TCPschool - <a> 태그의 rel 속성

3rabbiz - rel 속성