[HTML] aタグ 別タブで開く方法とセキュリティ対策

HTML&CSSセキュリティ

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
というエラーが出て親ページは遷移できなくなる。

Posted by Agopeanuts