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は、次のプロセスを使用して、リンクを安全でないものとして識別します。
target="_blank"属性を含み、rel="noopener"またはrel="noreferrer"属性を含まないすべての<a>タグを収集します。- 同じホストのリンクをすべて除外します。
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" リンクタイプ」をご覧ください。
詳細については、「クロスオリジンリソースを安全に共有する」をご覧ください。
リソース
更新日 • 記事を改善する