危険な理由
「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」から。
たいていのブラウザは「target=”_blank”」によって別タブで開かれたページが手前に表示され、元のページは裏側に残る。
元のページで
// window.opener は別タブで開かれたページを開いた元のページの参照を返す
window.opener.location = '~~~';
が実行されると、元のページで画面遷移が行われる。
つまりオリジンが違ったとしても、リンクを辿ってきたユーザーを任意のサイトに誘導することが可能。
対応方法
<a href="~" target="_blank" rel="noopener noreferrer">別タブで開く</a>
上記のようにrel属性を使用する。
noopenerだけでもいいが、IE11などはnoopenerに対応していないため、noreferrerも併せて指定する。
ただし、リンク先のアクセス解析でリファラを取得したい場合にnoreferrerをつけると取得できなくなるため注意。
より詳しくいうと、
noreferrerは遷移先でリファラー(document.referrer)が参照できなくなるように指定するものであり、noopenerは遷移先で遷移元ページのタブをjsで操作できなくする指定である。
GAの参照元などは、通常リファラーが参照されるため、noreferrerを指定するとdirect/noneとなることに注意する。