HTMLを使用して新しいタブでリンクを開く方法

タブは素晴らしいですね。それらは私たち全員のマルチタスカーが同時にたくさんのオンラインタスクをやりくりすることを可能にします。

タブは非常に一般的であるため、リンクをクリックすると、新しいタブで開く可能性があります。

あなたがあなた自身のリンクでそれをする方法を疑問に思ったことがあるなら、あなたは正しい場所に来ました。

アンカー要素

Webページにリンクを作成するには、要素(テキスト、画像など)をアンカー()要素でラップし、そのhref属性をリンク先のURLに設定する必要があります。

Check out freeCodeCamp.

freeCodeCampをチェックしてください。

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

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

ターゲット属性

この属性は、リンクを開く方法をブラウザに指示します。

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

Check out freeCodeCamp.

これで、誰かがリンクをクリックすると、その人のブラウザ設定に応じて、新しいタブ、または場合によっては新しいウィンドウで開きます。

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

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

Check out freeCodeCamp.

これにより、次の出力が得られます。

freeCodeCampをチェックしてください。

このrel属性は、ページとリンクされたURLの間の関係を設定します。に設定するとnoopener noreferrer、タブナビングと呼ばれるタイプのフィッシングを防ぐことができます。

タブナビングとは何ですか?

タブナビングは、リバースタブナビングと呼ばれることもあり、ブラウザのデフォルトの動作を使用しtarget="_blank"て、window.objectAPIを介してページに部分的にアクセスするエクスプロイトです。

タブナビングを使用すると、リンク先のページによって、ページが偽のログインページにリダイレクトされる可能性があります。これは、ページの元のタブではなく、開いたばかりのタブに焦点が当てられるため、ほとんどのユーザーが気付くのは難しいでしょう。

次に、ユーザーがページのあるタブに戻ると、代わりに偽のログインページが表示され、ログインの詳細が入力される可能性があります。

タブナビングがどのように機能し、悪意のある人物がこのエクスプロイトで何ができるかについて詳しく知りたい場合は、AlexYumashevの記事とOWASPによるこの記事を確認してください。

あなたが金庫を見たいなら実用的な例として、このページとそのGitHubリポジトリで、エクスプロイトとrel属性の詳細を確認してください。

要約すれば

HTMLを使用して、新しいタブでリンクを開くのは簡単です。必要なのは、次の3つの重要な属性を持つanchor()要素だけです。

  1. hrefリンク先のページのURLに属性セット
  2. target設定された属性_blankブラウザの設定によっては、新しいタブ/ウィンドウでリンクを開くには、ブラウザを伝え、
  3. relする属性セットnoreferrer noopenerあなたがにリンクページから可能悪意のある攻撃を防ぐために

繰り返しになりますが、これが実際のHTMLの例です。

Check out freeCodeCamp.

これにより、ブラウザに次の出力が表示されます。

freeCodeCampをチェックしてください。

読んでくれてありがとう。ハッピーコーディング。