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

目次
リンクの表示先を指定する方法
同じタブで開く
新規タブで開く
新規ウィンドウで開く
target="_blank" の脆弱性と対処法
どんな脆弱性？ 例えば何が起こるの？
target="_blank" 脆弱性への対処法
target="_blank" 脆弱性の検証

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

まず、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>

動作例

新規タブで開きます

新規ウィンドウで開く

新規ウィンドウで開くには、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 オプションを使用することで、脆弱性を突いた攻撃を防ぐことができます。

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

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

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/"  と入力します。

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

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

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

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

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