왜'noopener'를 쓰세요?안전 구멍을 조심해라.

TLDR:
여기에서 구현 예제를 확인합니다.
Live Demo

저희 사이트의 새 탭에서 URL을 열어보도록 하겠습니다.

HTML 방식

<a href="https://malicious-domain.netlify.com" target="_blank">Visit Malicious Website!</a>

네, 여기 href 속성이 악성 사이트를 가리키고 target 속성이 _blank을 가리키며 새 옵션 카드에서 열 수 있습니다.
사용자가 "악성 사이트 방문!"을 클릭하면상술한 코드에 근거하다.그는 새로운 라벨에서 악성 사이트로 재정의되었다.
절차가 이렇게 간단명료해 보이는데, 사용자가 여기에 어떤 안전 위험이 존재할 수 있습니까?

사용자가 페이지에서 도메인으로 리디렉션됩니다.

이때 브라우저는 현재 사이트의 모든 window 변수 내용을 악성 사이트의 window.opener 변수에 추가합니다.

이것은 최대 사용자 그룹 중 하나인 크롬과 Firefox 브라우저에서 완성된 것이다.

그래서 현재 악성 사이트는 당신의 사이트 창을 방문할 수 있습니다. 이것은 분명히 이런 방법의 재정립 방향에서 안전 순환의 빈틈을 열었습니다.

현재 악성 사이트는 window을 통해 귀하의 사이트의 window.opener 변수를 방문하면 이전의 사이트를 새로운 낚시 사이트로 다시 정할 수 있습니다. 이 사이트는 귀하가 개설한 실제 사이트와 비슷해 보일 수도 있고 심지어 다시 로그인을 요구할 수도 있습니다.

아래 코드만 작성하면 악성 사이트에서 상술한 변경 사항을 완성할 수 있습니다

  if (window.opener) {
    window.opener.location = 'https://www.dhilipkmr.dev';
  }

, 따라서 무고한 사용자는 이 함정에 빠지고 공격자에게 노출될 수 있는 로그인 상세 정보를 제공합니다.

우리는 어떻게 이런 상황을 피할 수 있습니까?

간단한 방법은 rel 표기에 noopener 속성과 <a>을 추가하는 것이다.

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">Visit Malicious Website!</a>

그것은 어떤 작용을 합니까?

rel="noopener"은 브라우저가 현재 사이트의 window 변수를 새로 열린 악성 사이트에 추가하지 않음을 나타낸다.

이로써 악성 사이트의 window.opener은 null을 그 가치로 삼았다.

따라서 사용자가 관리하지 않는 새 도메인으로 이동할 때 조심해야 합니다.
항상 a 탭이 있는 새 옵션 카드를 여는 것은 아닙니다. 어떤 경우에는javascript의 window.open()을 실행하여 열어야 합니다. 아래와 같습니다.

function openInNewTab() {
  // Some code
  window.open('https://malicious-domain.netlify.com');
}

<span class="link" onclick="openInNewTab()">Visit Malicious Website!</span>

여기에는 noopener이 언급되지 않았기 때문에 현재 사이트의 window을 악성 사이트에 전달할 수 있다.

javascript 방식!

js를 통해 새 탭을 열 때 어떻게 처리합니까?

 function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }

<span class="link" onclick="openInNewTabWithoutOpener()">Visit Malicious Website!</span>

여기 있다

우리는 window.open()을 통해 가상 옵션 카드를 열었습니다. 이 옵션 카드는 about:blank을 열 것입니다. 따라서 이것은 악성 사이트로 다시 지정되지 않았다는 것을 의미합니다.

그리고 새 탭의 opener 값을 null으로 수정했습니다.

게시물, 우리는 새로운 라벨의 URL을 악성 사이트의 URL로 수정합니다.

은 이번에 opener도null로 되어 첫 번째 사이트의 window 변수를 방문할 수 없습니다.

문제가 해결되었습니다.
그러나 이런 방법은 구 버전의 사파리에서는 불가능하기 때문에 우리는 다시 한 번 문제에 부딪혔다.

Safari 문제는 어떻게 해결합니까?

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}

<span class="link" onclick="openInNewTabWithNoopener()">Visit Malicious Website!</span>

여기서 우리는 닻 표시를 시뮬레이션합니다.

우리는 <a> 태그를 만들고 필요한 속성을 분배한 다음에 click()을 실행합니다. 그 행위는 링크를 클릭하는 방식과 같습니다.

여기에 rel 속성을 추가하는 것을 잊지 마십시오.

기타 사실:

정착 라벨에 있는 CMD + LINK을 눌렀을 때 크롬, 파이어폭스, 사파리는 이 악성 사이트의 window.opener이 null이라고 생각했다

그러나, CMD + LINK에서javascript를 통해 새 옵션 카드를 처리하여 열린 요소에 브라우저는 window 변수를 추가하여 새 옵션 카드로 보냅니다.

기본적으로 새 Safari는 모든 상황에서 앵커 태그와 함께 사용할 때 window.opener을 삭제합니다. window 정보를 새 탭에 전달하려면 rel='opener'을 명확하게 지정해야 합니다.

실시간 구현 예제를 보려면 다음과 같이 하십시오.
Live Demo
누구도 너의 안전을 돌아갈 수 없다.

이 가능하다, ~할 수 있다,...
나의 Website, 그리고
이게 다야!!!