リンクの表示先を指定する方法
まず、HTML でリンクを作成するには以下のように記述します。
<a href="リンク先のURL"></a>
リンクタグでは、target 属性を使用してリンクの表示先を設定することができます。
- target="_self" :同じタブで開く
- target="_blank" :新規(別の)タブで開く
- 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 の 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/" と入力します。


遷移元のタブ(ここ)が Google のトップページに変わりましたね?
このように URL を操作できるというのが、target="_blank" の怖さです。
次に、脆弱性に対策を講じたリンクで同じことを試してみましょう。

エラーが発生し、遷移元のタブを操作できないことがわかります。
これで安心です!
しっかりと脆弱性への対策をして、安全なサイトを構築していきましょう!
[リンクタグの target=”_blank” を使う場合]のコードが[target=”_self”]になっていますよ。
内容はすごく勉強になりました、ありがとうございます。
ご指摘ありがとうございます!
target=”_self” → target=”_blank” に修正いたしました。
ご感想までくださり嬉しい限りです。こちらこそありがとうございます!!