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

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

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

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

Lighthouse のクロスオリジンの宛先監査が失敗する仕組み

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

クロスオリジンのリンク先への安全でないリンクが表示されている Lighthouse の監査

Lighthouse では、次の手順でリンクを安全でないリンクとして識別します。

  1. target="_blank" 属性を含むが、rel="noopener" 属性または rel="noreferrer" 属性を含まないすべての <a> タグを収集します。
  2. 同一ホストのリンクは除外します。

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

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

関連情報