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

タブは素晴らしいですね。私たち全員のマルチタスカーは、オンライン タスクを同時にこなすことができます。

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

独自のリンクでそれを行う方法を考えたことがある場合は、適切な場所に来ています.

アンカー要素

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

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

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

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

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

ターゲット属性

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

リンクを新しいタブで開くには、 target を設定するだけです _blank への属性 :

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

誰かがリンクをクリックすると、そのリンクが新しいタブで開くか、ユーザーのブラウザ設定に応じて新しいウィンドウで開く可能性があります。

target="_blank" に関するセキュリティ上の懸念

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

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

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

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

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

タブナビングとは?

逆タブナブと呼ばれることもあるタブナブは、target="_blank" でブラウザのデフォルトの動作を使用するエクスプロイトです。 window.object を介してページへの部分的なアクセスを取得する API.

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

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

タブナビがどのように機能するか、悪意のあるユーザーがエクスプロイトを使用して何ができるかについて詳しく知りたい場合は、Alex Yumashev の記事と OWASP によるこの記事をご覧ください。

金庫を見たい場合 このページとその GitHub リポジトリをチェックして、エクスプロイトと rel の詳細を確認してください。

まとめ

HTML を使用してリンクを新しいタブで開くのは簡単です。必要なのはアンカー (<a>) だけです ) 3 つの重要な属性を持つ要素:

繰り返しますが、ここに完全に機能する例があります:

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

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

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

読んでくれてありがとう。コーディングをお楽しみください。