知らないと危険!target=”_blank”でリンク挿入しよう

2022.10.10
html 新しいタブで開く

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

そんな時、

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

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

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

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

  • リンクを新しいタブで表示する方法
  • 新しいタブリンクを開く設定における危険性
  • リンク表示先の指定のセキュリティ面における対策方法

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

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

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

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

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

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

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

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

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

  1. 同じタブで開く:_self
  2. 新しいタブで開く:_blank
  3. インラインフレーム内で開く
  4. 新しいウィンドウで開く:window.open

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”」にはセキュリティの脆弱性が問題視されています。

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

悪意のある
サイト作者
悪意のある
サイト作者
大手ショッピングサイトを偽装したフィッシングサイト(リンク②)を作成
表面上は普通のWebページ
Webサイト
運営者
Webサイト
運営者
自社のWebページ①にリンク②をtarget=”_blank”で掲載
リンク②が悪意のある作者によって作られたページと気づかず掲載
閲覧ユーザー
閲覧ユーザー
リンク②をクリック
1.新しいタブで参考記事が開かれる
2.最初に閲覧していたWebページ①に戻る
3.Webページ①がなぜか大手ショッピングサイトのログインページに変わっている
4.IDやパスワードを入力してログインし直す
閲覧ユーザー
閲覧ユーザー
後日、情報が盗まれていたことに気づく
Webサイト運営者にクレームの連絡、または口コミなどに悪評を記入する

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”」を指定する
  • target=”_blank”やwindow.openは脆弱性が問題点
  • target=”_blank”やwindow.openには、必ずnoopenerとnoreferrerを指定する

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5