リンクを別タブで開く(target="_blank")を使うときの注意点

概要

target="_blank"のみを使うのはセキュリティとパフォーマンスに悪影響があるため非推奨

##理由
リンク先のページに悪意のあるJavaScriptが仕組まれている場合、
リンク元のページを操作できてしまうから

##対策
rel="noopener" 属性または rel="noreferrer" 属性と併用する
これによってリンク先のページでwindow.openerでの参照が不可能になる。

NG例.html

<a href="リンク先URL" target="_blank">

OK例.html

<a href="リンク先URL" target="_blank" rel="noopener noreferrer">

##参考
グーグルのデベロッパーサイト

原文
・ The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.
・ The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

和訳
・ リンク先のページは、あなたのページと同じプロセスで実行される場合があります。他のページが多くのJavaScriptを実行している場合、ページのパフォーマンスが低下する可能性があります。
・ リンク先のページはwindow、window.openerプロパティを使用してオブジェクトにアクセスできます。これにより、他のページが悪意のあるURLにリダイレクトする可能性があります。