[Issue] Using target=_blank without rel=noopener noreferrer is a security risk 이슈

gatsby 블로그 외부 링크 클릭시 새창으로 열기 위해 _blank 태그를 추가하니 경고가 나타났다.

이게 무슨 문제인가 찾아보니 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라 한다.

Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때

새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱 공격인데

 

A 페이지에서 B 링크를 새 창으로 접속하면

탭에 있는 A 페이지가 나도 모르는 새에 C 페이지로 바뀌어 있는 것이다.

 

해결 방법으로는 

target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용한다.

 

rel=”noopener noreferrer”는

rel=noopener 속성이 부여된 링크를 통해 열린 페이지에서 자바스크립트 요청을 거부한다.

쉽게 A페이지의 정보를 바꾸지 못하는 것이다.

 

<a href="https://www.my-site.com" target="_blank">My site</a>

기존 코드를 아래와 같이 변경해준다.

 

<a 
  href="https://www.my-site.com" 
  target="_blank"  
  rel="noopener noreferrer"
>
  My site
</a>