이슈

포트폴리오 사이트를 제작하던 중 a태그를 사용하여 프로젝트의 gif를 클릭하면

해당 프로젝트의 배포 사이트로 이동하게 하는 작업중에 이슈가 발생 했다

gif를 클릭 시 새 창에서 해당 프로젝트의 사이트가 열리도록 하기 위해서

a태그의 속성인 target="_blank" 를 사용했는데,

Using target=_blank without rel=noopener noreferrer is a security risk

이런 경고 메세지가 발생했다

해당 태그

경고 메세지

원인

구글링 통해 알아 본 결과 해당 이슈의 원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라고 한다

Tabnabbing 피싱 공격이란 target="_blank"인 태그를 클릭하였을 때
새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격

예를 들어 A 사이트에서 사용자가 blank 태그를 이용해 B 사이트로 이동 후에

다시 A사이트로 돌아왔을때 실제 A페이지가 아닌 A페이지처럼 보이는 피싱 사이트로 이동하는 것이다

이슈 해결

target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용해서 문제를 해결했다

rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는

opener의 location변경과 같은 자바스크립트 요청을 거부한다고 한다

즉 A페이지의 정보를 바꾸지 못한다는 얘기다

적용 코드

사라진 경고 메세지