基本的な書き方

HTMLでリンクをクリックした際に、新しいタブで開くには target="_blank" を指定します。

<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>

上記のコードを実行すると、リンクをクリックしたときに新しいタブで https://example.com が開きます。

noopener の使用

target="_blank" を使用すると、新しいタブで開いたページが window.opener を通じて元のページにアクセスできる可能性があります。

この問題を防ぐために rel="noopener" を追加します。

<a href="https://example.com" target="_blank" rel="noopener">noopener を使ったリンク</a>

これにより、新しく開いたタブから元のページにアクセスすることができなくなります。

noreferrer の使用

rel="noreferrer" を使用すると、noopener の機能に加え、新しいタブにリファラー情報を渡さないようにできます。

<a href="https://example.com" target="_blank" rel="noreferrer">noreferrer を使ったリンク</a>

これにより、開かれたページは、どのページからリンクされたかを知ることができなくなります。

JavaScript を使った方法

JavaScript を使用して新しいタブを開くこともできます。以下のように window.open() を使用します。

<button onclick="window.open('https://example.com', '_blank')">新しいタブで開く</button>

ボタンをクリックすると、https://example.com が新しいタブで開きます。

セキュリティの考慮点

新しいタブで開くリンクを使用する際には、次の点に注意しましょう。

• target="_blank" を使用する際は rel="noopener" を併用する。
• 外部サイトへ遷移させる場合は rel="noreferrer" も考慮する。
• JavaScript の window.open() はポップアップブロックの影響を受ける可能性がある。

これらの対策を適用することで、安全なウェブページを構築することができます。