target=”_blank”とは？
同一タブ内でリンクを開く場合
<a href="●●××.com" target="_self">同一タブで開く</a>
<a href="●●××.com">同一タブで開く</a>target=”_self” については記載なくても大丈夫です。私がコーデイングする場合は記載しない下のパターンで記載しています。
別タブで開きたい場合
<a href="●●××.com" target="_blank">別タブで開く</a>「_blank」とすることで、クリックすると、別タブで開くようになります。
外部へのリンクを貼る際によく使われるリンク方法で、自サイトは残しつづ、別のサイトも参考にさせたい場合などにつかうことができます。PDF資料に飛ばしたい場合などにも使うかもしれません。
target=”_blank” の脆弱性と対策について
“target=”_blank” にはセキュリティ上の脆弱性があります。
リンクの飛ばし先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、 window.opener.location = newURL によって親ページの URL を変更できることが問題とされています。
別タブリンクの対策、対処法
<a href="●●××.com" target="_blank" rel="noopener noreferrer">別タブで開く</a>別タブリンクを設置するときは、 rel=”noopener noreferrer” を追加しよう。というのが今回の記事のまとめになります。
リンク元を参照できないようにする+ブラウザによって対応できないのをカバーするイメージです。
パフォーマンスにも影響？
Googleの技術者によると
「target=”_blank”を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。』
https://twitter.com/addyosmani/status/1234055782896979968?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1234055782896979968%7Ctwgr%5Edfd8dbfe10dff9b90fd1de1125930b32caf9b66a%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.mubag.com%2Fblog%2Ftarget-blank-noopener%2F
パフォーマンスの観点からも、 rel=”noopener noreferrer” は追加したほうがよさそうですね。
まとめ
target=”_blank” を使用する場合には、 rel=”noopener noreferrer” を忘れず追加しよう。という記事でした。セキュリティやサイトパフォーマンスは表示順位にも関わってくると思いますので、サイト制作の際には忘れず追加することを習慣づけましょう！
