HTML でリンクを別タブで開く方法【ただ、脆弱性については注意が必要です】

そんな疑問にお答えします。

リンクをクリックした時にそのままのタブで表示させるより、別タブで表示させてあげる方が親切な感じがしますよね。

ということで、リンクを別のタブで表示させる方法、そしてどのような注意が必要なのかを解説します。

リンク先を別タブで表示させる方法を解説

リンクを指定する時は、HTML で記述するとこのようになりますよね。

<a href="リンク先のURL"></a>

このシンプルな状態なら、リンクをクリックしてもらうとそのタブのままリンク先へ移動してしまいます。
 

そこで、target 属性と呼ばれるものを使ってあげると、リンクをクリックしただけで別タブが立ち上がった状態でリンク先のページが表示されるようになります。

その target 属性に、_blank を指定してあげると、別タブで開くようになります。
 

その状態を HTML で記述してみると、このような形になります。

<a href="リンク先のURL" target="_blank"></a>

別タブを開く「_blank」による脆弱性

最近、WordPress などでは自動的に付け加えられるようにはなってきてはいますけど、target=”_blank” を使った時には以下のものが付くようになっています。

rel="noopener noreferrer"

どんな脆弱性なのか

実は target=”_blank” だけを表記した場合、リンク元が悪意があるサイトだった場合はフィッシング被害などにあう可能性があるんです。

というのも、target=”_blank” はリンク元がリンクを操作することができてしまうからなんです。
 

どういうことかと言うと、

サイト運営者

と、リンクをブログに表示させます。

サイト利用者

とリンクをクリック。そして、リンク先を閲覧をして「くま五郎」のページに戻ろうとすると…

すると、数日後。

と、いうことになり兼ねないんです。

一体何が起きたのかというと、「くま五郎」が紹介したリンクが操作されていたことで、ページを戻ると偽りのサイトを表示させることができてしまうんです。

もしこれが、いつも使っている Amazon そっくりのページだったりすると、「あれ？なんか勝手にログアウトになってる〜」くらいにしか思わないかもしれませんからね。
 

これは、「くま五郎」がリンク元でそのような操作が行われていることを知らなくても、ユーザーに迷惑をかけてしまう可能性が潜んでいるというわけです。

それを防ぐのが、rel=”noopener noreferrer” になります。
 

そのため、別タブを開くようにする時には下記のように HTML を記述する必要があります。

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

さいごに

もっと細かい仕様については理解する必要がないと思ったので、なるべく簡単に解説しました。

WordPress では自動になっているんですけど、その他のブログサービスなどでは対応されていないものもあるので、実はちょっと危険なんです。

出来るだけ読者が安心して記事を読んでもらえるように、「リンク」を最適化しておきたいですね。