クロスオリジンのリンク先へのリンクは安全ではありません

target="_blank" 属性を使用して別のサイトのページにリンクすると、 パフォーマンスやセキュリティの問題にさらされる可能性があります。

  • 他のページは、ニュース メディアのページと同じプロセスで実行される場合があります。 他のページで JavaScript が多用されている場合は ページのパフォーマンスが 低下する可能性があります
  • もう一方のページは、window.opener プロパティを使用して window オブジェクトにアクセスできます。 これにより、他のページから悪意のある URL にページがリダイレクトされる可能性があります。

rel="noopener" または rel="noreferrer" を追加する を target="_blank" リンクに追加すると、これらの問題を回避できます。

Lighthouse のクロスオリジン デスティネーション監査が失敗する仕組み

Lighthouse では、クロスオリジンのリンク先への安全でないリンクが報告されます。

クロスオリジンのリンク先への安全でないリンクを示す Lighthouse 監査

Lighthouse では、以下の処理によってリンクが安全でないものとして識別されます。

  1. target="_blank" 属性を含む <a> タグをすべて収集する rel="noopener" 属性や rel="noreferrer" 属性には対応していません。
  2. 同一ホストのリンクを除外します。

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」をご覧ください。

クロスオリジン リソースを安全に共有するをご覧ください。 投稿してください。

リソース