安全でないクロスオリジン宛先へのリンク

— 更新済み
Available in: English、Español、Русский、中文、한국어
Appears in: 監査のベストプラクティス
このページ内

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は同じホストのリンクを除外するため、大型のサイトで作業している場合には注意すべき事項があります。1つのページに、同一サイト上の別のページへのtarget="_blank"リンクがrel="noopener"を使用せずに含まれている場合でも、この監査のパフォーマンスに関する影響が適用されますが、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" リンクタイプ」をご覧ください。

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

リソース #

最終更新: — 記事を改善する
Return to all articles
共有する