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>

さいごに

もっと細かい仕様については理解する必要がないと思ったので、なるべく簡単に解説しました。ひとまず、target=”_blank” だけではヤバいというお話をしておきたかったんです。

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

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