rel=”noopener”とrel=”noreferrer”の違い
目次
概要
aタグにref=noopenerを指定するとESLintで怒られたので改めて設定と、noopenerとnoreferrerの違いをまとめておく。
ESLint
Disallow target="_blank" attribute without rel="noreferrer"
ルールの詳細
This rule aims to prevent user generated link hrefs and form actions from creating security vulnerabilities by requiring
rel='noreferrer'for external link hrefs and form actions, and optionally any dynamically generated link hrefs and form actions.DeepL) このルールは、外部リンクとフォームアクション、およびオプションで動的に生成されるリンクとフォームアクションに rel='noreferrer' を要求することで、ユーザが生成したリンク href とフォームアクションがセキュリティの脆弱性を生み出すのを防ぐことを目的としています。
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md
現在の主要ブラウザでは自動的にref=noopenerが設定されているためIE等のレガシーブラウザのサポートが必要ない場合はこの設定は不要になる。
また外部リンク先が安全だと保証されている場合や、分析等で使用したい場合は設定でallowReferrerをtrueにすることでnoreferreを必須としない設定にできる。
そもそもrefの設定はなぜ必要か
target=_blankを使用して別サイトのページへアクセスした場合下記の問題が発生するリスクがある。
-
セキュリティの問題
-
サイトパフォーマンスの問題
セキュリティの問題
window.openerを使用して遷移元のwindowオブジェクトにアクセスし悪意のある行為をされる可能性がある
例えば、遷移先で悪意のあるJavaScriptソースが仕込まれていて、元ページに似せたフィッシングサイトにリダイレクトさせたり...など
サイトパフォーマンスの問題
遷移先ページでも遷移元のページと同じプロセスでリソースが実行される場合があり、不要なJavaScriptなどが実行されパフォーマンスの低下を可能性がある
参考
noopenerとnoreferrerの違い
noopener
-
遷移先で元のサイト(遷移元)の
window.openerへのアクセスを許可しない(nullを返す) -
HTTPのRefererヘッダーは提供される
-
古いブラウザではサポートされていない(ref: Can I use)
仕様書 : 4.6.7.13 Link type "noopener"
noreferrer
-
noopenerの作用と同様 -
参照先でHTTPのRefererヘッダーを省略し(referer)情報を渡さない様にブラウザに指示する
仕様書 : 4.6.7.14 Link type "noreferrer"
Refererとは
Refererリクエストヘッダーには、現在リクエストされているページへのリンク先を持った直前のウェブページのアドレスが含まれています。Refererヘッダーにより、サーバーは人々がどこから訪問しに来たかを識別し、分析、ログ、キャッシュの最適化などに利用することができます。https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referer