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

2021年10月6日 2021年10月9日

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

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

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

target="_blank" を使用する

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

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

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

<a href="https://codeclub.commits.work/" target="_blantk">CODE CLUB965 TOPページ</a>

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

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

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

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

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

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

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

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

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

・noopener の指定
・norefferer の指定

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

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

それぞれ説明します。

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

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

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

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

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

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

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

それでは、また！

Follow me!