新規タブで開く
下記を使用すること！
<a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener noreferrer">新規タブで開く</a>
詳細（target=”_blank”の問題点）
①セキュリティについての問題点（概要）
target=”_blank” のセキュリティ上の脆弱性（セキュリティ上のリスク）について、グーグルのデベロッパー用のサイトで詳しく説明されています。参考:Tools for Web Developers
上記ページには、window.openerを使用することで、親ウィンドウのオブジェクトにアクセスを行ったり、window.opener.location = newURL によって親ページのURLを書き換えることができる問題があると記載されています。
target=”_blank”のリンクは別タブ（別ウィンドウ）で開かれるため、リンク元のページとリンク先のページの両方が一つのブラウザ内に存在していることになります。
そのように開かれたリンク先のページに、もし悪意をもったJavaScriptが記載されていたら、リンク元であるページを好き勝手に改ざんできてしまう可能性が考えられるのです。
target=”_blank”の問題への対処法
①noopenerの指定
noopener を指定することで、リンク先からwindow.openerを使ってリンク元が参照できなくなります。さらに、リンク先とリンク元が別のものとして扱われるためパフォーマンスに対しての対策にもなっているのです。
②noreffererの指定
ブラウザによっては、noopenerがサポートされていないため、noopenerと合わせてnoreffererを指定するのが好ましいと言えるでしょう。
noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、 noopenerと同じくリンク先からの参照ができなくなります。
