原文: How to Use HTML to Open a Link in a New Tab

タブって便利ですよね。タブのおかげで、マルチタスクでたくさんのオンラインの作業を同時に行うことができます。

現在ではタブは一般的になり、リンクをクリックした際、自動的に新しいタブで開かれることも多くなりました。

リンクが新しいタブで開くようにするにはどうしたらいいか疑問に思っているなら、この記事が役に立つでしょう。

アンカー要素

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

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

Check out freeCodeCamp.

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

リンクを新しいタブで開くには、アンカー要素の他の属性を使う必要があります。

target 属性

この属性は、どのようにリンクを開くべきかをブラウザに伝えます。

リンクを新しいタブで開くには target 属性を _blank に設定します。

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

これで、リンクをクリックすると新しいタブで (ユーザーの設定によっては新しいウィンドウで) 開かれるようになりました。

target="_blank" のセキュリティ上の懸念

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

<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.object APIを通してあなたのページへの部分的なアクセスを獲得します。

タブナビングでは、リンク先のページによって、あなたのページが偽物のログインページにリダイレクトさせられる可能性があります。これにユーザーが気づくことは難しいと思われます。その瞬間、ユーザーの注意はあなたのページが表示されていた元のタブではなく、新しく開いたタブに向いているためです。

そしてユーザーがあなたのページのタブに戻ってきた時、そこに偽物のログインページが表示されていたら、ユーザーは自身のログイン情報を入力してしまうかもしれません。

タブナビングの仕組みや、悪意のある攻撃者がこの攻撃手法でどんなことができるのかより詳しく学びたい場合は、こちらの Alex Yumashev による記事 や OWASP の記事 をお勧めします。

この手法の動作を安全なサンプルで確認したい場合は こちらのページ を参照してください。攻撃手法と rel 属性についてのより詳しい情報は GitHub リポジトリ を参照してください。

まとめ

HTML を使用して、新しいタブでリンクを開くことは簡単です。アンカー要素 (<a>) を以下 3 つの重要な属性と一緒に使用するだけです。

  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.