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

ブログなどで他のページを紹介したりする時に使う「 リンク」ってあるけど、クリック後に別タブで表示させることってできるの?

 

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

この記事の内容
  • リンクをクリックしたら別タブで表示させる方法
  • _blank による脆弱性について
 

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

オトマミ

右クリックする必要がなくなるから手間が1つ省けるけど、別タブを立ち上げるようにする時には注意点が1つあるんです。
 

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

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

リンクを指定する時は、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 では自動になっているんですけど、その他のブログサービスなどでは対応されていないものもあるので、実はちょっと危険なんです。

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