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

ブログなどで他のページを紹介したりする時に使う「 リンク」ってありますけど、そのウィンドウでそのまま表示させることもできれば、別タブで表示させることもできるんですよね。

やっぱり、別タブが出るようにしてあげるのが親切だよね!

くま五郎

りょう

まあ、確かに右クリックの必要がなくなるからね。ただ、別タブが立ち上がるようにするときにはある注意が必要なんだ!

というわけで、リンクを別のタブで表示させるときについて少しお話ししたいと思います。

リンク先を表示させる

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

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

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

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

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

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

HTML
<a href="リンク先のURL" target="_blank"></a>
右クリックする必要もないし、戻るときにスマホでもタブを消すだけで済むから便利だよねこれ。

くま五郎

りょう

でもね、これだけだと迷惑をかける可能性があるんだよ。

_blank による脆弱性

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

HTML
rel=”noopener noreferrer”

どんな脆弱性なのか

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

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

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

サイト運営者

くま五郎

なかなか良いサイトだから、このリンクを紹介しておこう!

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

ユーザー

りょう

「くま五郎」さんが紹介しているリンクだから、ちょっと見てみよう。

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

りょう

あれ!? このページを開いてたんだっけ? でも、再ログインしてくださいって書いてあるから、ひとまず再ログインしておこうっと。

すると、数日後。

りょう

なんか、「くま五郎」さんのページで記事を読んでたら、ログイン情報などが漏れていたんですけど! どういうことですか、くま五郎さん!
ええぇ〜っ!僕は、何もしていないですよ…

くま五郎

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

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

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

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

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

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

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

さいごに

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

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

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