【HTML】別タブでリンクを開く方法とその問題点

こんにちは!CODE CLUB965のKです!

今回はHTMLでリンクを開く際に、別タブで開く方法について書こうと思います。

また、別タブで開く際の問題点と対策についても解説します。

target=”_blank” を使用する

別タブでリンクを開きたい場合は、a要素に「target="_blank"」を付けます。

<a href="リンク先のURL" target="_blank">新規タブ</a>

例えば以下のような感じで記述します。

<a href="https://codeclub965.com/" target="_blantk">CODE CLUB965 TOPページ</a>

上記のように書くことで、別タブでページが表示されるようになります。

CODE CLUB965 TOPページ

target=”_blank” の問題点

セキュリティの問題

挙げられる問題点としてセキュリティ的な問題があります。

例えば、自分のサイト内のページに「target=”_blank”」でリンクを貼ったサイトがあるとします。
そのリンク先のサイトが悪意のあるページだった場合、新しく開かれたタブ側でリンク元のページのURLを操作できてしまうのです。

そのため、リンク先のページに悪意のあるJavaScriptが記載されていた場合、リンク元であるページを好き勝手に書き換えられる可能性があります。

これはセキュリティ的によろしくありません。

パフォーマンスの問題

パフォーマンスについての問題点も挙げられます。

「target=”_blank”」 を使ってリンクを貼っている場合、リンク元のページとリンク先のページは全く同じプロセスを通して実行されます。

そのため、リンク先のページで高い負荷を与えるJavaScriptが実行されていると、リンク元のページに影響してしまいパフォーマンスの低下につながります

問題点の対処法

問題点の対処法として以下の指定をしてあげるといいです。

noopener の指定
norefferer の指定

例えば以下のように記述します。

<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新規タブ</a>

それぞれ説明します。

noopener を指定する

noopenerを指定すると、リンク先からwindow.openerを使ってリンク元が参照できなくなります。

また、リンク先とリンク元が別のものとして扱われるため、先程挙げたパフォーマンスの問題も改善することができます。

norefferer を指定する

noreffererを指定すると、リンク先にリンク元のリンク情報が送られないようになります。

ブラウザによっては、noopenerがサポートされていない場合があるので、noopenerと合わせてnoreffererを指定するのいいと思います。

最後に

今回は、「target="_blank"」を使った別タブでリンクを開く方法について書きました。

また、「target="_blank"」の問題点とその対象法についても書きました。

セキュリティやパフォーマンスに関わるので使う際は注意して下さい。

それでは、また!

 
質問や感想がある方は、TwitterのDM、リプ欄にコメントください!
その他CODE CLUB965のことで気になことがあれば無料で面談できますので、お気軽にお問い合わせください!