최근에 보조 프로젝트를 진행하면서 </a>에 사용 된 target = '_ blank'속성에 대해 궁금해 했습니다.

https://www.manjuladube.dev/target-blank-security-vulnerability 

target = '_ blank'를 지정하여 새 창에서 링크를 여는 동안 실제로 어떻게 됩니까? 

• 우리가 연결하는 페이지는 window.opener 객체를 통해 연결 페이지에 대한 액세스를 제한합니다.
• 새로 열린 페이지는 이제 window.opener.location을 일부 피싱 페이지로 변경할 수 있습니다. 이 경우 사용자는 이미 열린 페이지를 신뢰하며 이 경우 의심되지 않습니다.

공격 시나리오 예를 고려하십시오.? 

모두가 ❤️을 좋아하는 귀여운 고양이 사진으로 가짜 "피싱"페이지를 만들어 Facebook에서 공유하십시오 (_blank를 통해 링크가 열림).

예를 들어 https : //phishingwebsite/facebook.com/page.html에서 "피싱"웹 사이트를 작성하십시오. "피싱"페이지에 아래 코드를 입력하십시오.

window.opener.location = 'https://phishingwebsite/facebook.com/page.html'; 

Facebook 탭을 피싱 페이지로 리디렉션하여 사용자가 Facebook 비밀번호를 다시 입력하도록 요청하면 사용자는 더 이상 Facebook에 있지 않고 이 가짜 Facebook과 유사한 웹 페이지가 됩니다. 

이 가짜 페이지는 Facebook과 똑같이 보이고 어떤 이유로 로그 아웃 했기 때문에 로그인을 요청합니다. 

사용자는 그것에 대해 너무 많이 생각하지 않고 자신의 자격 증명을 입력하고 양식을 제출합니다.

방금 일어난 일 ?? 

이제 Facebook 계정으로 로그인하여 자격 증명을 빠르게 변경하는 것과 같은 일을 하는 사람에게 개인 자격 증명을 보냈습니다.

어떻게 이 문제를 해결할 수 있는지 봅시다? 

<a>에 noopener 값을 가진 rel 속성 추가

<a href= '/share' rel="noopener" target="_blank"/> 

예를 들어 일부 오래된 브라우저 (IE11)는 "noopener"를 지원하지 않으므로 rel에 값으로 noreferrer를 추가하십시오.

<a href= '/share' rel="noopener noreferrer" target="_blank"/> 

rel = noopener에 대한 브라우저 지원

내 게시물을 마치려면 리버스 tabnabbing에 대한 예방책으로 target = "_ blank"가 포함 된 링크에 rel = "noopener noreferrer"를 추가해야 합니다. 

이렇게 하면 Chrome과 Firefox에서 window.opener가 null이 됩니다. Safari Technology Preview 68에서 앵커의 target = "_ blank"는 기본적으로 rel = "noopener"를 의미합니다.