포폴 사이트에서 a태그의 링크를 새창을 열어서 구현하려고 하는 도중 만난 이슈다.

원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문이다.Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격이다.

arget=”_blank” 와 rel=”noopener noreferrer”을 같이 적용하여 문제를 해결할 수 있다. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 거부한다. 쉽게 말씀드리자면 A페이지의 정보를 바꾸지 못한다는 뜻 입이다.

따라서 아래와 같은 코드에 noopener 속성을 추가한다.

before

<a
className="black"
target="_blank"
href="<https://drive.google.com/>"
>
Catalog
</a>

after

<a
className="black"
target="_blank"
rel="noopener noreferrer"
href="<https://drive.google.com/>"
>
Catalog
</a>