別タブで開くaタグのtarget属性「target=”_blank”」のセキュリティ対策

Webページのコンテンツ内に外部サイトへのリンクを別タブで開くようにするには、アンカーリンク（aタグ）に「target=”_blank”」設定しますが、セキュリティ上の脆弱性がありますので、一緒にrel属性にnoopenerやnoreferrerの設定をすることをお勧めします。

「target=”_blank”」で新しいタブで開くページは、元のページをwindow.openerオブジェクトを持つため、window.opener.documentオブジェクトを参照することで、元のページのドキュメントを操作することが出来てしまいます。
セキュリティ面で心配ですので、対策をしておきたいところです。

noopenerは、元のページのドキュメントを操作できないようにする設定になります。
古いブラウザでは対応していないものもあります。

Can I use（noopener）
https://caniuse.com/?search=noopener

IEは厳しいでしょう。

そこで一緒に設定しておきたいのが「noreferrer」です。

noreferrerは、リファラを送らないようにする設定になります。
主要ブラウザはもちろん、IE11あたりも対応しています。

Can I use（noreferrer）
https://caniuse.com/?search=noreferrer

noopenerと同様の効果もありますので、幅広いブラウザに対応する場合には必要になるでしょう。

ただ、noreferrerはリファラを送らない設定になりますので、Googleアナリティクスの参照元のデータ情報や、アフィリエイト等では影響が出そうです。
その点を踏まえて利用しましょう。

noopener / noreferrerの設定

設定は以下のように、rel属性にnoopenerとnoreferrerを記述します。

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

リファラの情報が必要なければ、今のところ、「noopener」と「noreferrer」の両方を指定することが推奨されています。

IEについては、もうサポートされることはないと思いますので、今後はnoopenerのみの指定でしたり、必要に応じてnoreferrerを指定していくことになるでしょう。

また、mailtoでも同じようにrel属性を設定できます。
JavaScript等でアニメーションや動きを駆使したWebページでは、target=”_blank”を設定しておかないとWebページの表示に影響する場合もあります。

<a href="mailto:contact@xxxxxx.com" target="_blank" rel="noopener noreferrer"></a>

外部リンクを別タブで開く際に設定する「target=”_blank”」。手軽に利用できますがセキュリティ上の脆弱性もありますので、rel属性のnoopenerやnoreferrerも一緒に設定しておきましょう。