target="_blank" 属性を使用して別のサイトのページにリンクすると、
パフォーマンスやセキュリティの問題にさらされる可能性があります。
- 他のページは、ニュース メディアのページと同じプロセスで実行される場合があります。 他のページで JavaScript が多用されている場合は ページのパフォーマンスが 低下する可能性があります
- もう一方のページは、
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」をご覧ください。
クロスオリジン リソースを安全に共有するをご覧ください。 投稿してください。