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

公開日 更新日

翻訳先言語: English, Español, 한국어, 中文, Pусский

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

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

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

Chromiumバージョン88の時点では、target="_blank"のアンカーはデフォルトで自動的にnoopenerの動作を取得します。明示的にrel="noopener"を指定することで、Edge LegacyやInternet Explorerなどのレガシーブラウザのユーザーを保護することができます。

Lighthouseのクロスオリジン宛先監査が失敗する理由

Lighthouseは、安全でないクロスオリジン宛先へのリンクにフラグを設定します。

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

Lighthouseは、次のプロセスを使用して、リンクを安全でないものとして識別します。

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

Lighthouseは同じホストのリンクを除外するため、大型のサイトで作業している場合には注意すべき事項があります。1つのページに、同一サイト上の別のページへのtarget="_blank"リンクがrel="noopener"を使用せずに含まれている場合でも、この監査のパフォーマンスに関する影響が適用されますが、Lighthouseの結果には、これらのリンクが表示されません。

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

サイトのパフォーマンスを改善し、セキュリティの脆弱性を防ぐには

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" リンクタイプ」をご覧ください。

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

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.