a 태그에 noopener, noreferrer 사용하는 이유
블로그 HTML 소스를 보던 중 <a> 태그에 rel=”noopener”라는 속성값이 넣어져 있는 걸 발견했습니다. 처음 보는 속성값이었지만 티스토리 같은 큰 사이트에서 쓰는 건 그럴만한 이유가 있을 거야!라는 생각에 알아본 noopener, 찾다 보니 같이 알게 된 noreferrer 속성값에 대해 정리한 글입니다.
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의 악의적인 사용을 막기를 권장하고 있습니다.
피싱 시나리오 예시
- 티스토리 메인 페이지(tistory.com)에 내 블로그가 개시된다.
- 내가 악의적인 해커이기 때문에 tisstory.com이라는 도메인을 사서 티스토리와 똑같이 생긴 피싱사이트를 만든다.
- 기존 탭이 tistory.com이면, window.opener.location을 사용해 tisstory.com으로 변경한다.
- 사용자가 기존 탭으로 돌아가서 다시 로그인 하기 위해 로그인 정보를 입력하면, 악의적인 해커는 사용자의 이메일과 비밀번호를 얻을 수 있다.
참고사항
[noopener]
- noopener를 사용하면 window.opener가 기존 탭에 접근하는 걸 차단하기 때문에 window.opener가 null을 반환합니다.
- noopener를 사용하면 target의 속성값인 _self, _top, _parent도 _blank처럼 새 탭으로 열립니다.
[noreferrer]
- noreferrer를 사용하면 새 탭에서 기존 탭의 참조를 가져오는 걸 차단합니다.
- 기존 탭에 대한 참조를 차단했기 때문에, noopener처럼 window.opener가 null을 반환합니다.