[HTML] <a> 태그에 target="_blank"추가 시 생길 수 있는 보안적 취약성

target의 주의점

MDN 문서를 확인해보면 window.opener API의 악의적인 사용을 방지하는걸 고려하라고 권장하고 있습니다. 이를 막기위해 rel="noopener" 와 rel="noreferrer" 를 사용하면 됩니다.

noopener

target="_blank" 사용 시 새 창으로 브라우저를 열게 되면 새로운 창에서 연결 페이지에 부분적으로 액세스할 수 있는 보안 취약점이 생기게 됩니다. 즉, window.opener 객체를 통해 연결된 페이지에서 이전 페이지를 제어할 수 있는 권한이 주어진다는 것입니다.

하지만 rel=”noopener”를 주게되면 새로 열린 페이지에서 window.opener 객체가 존재하지 않게 됩니다.

noreferrer

noopener와 유사한 기능으로 새로 열리는 페이지가 window.opener객체를 조작하지 못하게 막습니다. 그러나 noreferrer는 다른 페이지를 탐색 할 때 브라우저가 참조 웹 페이지의 주소를 보내지 못하게 합니다.

즉, noreferrer 값은 링크를 클릭할 떄 참조자 정보를 안보이게 숨깁니다. noreferrer값이 포함된 링크를 클릭하게 되면 해당 사용자가 어디에서 왔는지 알 수 있는 방법이 없습니다.

사용법

<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer"> 새 탭에서 보기</a>

nofollow

페이지를 내부적으로 링크를 생성할 때 링크 주스를 전달하고 싶지 않을 수 있습니다. 이때 속성을 추가해주면 페이지로 전달하고 싶지 않다는 것을 검색엔진에 알립니다. 즉, 검색엔진이 해당 링크 페이지를 인식하지 않게되고 결론적으로는 SEO 혜택을 받지 못하게 됩니다.

보통 링크가 신뢰할 수 없는 사이트나 페이지로 어쩔 수 없이 연결되어 있는 경우(ex. 유료 광고 등)처럼 신뢰할 수 없는 사이트에 대한 링크로 연결 시 사용합니다.

 

 

 

 

참고

https://webruden.tistory.com/262

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

https://velog.io/@coolchaeyoung/noopener-noreferrer-nofollow