target="_blank"
属性を使用して別のサイトのページにリンクすると、サイトのパフォーマンスとセキュリティの問題にさらされる可能性があります。
- 他のページはあなたのページと同じプロセスで実行されます。 他のページで JavaScript を多く実行している場合、ページのパフォーマンスが低下する可能性があります。
- もう一方のページは、
window.opener
プロパティを使用してwindow
オブジェクトにアクセスできます。これにより、そのページが悪意のある URL にリダイレクトされるおそれがあります。
rel="noopener"
または rel="noreferrer"
を target="_blank"
リンクに追加することで、このような問題を回避できます。
Lighthouse のクロスオリジンの宛先監査が失敗する仕組み
Lighthouse では、クロスオリジンのリンク先への安全でないリンクが報告されます。
Lighthouse では、次の手順でリンクを安全でないリンクとして識別します。
target="_blank"
属性を含むが、rel="noopener"
属性またはrel="noreferrer"
属性を含まないすべての<a>
タグを収集します。- 同一ホストのリンクは除外します。
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」をご覧ください。
詳しくは、クロスオリジン リソースを安全に共有するをご覧ください。