[HTML] aタグ 別タブで開く方法とセキュリティ対策
a タグで作ったリンクを新しいタブで開くには、 target="_blank" を指定するが、 target="_blank" には脆弱性が存在する。脆弱性に対応したリンクを別タブで開く方法。
リンクを新しいタブで開く方法
リンクをどうやって開くかは target 属性を使って指定する。新しいタブで開くには target 属性の値を _blank にする。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>target 属性のその他の値target="_self" : 現在のウィンドウで開く（デフォルト値）target="_parent" : 親ウィンドウで開くtarget="_top" : 最上位のウィンドウで開く
target="_blank" の脆弱性
target="_blank" には脆弱性があり、 Tabnabbing という方法を使ってフィッシング詐欺に使われる可能性がある。
リンク先である子ページから、リンク元である親ページを操作することができる。子ページから、 window.opener.location = newURL を実行すると、親ページは newURL に遷移する。
例えば、 target="_blank" によって開かれた子ページで、デベロッパーツールのコンソールに、 window.opener.location = "https://www.yahoo.co.jp/" と打って enter を押すとヤフーに遷移することを確認できる。
リンク先に window.opener.location を埋め込んで、親ページに戻ると 「 Google へ再ログインしてください。」というあたかも Google を装った偽ページを表示させ、ログイン情報を不正に入手するということができてしまう。
（ Google ってログインしっぱなしで使っていると、キャッシュ消した後とか（？）突然ログインページが表示されることあるよね?!）
この方法を使った攻撃を Tabnabbing (タブナビング)という。
Tabnabbing 対策
これを防ぐには rel="noopener noreferrer" を一緒に指定する。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>noopener を指定すると、リンク先から window.opener が参照できなくなる（ null になる）。さらに、リンク元とリンク先が別スレッド扱いになるためパフォーマンスの面でも良い効果がある。
ブラウザによっては、 noopener がサポートされていないので、あわせて norefferer を指定する。
norefferer を指定すると、リンク先に、リンク元のリンクが送られないようになる。
rel="noopener noreferrer" のついた子ページで、デベロッパーツールのコンソールから、 window.opener.location = "https://www.yahoo.co.jp/" を実行すると、
Uncaught TypeError: Cannot set property 'location' of null
at :1:24
というエラーが出て親ページは遷移できなくなる。