target="_blank"
属性を使用して別のサイトのページにリンクすると、
パフォーマンスやセキュリティの問題にさらされる可能性があります。
- 他のページは、ニュース メディアのページと同じプロセスで実行される場合があります。 他のページで JavaScript が多用されている場合は ページのパフォーマンスが 低下する可能性があります
- もう一方のページは、
window.opener
プロパティを使用してwindow
オブジェクトにアクセスできます。 これにより、他のページから悪意のある URL にページがリダイレクトされる可能性があります。
rel="noopener"
または rel="noreferrer"
を追加する
を target="_blank"
リンクに追加すると、これらの問題を回避できます。
Lighthouse のクロスオリジン デスティネーション監査が失敗する仕組み
Lighthouse では、クロスオリジンのリンク先への安全でないリンクが報告されます。
![クロスオリジンのリンク先への安全でないリンクを示す Lighthouse 監査](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=4&hl=ja)
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」をご覧ください。
クロスオリジン リソースを安全に共有するをご覧ください。 投稿してください。