プログラミング勉強日記
2021年2月17日
Twitterでtarget="_blank"問題という言葉を見て知らなかったので、調べて簡単にまとめる。
target="_blank"とは
HTMLタグの1つでリンク先を別のタブで新しく開くように指定するもの。
<a href="リンク先のURL" target="_blank">新規タブで開く</a>
target="_blank"の問題点
1. セキュリティにおける問題点
target="_blank"のリンクは別タブで開かれるので、リンク元のページとリンク先のページの両方が1つのブラウザ内に存在していることになる。リンク先のページに、悪意のあるJavaScriptが記載されていた場合、リンク元であるページを好き勝手改竄することができる。
自分のサイト内のページにtarget="_blank"でリンクを貼ったサイトが、悪意のある人によって作られたページだった場合、開かれた新しいタブ側でリンク元のページのURL操作が可能になってしまう。
2. パフォーマンスにおける問題点
リンク元のページとリンク先のページは全く同じプロセスを通して実行され、リンク先のページで高い負荷を与えるJavaScriptが実行されているとリンク元のページにも影響を及ぼし、パフォーマンスが低下することがある。
対処法
1. noopenerを指定する
noopenerを指定すると、リンク先からwindow.openerを使ってリンク元が参照できなくなる。また、リンク先とリンク元が別のものとして扱われるので、パフォーマンスの問題点を改善できる。
2. noreffererを指定する
noreffererを指定すると、リンク先にリンク元のリンク情報が送られないようになる。ブラウザによってはnoreffererがサポートされていないので、noreffererを指定するといい。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新規タブで開く</a>
参考文献
最近話題の『target=”_blank”問題』は何が問題なの？今さら聞けない問題の要点と対処法を解説します。
「別タブで開く」リンク(target="_blank")は脆弱性あり？【SEO情報まとめ】