HTML에서 a 요소의 target, rel 속성

HTML 코드에서 다음과 같은 a 요소를 마주쳤습니다.

<a href="https://reactjs.org"
   target="_blank"
   rel="noopener noreferrer"
>
   Learn React
</a>

 

a 요소 안에 href, target, rel이라는 속성이 눈에 띄는데요.

각 속성은 무슨 의도로 사용된 걸까요?

 

우선 a 요소는 하이퍼링크를 걸기 위한 태그입니다.

 

href에는 하이퍼링크 주소를 나타냅니다.

 

target에는 링크를 클릭했을 때

문서가 새 탭에서 열릴 것인지, 기존 탭에서 열릴 것인지 등

문서가 열릴 위치를 나타냅니다.

 

target 속성에 _blank를 입력하면

웹 페이지(URL)가 새 탭에서 열립니다.

<a href="https://reactjs.org"
   target="_blank"
>

 

하지만!

target="_blank"만 사용하면 
보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있습니다.
따라서 rel 속성에 noopener와 noreferrer를 지정하여 
target="_blank"를 보완합니다.

rel은 현재 문서와 링크된 문서 사이의 관계를 나타내기 위한 속성입니다.

검색 엔진이 링크에 대한 더 많은 정보를 수집하기 위해  rel을 사용합니다.
rel을 사용하려면 반드시 href 속성을 설정해야 합니다.

<a href="https://reactjs.org"
   rel="noopener noreferrer"
>
   Learn React
</a>

마지막으로, rel 속성 안에 쓰인 noopener와 noreferrer은 무슨 뜻일까요?

 

noopener는 하이퍼링크를 따라 연결된 웹 페이지에서 
DOM 트리의 진입점 역할을 하는 Document를 표시하는 

어떠한 환경(브라우징 컨텍스트, 예를 들어 탭이나 브라우저 창)도
오프너여서는 안 됨을 나타냅니다.

무슨 말인지 모르겠죠.

 

쉽게 말해서, noopener를 지정하면

링크된 페이지가 window.opener를 통해

링크를 건 페이지를 참조할 수 없게 됩니다.

또한, 링크된 페이지와 링크를 건 페이지가 별개의 프로세스로 취급되기 때문에

둘이 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 됩니다.

 

신뢰할 수 없는 페이지로 이동하는 링크를
부득이하게 만들어야 할 때 유용하게 쓸 수 있습니다.

 

noreferrer는 브라우저가 현재 요청을 보낸 페이지 주소를 알려주는
리퍼러 헤더를 전송하면 안 된다는 뜻입니다.

사용자가 어떤 링크를 타고 들어왔는지 알리면 안 될 때 쓰입니다.

 

이것저것 설명했지만 요약하자면

어떤 웹 페이지가 새 탭에서 열리게 하고 싶을 때는

a 요소 안에 href, target와 함께

rel="noopener noreferrer"를 써주세요.

 

 

 

참고 사이트

https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html