리액트 a태그에 target='blank'를 적용하면 생기는 에러

143:13  Error: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank

포트폴리오 사이트를 제작하던 중 a태그와 관련된 에러를 만났습니다.

a태그를 클릭하면 새창에서 해당 링크를 열리게하기 위해 적었던 target='+blank'가 문제였습니다.

 

구글링을 통해 알아본 결과 해당 이슈는 tabnabbing 피싱 공격에 위험할 수 있기 때문에 에러를 출력한다고 합니다.

 

Tabnabbing피싱 공격이란 target='_blank'인 태그를 클릭했을 경우 새롭게 열린 탭(또는 페이지)에서 기존 문서의 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술을 뜻합니다. 이는 메일이나 오픈 커뮤니티에서 쉽게 사용될 수 있다고 합니다.

 

 

해킹 시나리오

tabnabbing의 예시는 아래와 같습니다.

1. 사용자가 portfolio.doyeonism.com에 들어갑니다.

2. portfolio.doyeonism.com에서 새창에서 열리는 외부링크 하나를 클릭합니다.

3. 새 창에서 test.doyeonism.com이 열립니다.

 

이때 test.doyeonism.com에는 window.opner 속성이 존재하는데요.

자바스크립트를 이용해 opener의 location을 피싱 목적의

hacking.doyeonism.com으로 변경합니다.

 

그럼 사용자는 hacking.doyeonism.com을 portfolio.doyeonism.com로 착각하게 되어 로그인을 하거나 개인정보를 적는 등 행동을 하게되어 정보를 탈취당할 수 있게됩니다.

 

 

 

 

위와 같은 해킹 시나리오를 차단하기 위해 target="_blank" 속성을 가진 a태그에는 rel=noopener"라는 속성을 추가해줘야합니다.