<a>タグ target="_blank"のセキュリティ対策

<a>タグ target="_blank"のセキュリティ対策

Reactでポートフォリオを作っている中で外部リンクにアクセスするために <a>タグでtarget="_blank"を使用しました。
(target="_blank"とは別タブで指定したURLを開く設定です)
その際、コンソールに以下の警告が出ていることに気づきました。

Using target="_blank" without rel="noreferrer" is a security risk
// rel="noreferrer "を使用せずにtarget="_blank "を使用することは、セキュリティ上のリスクがあります。

ほ〜ん。そうなんか...。
ということで今回はセキュリティのお話です。

target="_blank"には脆弱性がある...？

警告にも出ているとおり、結論から言うとtarget="_blank"には脆弱性があります。

前提として、遷移元のページAから外部リンクのページBを開くとします。
target="_blank"でページBは、遷移元のページAをwindow.openerオブジェクトとして参照することができます。ページBが悪いサイトだった場合、window.opener.location = <危険なURL>のようにページAに対して悪用(フッシング詐欺やウイルスを流す)が可能になります。

脆弱性の対策

脆弱性の対策として以下があります。

• target="_blank"を使用している<a>のrel属性にnoopener noreferrerオプションを付与する

<a href="[e-mail]" target="_blank" rel="noopener noreferrer">リンク名</a>

簡単に解説します。

• noopener
  • 遷移先のページからwindow.openerを参照できなくする。
    • 一部のブラウザ(IEやEdge)では、サポートしていない。。
  • 遷移元のページと遷移先のページの処理を別スレッドで処理してくれる。
• norefferer
  • 遷移先のページからリファラー(遷移元のページ情報のこと)を参照できなくする。
    • どこから訪問してきたのか特定ができない、参照元がない状態になる。

上記から、遷移先のページから遷移元のページの情報を参照できないようにするために、noopenerとnoreffererの両方を設定することが望ましいです。

パフォーマンスの問題にもつながる

セキュリティ以外にもパフォーマンスの観点でnoopenerを設定しておくとメリットがあるようです。
target="_blank"を使用して外部リンクに遷移した場合、遷移元と遷移先のページは同じスレッドで動作するようです。そのため、遷移先のページで負荷の高いスクリプトが実行されると、遷移元のページの処理効率が落ちてしまいます。
noopenerを設定しておけば、遷移元のページと遷移先のページの処理を別スレッドで処理してくれるようになり、遷移元のページのパフォーマンス低下を防ぐことができるようです。

まとめ

<a>タグtarget="_blank"のセキュリティ対策について解説しました。
target="_blank"を使用している<a>のrel属性にnoopener noreferrerオプションを付与しておくのが無難ってことみたいですね。
勉強になりました😄