교차 출처 대상 링크가 안전하지 않음

target="_blank" 속성을 사용하여 다른 사이트의 페이지에 연결하면 사이트가 성능 및 보안 문제에 노출될 수 있습니다.

  • 다른 페이지가 내 페이지와 동일한 프로세스에서 실행될 수 있습니다. 다른 페이지에서 JavaScript를 많이 실행하면 페이지 성능이 저하될 수 있습니다.
  • 다른 페이지는 window.opener 속성을 사용하여 window 객체에 액세스할 수 있습니다. 이렇게 하면 다른 페이지에서 내 페이지를 악성 URL로 리디렉션할 수 있습니다.

target="_blank" 링크에 rel="noopener" 또는 rel="noreferrer"를 추가하면 이러한 문제를 방지할 수 있습니다.

Lighthouse 교차 출처 대상 감사 실패 방법

Lighthouse에서 교차 도메인 대상의 안전하지 않은 링크에 플래그를 지정합니다.

크로스 오리진 대상으로 연결되는 안전하지 않은 링크를 보여주는 Lighthouse 감사입니다.

Lighthouse는 다음 프로세스를 사용하여 링크를 안전하지 않은 것으로 식별합니다.

  1. target="_blank" 속성은 포함하지만 rel="noopener" 또는 rel="noreferrer" 속성은 포함하지 않는 모든 <a> 태그를 수집합니다.
  2. 동일한 호스트 링크를 필터링합니다.

Lighthouse는 동일한 호스트 링크를 필터링하므로 대규모 사이트에서 작업할 때 주의해야 할 특이 사례가 있습니다. 한 페이지에 rel="noopener"를 사용하지 않고 사이트의 다른 페이지로 연결되는 target="_blank" 링크가 포함된 경우 이 감사로 인한 성능 영향은 여전히 적용됩니다. 하지만 Lighthouse 결과에는 이러한 링크가 표시되지 않습니다.

사이트 성능 개선 및 보안 취약점 방지

Lighthouse 보고서에 식별된 각 링크에 rel="noopener" 또는 rel="noreferrer"를 추가합니다. 일반적으로 target="_blank"를 사용할 때는 항상 rel="noopener" 또는 rel="noreferrer"를 추가하세요.

<a href="https://examplepetstore.com" target="_blank" rel="noopener">   Example Pet Store </a>
  • rel="noopener"는 새 페이지가 window.opener 속성에 액세스하지 못하도록 하고 별도의 프로세스에서 실행되도록 합니다.
  • rel="noreferrer"는 효과가 동일하며 Referer 헤더가 새 페이지로 전송되지 않도록 합니다.

자세한 내용은 교차 출처 리소스 안전하게 공유하기를 참고하세요.

리소스