Webサイトやブログ記事を作成していて、他の参考ページをURLリンクとして挿入することがあるでしょう。

そんな時、

「同じタブで開くようにすると、最初のページに戻るのが大変になる」

「参考リンクを新しいタブで開くようにするにはどうしたらいいの？」

と思うことはありませんか？

今回の記事では、以下のことがわかる内容になっています。

セキュリティ対策って必要なの？と思った方もいるでしょう。

実は、新しいタブでリンクを開く行為は正しい設定方法を知らないと、個人情報の流出などを招いてしまう危険性があるのです。

自作したWebサイトやブログページの信頼性を保持するためにも、ユーザーの情報を守るためにも、今回の記事の内容を最後までしっかり読んでくださいね。

HTMLでリンクの表示先を指定する方法

URLをクリックした際、新しいタブで開いたり、同じでタブで開いたりと、Webサイトによってリンクの表示方法が異なります。

これは、HTMLで指定してるリンクの表示先が異なるからです。

HTMLで以下のように、aタグにtarget属性を指定することでリンクの表示先の指定ができます。

<a href="リンク先のURL" target="リンクの表示先の指定"></a>

「リンクの表示先の指定」には、以下の4種類があります。

target属性は、値の前に「_（アンダースコア）」を入れるのを忘れがちなので注意しましょう。

では、それぞれの特徴と使い方を解説していきます。

1.同じタブで開く：_self

<a href="リンク先のURL" target="_self">同じタブで開きます</a>
<a href="リンク先のURL">同じタブで開きます</a>

同じWebページ上で新しいURLを開きたい場合には、target=”_self”を指定します。

「_self」は、aタグのリンク表示先におけるデフォルト値なので、省略して記述しても同じタブで開くことが可能です。

ページ数が多くない場合や、戻るボタンを押す必要がないWebサイトなどでは「_self」または何も指定していない場合が多いです。

2.新しいタブで開く：_blank

<a href="リンク先のURL" target="_blank">
新規タブで開きます
</a>

新しいタブでURLリンクを開きたい場合には、target=”_blank”を指定します。

新しいタブでリンクを開くことで、戻るボタンを何度も押さずに複数のページを確認することが可能になります。

「さっき見ていたページまで戻るの面倒」と思われることもなくなるのでユーザーの離脱率を下げる効果もあるとされています。

3.インラインフレーム内で開く

<ul>
 <li><a href="sample1.html" target="sample">サンプル1を表示</a></li>
 <li><a href="sample2.html" target="sample">サンプル2を表示</a></li>
 <li><a href="sample3.html" target="sample">サンプル3を表示</a></li>
</ul>

<div><iframe src="sample1.html" width="250" height="80" name="sample">代替内容</iframe></div>

インラインフレーム（iframe）とは、Webページの中に独自の領域を作り、その中で別のWebページなどを読み込んで表示するものです。

aタグでインラインフレーム内で表示するHTMLを指定し、target属性で独自の名前をつけ、iframeタグを使用して表示します。

料金やメニューなど、同じWebページ内で特定の枠内だけ画面が切り替わるようにしたい場合などによく利用されています。

4.新しいウィンドウで開く：window.open

<a href="リンク先のURL" onclick="window.open('リンク先のURL', '任意のウィンドウ名称','width=1300,height=800'); return false;">新規ウィンドウで開きます</a>

HTMLのaタグに、JavaScriptの「windouw.open」メソッドを使用することで、新しいウィンドウで開くことができます。

新しいタブで開くtarget=”_blank”と同様、ユーザーの離脱率を減少させる効果があるとされています。

新しいタブで開く設定は注意！target=”_blank”の脆弱性について

新しいタブで開けるようにリンク表示先を設定することで、ユーザーが離脱しにくくなるというメリットがあります。

しかし、新しいタブで開くために必要な「target=”_blank”」にはセキュリティの脆弱性が問題視されています。

例えば、以下ような場合が挙げられます。

target=”_blank”で新しいタブを開く際、一つのブラウザ上にリンク元のページとリンク先のページが同時に存在していることになります。

そのため、リンク元であるWebページを操作できるようになってしまうということです。

また、リンク先のページの負荷をダイレクトに受けやすいことからパフォーマンスが低下するということ問題視されています。

この2つの問題点については、新しいウィンドウで開く指定の「window.open」にも同様のことが言えます。

target=”_blank”の脆弱性への対処法

target=”_blank”はセキュリティ面の脆弱性に問題があることがわかりました。

では、この問題をどのように解決すればよいのでしょうか？

target=”_blank”を使用せずに、同じタブで開くデフォルト値の_selfを指定する方法もありますが、他にも以下の対策を取ることで、安全に新しいタブでリンクを開くことができるようになります。

<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">新しいタブで安全に開きます</a>

noopenerは、新しいタブで開かれるリンクを参照できなくする指定のこと。

リンク元も新しいタブで開かれるリンクも別のものとして扱われるため、パフォーマンスの対策にもなっています。

しかし、ブラウザによってはnoopenerがサポートされていない場合があるので、未対応ブラウザ用にnoreferrerも一緒に指定しておきましょう。

新しいウィンドウで開く指定のwindouw.openメソッドも脆弱性があるので、noopenerとnoreferrerを必ず指定する必要があります。

新しいタブで開けない！target=” _blank”は効かないことがある

aタグにtarget=” _blank”を使用した際、「あれ？URLリンクをクリックしても開けない」ということがあります。

パソコンでもまれにある現象ですが、特に「一部のAndroid端末 + Google Chrome」という組み合わせでで多く発生します。

これは、target=” _blank”の脆弱性からセキュリティ面で問題があるため、開けないようになっているのです。

先ほど解説した「noopener」と「noreferrer」を指定していればこの問題を解決できるので、一部のブラウザやデバイスでリンクが開けない時はrel属性の指定を確認しましょう。

新しいタブで開く時はHTMLでtarget=”_blank”のセキュリティ対策確実に

URLリンクを新しいタブで開くように設定することで、ユーザーの離脱防止にも繋がります。

しかし、target=”_blank”は脆弱性やパフォーマンス低下などの問題もあるので、対策方法も覚えておかなければなりません。

以下は、この記事のまとめです。

セキュリティ面は、リンクを貼る上で最も気を付けなければならないことです。

ユーザーの情報を守るためにも対策をきちんと行った上で、target=”_blank”やwindow.openを使用しましょう。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングスクールを比較／