Post

a 태그에 noopener, noreferrer 사용하는 이유

블로그 HTML 소스를 보던 중 <a> 태그에 rel=”noopener”라는 속성값이 넣어져 있는 걸 발견했습니다. 처음 보는 속성값이었지만 티스토리 같은 큰 사이트에서 쓰는 건 그럴만한 이유가 있을 거야!라는 생각에 알아본 noopener, 찾다 보니 같이 알게 된 noreferrer 속성값에 대해 정리한 글입니다.

a 태그 내부의 rel="noopener" a 태그 내부의 rel=”noopener”

 

내용

<a> 태그에 noopener, noreferrer 속성값을 사용하는 이유 알아보기

 

target 속성 정리

rel에 대해 알아보기 전에 먼저 target 속성에 대해 정리해야 합니다. target 속성은 <a> 태그를 클릭했을 때 문서가 열릴 위치를 지정하는 속성값입니다. target 속성은 총 5개가 있는데, 일반적으로 쓰는 건 현재 탭에서 문서가 열리는 _self와 새 탭에서 문서가 열리는 _blank 속성입니다. 5개 속성이 뭔지 궁금하면 여기서 정리된 내용을 볼 수 있습니다.

target 속성 사용 예시

1
<a target="_self|_blank" href="연결할 페이지 URL"></a>

 

target=”_blank”의 문제점

보안에 취약할 수 있다.

target=”_blank”를 통해 새 탭을 열면 기존 탭의 참조를 반환하기 때문에, window.opener.location을 사용해 기존 탭의 URL을 변경할 수 있다고 합니다. 이런 경우 기존 탭과 똑같이 생긴 피싱 사이트로 기존 탭을 변경해 사용자의 개인정보를 빼가는 시나리오도 쉽게 생각해 볼 수 있습니다. 그렇기 때문에 MDN에서도 target=”_blank”를 사용할 때, noopener를 추가해 window.opener API의 악의적인 사용을 막기를 권장하고 있습니다.

피싱 시나리오 예시

  1. 티스토리 메인 페이지(tistory.com)에 내 블로그가 개시된다.
  2. 내가 악의적인 해커이기 때문에 tisstory.com이라는 도메인을 사서 티스토리와 똑같이 생긴 피싱사이트를 만든다.
  3. 기존 탭이 tistory.com이면, window.opener.location을 사용해 tisstory.com으로 변경한다.
  4. 사용자가 기존 탭으로 돌아가서 다시 로그인 하기 위해 로그인 정보를 입력하면, 악의적인 해커는 사용자의 이메일과 비밀번호를 얻을 수 있다.

 

참고사항

[noopener]

  • noopener를 사용하면 window.opener가 기존 탭에 접근하는 걸 차단하기 때문에 window.opener가 null을 반환합니다.
  • noopener를 사용하면 target의 속성값인 _self, _top, _parent도 _blank처럼 새 탭으로 열립니다.

[noreferrer]

  • noreferrer를 사용하면 새 탭에서 기존 탭의 참조를 가져오는 걸 차단합니다.
  • 기존 탭에 대한 참조를 차단했기 때문에, noopener처럼 window.opener가 null을 반환합니다.

 

레퍼런스

This post is licensed under CC BY 4.0 by the author.