교차 출처 대상에 대한 링크는 안전하지 않습니다
Published on • Updated on
target="_blank" 속성을 사용하여 다른 사이트의 페이지에 링크하면 사이트가 성능 및 보안 문제에 노출될 수 있습니다.
- 다른 페이지가 해당 페이지와 동일한 프로세스에서 실행될 수 있습니다. 다른 페이지에서 많은 JavaScript를 실행하는 경우 페이지의 성능이 저하될 수 있습니다.
- 다른 페이지가
window.opener속성을 사용하여window객체에 액세스할 수 있습니다. 그러면 다른 페이지에서 해당 페이지를 악성 URL로 리디렉션할 수 있습니다.
rel="noopener" 또는 rel="noreferrer"를 target="_blank"에 추가하면 이러한 문제를 피할 수 있습니다.
Chromium 버전 88부터 target="_blank"를 포함한 앵커는 기본적으로 noopener 동작을 자동으로 가져옵니다. rel="noopener"의 명시적 사양은 Edge Legacy 및 Internet Explorer를 포함한 레거시 브라우저 사용자를 보호하는 데 도움을 줍니다.
Lighthouse 교차 출처 대상 감사가 실패하는 방식
Lighthouse는 교차 출처 대상에 대한 안전하지 않은 링크를 표시합니다.
Lighthouse는 다음 프로세스를 사용하여 링크를 안전하지 않은 것으로 식별합니다.
target="_blank"속성은 포함하지만rel="noopener"또는rel="noreferrer"속성은 포함하지 않는 모든<a>태그를 수집합니다.- 모든 동일 호스트 링크를 필터링합니다.
Lighthouse는 동일 호스트 링크를 걸러내기 때문에 대규모 사이트에서 작업하는 경우 주의해야 하는 경우가 있습니다. rel="noopener"를 사용하지 않고 사이트의 다른 페이지에 대한 target="_blank" 링크를 포함하는 페이지가 있는 경우, 이 감사의 성능 문제가 적용됩니다. 그러나 Lighthouse 결과에서는 이러한 링크를 볼 수 없습니다.
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
사이트 성능을 개선하고 보안 취약점을 방지하는 방법
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"를 참조하세요.
자세한 내용은 교차 출처 리소스를 안전하게 공유 게시물을 참조하세요.
리소스
Updated on • Improve article