[HTML] noopener noreferrer란?

 

 

오늘은 noopener / noreferrer에 대해 알아보자

 

 

 

우선 noopenner와 noreferrer에 대해 살펴보기 전에 

 

a 태그의 target 속성을 살펴봐야 한다.

 

[ target ]

a 태그의 속성 중에는 target이라는 속성이 있다. 

 

Value	Description
target = "_self "	연결할 페이지의 URL 클릭 시 현재의 탭에서 연결
target = "_blank "	연결할 페이지의 URL 클릭 시 새 탭에서 연결

즉, target은 "href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?"를 지정하기 위한 속성이다.

 

• target = "_self "

_self의 경우 연결한 웹 페이지를 현재의 탭에서 연다. 

_self는 기본 설정이므로 target 속성을 생략하더라도 같은 동작을 수행한다. (기본값)

 

 

• target = "_blank "

_blank의 경우 연결한 웹 페이지를 새로운 탭에서 연다.

 

 

[ target = "_blank "의 문제점 ]

1. 보얀상 취약점을 발생시킨다.

 

target = "_blank "가 사용된 링크를 사용자가 클릭하면 새 탭에서 링크된 페이지가 열린다. 

이때 이 링크된 페이지가 악의를 가진 사람이 만든 것이고, 이 페이지의 Javascript에서 window.opener로

부모 윈도(링크를 건 페이지)의 object에 접근해서 "window.opener.location = 새로운 URL"로 부모 윈도의 URL을 바꾼다고 생각해 보자.

 

즉, 부모 윈도의 정보를 마음대로 사용하거나 조작할 수 있다는 소리다. 

개인정보 유출을 유도하는 가짜 페이지로 부적절한 redirection을 하는 등의 보안상 심각한 문제가 발생할 수 있다.

 

2. 퍼포먼스가 떨어진다.

 

target = "_blank "가 사용된 링크에 의해 열린 페이지는 링크를 건 페이지와 같은 프로세스를 통해 실행된다. 

그렇기에 링크된 페이지에서 높은 부하를 유발하는 Javascript가 실행되고 있으면 링크를 건 페이지에도 영향을 미쳐 의도하지 않게 퍼포먼스가 떨어질 수 있다.

 

이런 문제점을 해결하고자 나온 방법이 rel에 noopener와 noreferrer 속성을 지정하는 것이다.

 

 

---

[ rel 이란? ]

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

 

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

---

 

[ rel = "noopener" ]

 

noopener는 링크를 클릭하면 브라우저 콘텍스트 액세스 권한 없이 새 탭에서 링크가 열린다. 

이는 새 창에서 window.opener 속성이 null 값을 반환하는 것과 같다.

더불어 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 된다.

 

즉, 신뢰할 수 없는 링크를 열 때 특히 유용하다.

 

 

[ 역할 ] 

 

• window.opener 속성을 통한 컨트롤을 막아준다.

window.opener는 자신을 열어준 기존 창의 window 객체를 참조하여 페이지에 접근할 수 있도록 해준다. 이때 접근하는 사용자가 기존 창의 페이지에 조작을 할 수 있다는 위험이 있다.

 

즉, 하이퍼링크를 따라 연결되는 어떠한 브라우징 콘텍스트(browsing context)도 오프너(opener)여서는 안됨을 나타낸다.

 

 

[ 사용 방법 ]

 

<a href = "연결할 페이지의 URL" target = "_blank" rel ="noopener" > URL </a>

 

 

---

 

[ rel = "noreferrer" ]

HTTP 프로토콜에는 referrer라는 헤더값이 있다.

이는 이 페이지를 요청한 이전 페이지가 무엇인지를 알려주는 정보로, 링크를 이동할 때 브라우저가 웹 서버에게 전송한다.

 

noreferrer은 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP referer header를 전송해서는 안됨을 나타낸다. 

 

즉, 하이퍼링크로 이동할 때 referrer 헤더를 생략하고 참조자 정보를 누출하지 않게 막는다.

 

 

[ 사용 방법 ]

 

<a href = "연결할 페이지의 URL" target = "_blank" rel ="noreferrer" > URL </a>

 

---

 

정리하면 target="_blank"는 보안상 취약점이 발생하고 퍼포먼스가 저하되는 2가지 문제가 있다. 

 

이 문제를 해결하기 위해서 noopenner과 noreferrer를 지정해야 한다. 

 

웬만한 웹사이트 혹은 웹사이트 제작 플랫폼에서는 target = "_blank"를 사용하면

자동으로 rel = "noopenner noreferrer"가 붙는다고 한다.

 

그만큼 필수 요소라는 증거이다.

 

 

target = "_blank"를 사용할 때는

 

<a href = "연결할 페이지의 URL" target = "_blank" rel ="noopener noreferrer" > URL </a>

 

위의 코드처럼 rel ="noopener noreferrer"를 생활화하자.

 

 

ref: https://webruden.tistory.com/262