HTMLでリンクを新しいタブで開く方法【target属性とrel属性の正しい使い方】

タブは本当に便利ですよね。マルチタスク好きな人にとって、複数の作業を同時に進められるのは大きな魅力です。

今ではタブがあまりにも一般的になったため、リンクをクリックすると新しいタブで開くのが当たり前になっています。

「自分のサイトのリンクでも同じことができないかな?」と思ったことがあるなら、この記事はまさにうってつけです。ここでは、HTMLだけでリンクを新しいタブで開く方法を分かりやすく解説します。

アンカー要素(<a>)とは

Webページにリンクを作成するには、テキストや画像などの要素をアンカー(<a>)要素で囲み、href属性にリンク先のURLを指定します。

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Check out freeCodeCamp.

上記のリンクをクリックすると、ブラウザは現在のウィンドウやタブ内でリンクを開きます。これはすべてのブラウザにおけるデフォルトの動作です。

リンクを新しいタブで開くためには、アンカー要素が持つ別の属性を活用する必要があります。

target属性で開き方を制御する

target属性は、ブラウザに対してリンクの開き方を指示する属性です。

リンクを新しいタブで開きたい場合は、target属性に_blankを設定するだけです。

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

これで、リンクがクリックされると新しいタブで開きます。ブラウザの設定によっては、新しいウィンドウで開く場合もあります。

target="_blank"のセキュリティ上の注意点

target属性を使う場合は、必ずrel="noopener noreferrer"をアンカー要素に追加することを強くおすすめします。

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

実際の表示は次のようになります。

Check out freeCodeCamp.

rel属性は、自ページとリンク先URLとの関係性を定義するものです。noopener noreferrerを設定することで、「タブナビング(tabnabbing)」と呼ばれるフィッシング攻撃を防ぐことができます。

タブナビングとは?

タブナビング(リバース・タブナビングとも呼ばれます)は、target="_blank"に対するブラウザのデフォルト動作を悪用し、window.openerオブジェクト経由で元のページへの部分的なアクセス権を取得する攻撃手法です。

タブナビングが発生すると、リンク先のページによって、あなたのページが偽のログインページへ強制的にリダイレクトされる恐れがあります。ユーザーのフォーカスは新しく開いたタブにあるため、元のタブの変化に気づく人はほとんどいません。

その後、ユーザーがあなたのページのタブに戻ってくると、そこには本物そっくりの偽ログインページが表示されており、うっかりIDやパスワードを入力してしまう可能性があります。

タブナビングの仕組みや、攻撃者がこの脆弱性で何ができるのかを詳しく知りたい方は、Alex Yumashev氏の記事やOWASPの解説記事を参照するとよいでしょう。また、安全に動作を確認できるデモページやGitHubリポジトリも公開されているので、rel属性の挙動とあわせて学んでみてください。

まとめ

HTMLを使ってリンクを新しいタブで開くのはとても簡単です。必要なのは、次の3つの重要な属性を備えたアンカー(<a>)要素だけです。

1. href属性:リンク先ページのURLを指定する
2. target属性:_blankを設定し、ブラウザの設定に応じて新しいタブまたはウィンドウで開くよう指示する
3. rel属性:noreferrer noopenerを設定し、リンク先ページからの悪意ある攻撃を防ぐ

改めて、完全なコード例を紹介します。

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

このコードは、ブラウザ上で次のように表示されます。

Check out freeCodeCamp.

最後までお読みいただきありがとうございました。それでは、Happy coding!