HTML

HTMLでリンクを別タブ・別ウィンドウで開く方法と、脆弱性に関する注意

HTMLでリンクを別タブ・別ウィンドウで開く方法と、脆弱性に関する注意 - アイキャッチ

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

まず、HTML でリンクを作成するには以下のように記述します。

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

リンクタグでは、target 属性を使用してリンクの表示先を設定することができます。

  1.  target="_self" 同じタブで開く
  2.  target="_blank" 新規(別の)タブで開く
  3.  target="自作したフレーム名" :インラインフレーム(iframe要素)内で開く

当記事では上記 1, 2 と、加えて「新規(別の)ウィンドウで開く」方法も紹介します。

3 については、こちらの記事で詳細に説明してくださっているので御覧ください。
インラインフレームを使用したときのリンクの設定方法

同じタブで開く

コード例

<!--下記2つ、どちらでも良い-->
<a href="リンク先のURL" target="_self">同じタブで開きます</a>
<a href="リンク先のURL">同じタブで開きます</a>

target="_self" は、HTML リンクにおけるデフォルト値なので、省略が可能です。

動作例

※Google のトップページにリンクしています。

同じタブで開きます
同じタブで開きます

新規タブで開く

コード例

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

この時、 rel="noopener noreferrer"  を必ず記述しましょう。
詳しくは target="_blank"の脆弱性と対処法 にて説明します。

動作例

新規タブで開きます

新規ウィンドウで開く

新規ウィンドウで開くには、JavaScript のコードでクリック時の処理を記述する必要があります。

コード例

<a href="リンク先のURL" onclick="navigateTargetUrl(); return false;">同じウィンドウで開きます</a>

<script>
  // a タグの href 属性に記述された URL を、新規ウィンドウで開く関数
  function navigateTargetUrl() {
    window.open(this.event.target.href, null, "noopener");
  }
</script>

JavaScript コード(script タグ内)で使用しているメソッド  window.open  の引数は必要に応じて変更することができます。
詳しくは、リファレンスを御覧ください。

動作例

新規ウィンドウで開きます

target="_blank" の脆弱性と対処法

新規タブ、新規ウィンドウでリンクを開かせる際、どちらでも  noopener  というキーワードを使用しました。

 noopener  noreferrer  には target="_blank" の脆弱性を利用した攻撃を防ぐという意図があります。

どんな脆弱性? 例えば何が起こるの?

target="_blank" の脆弱性は、「開かれた新規タブ側でリンク元タブの URL を操作できてしまう」というものです。

例えば……

ブログ執筆者

ブログ執筆者
ブログ執筆者
良い参考記事があった、リンクを載せよう!

対象サイトが悪意ある作者によるページだったら……

記事閲覧ユーザー

記事閲覧ユーザー
記事閲覧ユーザー
参考記事をクリック!

→ 新規タブで対象のページが開かれる
⇒ ブログを表示していた元のタブが Amazon を偽装したフィッシングサイトに切り替えられてしまった!

記事閲覧ユーザー
記事閲覧ユーザー
参考記事を見終わったから、さっきの記事に戻ろ~

ここで元のタブの URL は「http://amazom.co.jp/」に変わっている(本物の Amazon は 「https://amazon.co.jp/」)

記事閲覧ユーザー
記事閲覧ユーザー
あれ、Amazon なんて開いていたっけ?
まぁ「再度ログインしてください」って書いてあるし、ログインしておこうかな……

ログイン処理を行うことで、 閲覧ユーザーの Amazon の ID、パスワードが盗まれてしまいました!

そして後日……

記事閲覧ユーザー
記事閲覧ユーザー
ちょっと、あなたの記事を見ていたらフィッシングサイトに飛ばされて情報が盗まれたんだけど!
どうしてくれるの!
ブログ執筆者
ブログ執筆者
ええ! 僕は悪い事していないのに!

なんてことにならないように、皆さん注意しましょう!

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

noopener オプションを使用することで、脆弱性を突いた攻撃を防ぐことができます。

noopener は、リンクで開かれる新規タブにおいて「window.opener」の値を null にして、参照できなくするというものです。

リンクタグの target="_blank" を使う場合

<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">ここをクリック!</a>

noopener 未対応ブラウザ(IE, Edge など)への対応のため、noreferrer も付加しています。

JavaScript の window.open を使う場合

window.open(this.event.target.href, null, "noopener");

target="_blank" 脆弱性の検証

最後に、実際に window.opener を使って、リンク元タブの URL を操作してみましょう。

まず以下のリンクをクリックしてください。

新規タブで当ブログのトップページを開きます。(脆弱性有り) (2019/12/25 削除)

(2019/12/25 追記)

WordPress の機能によって、脆弱性があるリンクを設置できなくなっていたため、検証用のリンクを削除しました。 実際に動作確認したい方は、以下の手順に従って、rel="noopener noreferrer" を削除してからリンクをクリックしてみて下さい。

  • こちらのリンクを右クリック
  • 『検証(I)』をクリック
  • すると、デベロッパーツールが開き、<a href=" ... </a> というコードがハイライトされる
  • このハイライトされたコードの rel="noopener noreferrer" の 『noopener』あたりをダブルクリックする
  • すると、『noopener noreferrer』の箇所が選択されるので、そのまま Delete する(→ rel="" となれば OK です)
  • 最後に、上記『こちらのリンク』をクリックしてみて下さい

続いてデベロッパーツールを開き(ブラウザ上で「Ctrl + Shift + I」を入力)、「コンソール」のタブで  window.opener.location = "https://google.com/"  と入力します。

target="blank"脆弱性検証画像1
target="blank"脆弱性検証画像2

遷移元のタブ(ここ)が Google のトップページに変わりましたね?
このように URL を操作できるというのが、target="_blank" の怖さです。

次に、脆弱性に対策を講じたリンクで同じことを試してみましょう。

新規タブで当ブログのトップページを開きます。(安全)

target="blank"脆弱性検証画像3

エラーが発生し、遷移元のタブを操作できないことがわかります。
これで安心です!

しっかりと脆弱性への対策をして、安全なサイトを構築していきましょう!

POSTED COMMENT

  1. mm より:

    [リンクタグの target=”_blank” を使う場合]のコードが[target=”_self”]になっていますよ。
    内容はすごく勉強になりました、ありがとうございます。

    • ご指摘ありがとうございます!
      target=”_self” → target=”_blank” に修正いたしました。

      ご感想までくださり嬉しい限りです。こちらこそありがとうございます!!

TigRig(管理者) へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

CAPTCHA