target="_blank" 속성을 사용하여 다른 사이트의 페이지를 링크하는 경우
사이트를 성능 및 보안 문제에 노출할 수 있습니다.
- 다른 페이지가 내 페이지와 동일한 프로세스에서 실행될 수도 있습니다. 다른 페이지에서 많은 자바스크립트를 실행 중인 경우 페이지의 성능이 저하될 수 있습니다.
- 다른 페이지에서는
window.opener속성을 사용하여window객체에 액세스할 수 있습니다. 이로 인해 다른 페이지가 내 페이지를 악성 URL로 리디렉션할 수 있습니다.
rel="noopener" 또는 rel="noreferrer" 추가 중
이러한 문제를 target="_blank" 방지할 수 있습니다.
Lighthouse 교차 출처 대상 감사가 실패하는 경우
Lighthouse는 교차 출처 대상의 안전하지 않은 링크에 플래그를 지정합니다.
Lighthouse는 다음 프로세스를 사용하여 안전하지 않은 링크를 식별합니다.
target="_blank"속성이 포함된 모든<a>태그를 수집합니다.rel="noopener"또는rel="noreferrer"속성은 제외하세요.- 동일한 호스트 링크를 필터링합니다.
Lighthouse는 동일한 호스트 링크를 필터링하기 때문에
대규모 사이트에서 작업하는 경우 알아야 하는 예외적인 케이스가 있습니다.
한 페이지에 rel="noopener"를 사용하지 않고 사이트의 다른 페이지로 연결되는 target="_blank" 링크가 포함된 경우
이 감사가 성능에 미치는 영향은 계속 적용됩니다.
Lighthouse 결과에는 이러한 링크가 표시되지 않습니다.
사이트 성능을 개선하고 보안 취약점을 방지하는 방법
rel="noopener" 또는 rel="noreferrer" 추가
Lighthouse 보고서에 표시된
각 링크에 적용됩니다
일반적으로 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헤더가 새 페이지로 전송되지 않습니다 링크 유형 'noreferrer'를 참고하세요.
교차 출처 리소스를 안전하게 공유를 참조하세요. 참조하세요.