[HTML] target="_blank"와 noopener, noreferrer의 관계

Seonup·2022년 9월 1일

HTML

목록 보기

5/6

VS Code에서 emmet을 사용하면, a태그를 작성할 때 target을 _blank 로 주면 noopener 와 norefferer 을 속성값으로 가지는 rel 속성이 자동완성된다. 왜 이런 속성이 자동완성 되는 건지 알아보자.

rel 이란?

요소가 생성하는 링크의 종류를 제어하는 것으로, 현재 문서와 링크된 문서 사이의 연관 관계를 명시할 때 사용한다.

a 태그에 href 속성이 설정되어 있어야만 사용 가능함
링크에 대해 더 많은 정보를 여러 검색 엔진들에 제공하기 위해 이 속성을 사용함

속성값 종류

alterenate
author
bookmark
external
help
license
next
nofollow
noopener
noreferrer
prev
search
tag

noopener 란?

noopener는 링크를 클릭하면 브라우저 컨텍스트 액세스 권한 없이 새 탭에서 링크가 열린다. 이는 새 창에서 Window.opener 속성이 null 값을 반환하는 것과 같다. 신뢰할 수 없는 링크를 열 때 특히나 유용하다.

역할

Window.opener 속성을 통한 컨트롤을 막아줌

Window.opener는 자신을 열어준 기존 창의 window 객체를 참조하여 페이지에 접근할 수 있도록 해준다. 이때 접근하는 사용자가 기존 창의 페이지에 조작을 할 수 있다는 위험이 있다. 즉, 하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안됨을 나타낸다.

주의점

noopener 속성값은 target이 _blank 일 때 적용되는 값이기 때문에, noopener를 사용하면 a 태그가 다른 target을 가졌음에도 불구하고 새탭에서 링크를 연결할 수 있다.

norefferer 이란?

HTTP 프로토콜에 있는 referer 이라는 헤더값이 있는데 이는 이 페이지를 요청한 이전 페이지가 무엇인지를 알려주는 정보로, 링크를 이동할 때 브라우저가 웹 서버에게 전송한다. norefferer 은 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP referer header를 전송해서는 안됨을 나타낸다. 즉, 하이퍼링크로 이동할 때 referer 헤더를 생략하고 참조자 정보를 누출하지 않게 막는다.