外部リンクを新規タブで開くときの属性

結論

• 外部リンクを示すaタグには、rel属性のnoreferrerは必要に応じて適宜付与すること
• noopenerは現在は主要なブラウザで自動的につけてくれるため明示的に付与する必要はない

以下で少しだけ深堀りする

外部リンク

自サイトからみて、別のオリジンのサイトへの参照のことを外部リンクと呼ぶと認識しているが、定義としては少し曖昧？

そもそもどこで正確な定義がされているかがわからないのでMDNを置いておく。

HTML的にみればこう

<a href="https://google.com" target="_blank" rel="noopener noreferrer" />

target 属性

targetという属性（hrefがもつURLの読み込む先についての意味を持たせる属性）には様々な値を入れることができるが、外部リンクを示す場合は target="_blank"を指定することが一般的。 この値は、新しいタブでリンクを開く という意味を持つ。

rel 属性

noreferrer

targetのURLに遷移した後、その遷移先のサイトでリファラ（どこからアクセスしてきたかという情報）を取得させないようにする

自サイトのURLに重要な情報（セッションIDなど）が入っている場合やGAなどのアナリティクスにどこから来たかという情報を収集させたくない場合（ＧＡでは確か、そのページに来たユーザーのリファラも取れていたような気がする）に有効となる属性。

noopener

新規タブで開いたサイトからwindow.openerにアクセスできないようにブラウザに対する指示。

Window インターフェイスの opener プロパティは、 open() によって、または target 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。

新しく開かれたページでwindow.opener.location = "http..."が実行されると、遷移元のページのURLを書き換えることができるらしい。遷移元ページに戻ったらフィッシングサイトのページに置き換わっているなんてことが発生しかねない。

なのでnoopenerをつける必要がある。

要するに、自サイトから信用のないサイトへの外部リンクを貼る際は、その外部サイトが遷移元のサイトをフィッシングサイトなどに置き換える可能性を防ぐために、noopenerをrel属性につけるべきだが、現在はブラウザがaタグにtarget="_blank"が記述されているとき、自動的にnoopenerをつけてくれる仕様となっているので、noopenerに関してはつけなくてもよくなった。（WordPressも同様の仕様だったはず）