target="_blank" 속성을 사용하여 다른 사이트의 페이지에 연결하면 사이트를 성능 및 보안 문제에 노출할 수 있습니다.
- 다른 페이지는 내 페이지와 동일한 프로세스에서 실행될 수 있습니다. 다른 페이지에서 많은 양의 자바스크립트를 실행하면 페이지 성능이 저하될 수 있습니다.
- 다른 페이지에서는
window.opener속성을 사용하여window객체에 액세스할 수 있습니다. 이로 인해 다른 페이지에서 내 페이지를 악성 URL로 리디렉션할 수 있습니다.
target="_blank" 링크에 rel="noopener" 또는 rel="noreferrer"를 추가하면 이러한 문제를 방지할 수 있습니다.
Lighthouse 교차 출처 대상 감사 실패 이유
Lighthouse는 교차 출처 대상에 대한 안전하지 않은 링크를 신고합니다.
Lighthouse는 다음 프로세스를 사용하여 안전하지 않은 링크를 식별합니다.
rel="noopener"또는rel="noreferrer"속성이 아닌target="_blank"속성은 포함된 모든<a>태그를 수집합니다.- 동일한 호스트 링크를 필터링합니다.
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헤더가 새 페이지로 전송되지 않도록 합니다. 링크 유형 'noreferrer'를 참고하세요.
자세한 내용은 교차 출처 리소스를 안전하게 공유 게시물을 참고하세요.