Webサイトを運営していると、外部リンクを新しいタブで開かせたい場面に遭遇することがあります。そんなときに活躍するのが「target=”_blank”」という属性です。HTMLのアンカータグに追加するだけで、リンク先を新しいウィンドウやタブで表示できる便利な機能として広く使われています。しかし、この属性には知らないと危険なセキュリティリスクが潜んでいることをご存知でしょうか。適切な対策を講じないまま使用すると、フィッシング詐欺に悪用される可能性があるのです。本記事では、target=”_blank”の基本的な使い方から、安全に利用するための必須対策、さらに実際のコーディング例まで徹底的に解説していきます。
- target=”_blank”の基本的な意味と正しい使い方
HTMLのa要素に追加することで、リンク先を新しいタブまたはウィンドウで開く属性です
- 使用時に発生するセキュリティリスクと対処法
rel=”noopener noreferrer”を併記しないと、フィッシング詐欺に悪用される危険性があります
- 適切な使用場面と避けるべきケース
外部サイトへのリンクには使用が推奨されますが、同一サイト内の移動では避けるべきです
target=”_blank”とは
target=”_blank”は、HTMLのアンカー要素（aタグ）で使用される属性値の一つです。この属性を指定すると、リンクをクリックした際に、現在のページはそのまま残り、新しいブラウザタブまたはウィンドウでリンク先のページが開きます。
target属性には複数の値が設定可能で、それぞれ異なる動作を指定できます。以下の表で主要な属性値を比較してみましょう。
| 属性値 | 動作 | 主な用途 |
|---|---|---|
| _self | 同じタブで開く（デフォルト） | サイト内リンク |
| _blank | 新しいタブで開く | 外部サイトリンク |
| _parent | 親フレームで開く | フレーム使用時 |
| _top | 最上位フレームで開く | フレーム使用時 |
target属性を指定しない場合は、デフォルトで「_self」が適用されます。この場合、クリックすると現在のタブがリンク先のページに置き換わります。
target=”_blank”の基本構文
target=”_blank”を使用する際の基本的な記述方法は、aタグのhref属性の後に「target=”_blank”」を追加するだけです。実際のHTMLコードは以下のような形式になります。
「<a href=”https://example.com” target=”_blank”>リンクテキスト</a>」のように記述します。この記述により、ユーザーがリンクをクリックすると、example.comが新しいタブで開きます。元のページは閉じられることなく、バックグラウンドで表示され続けます。
target=”_blank”の動作仕様
ブラウザによって、target=”_blank”の動作は若干異なる場合があります。多くのモダンブラウザでは新しいタブとして開きますが、ブラウザの設定によっては新しいウィンドウとして開く場合もあります。
重要なのは、target=”_blank”単独では、開かれた新しいタブから元のページを参照できてしまうという点です。この仕様がセキュリティ上の問題を引き起こす原因となります。次のセクションで詳しく解説しますが、この動作を理解しておくことが安全な実装の第一歩です。
target=”_blank”を使う場面
実際のWeb制作において、target=”_blank”は主に外部サイトへのリンクに使用されます。ユーザーが外部サイトを閲覧した後も、元のサイトに戻りやすくするためです。
PDFファイルや画像ファイルへのリンクでも頻繁に使用されます。ドキュメントを確認しながら元のページの内容も参照したい場合に便利です。また、入力フォームのあるページからヘルプページへリンクする際にも、入力内容を保持したまま別タブでヘルプを確認できるため有効な手段となります。
target=”_blank”は新しいタブでリンクを開く便利な属性ですが、使用時にはセキュリティ対策が必須です。基本的な仕組みを理解してから実装に進みましょう。
target=”_blank”の危険性
target=”_blank”は便利な機能ですが、適切な対策を講じないと深刻なセキュリティリスクを引き起こす可能性があります。特に「タブナビング」と呼ばれる攻撃手法に対して脆弱になることが知られています。
この問題は、target=”_blank”で開いた新しいページから、元のページ（リンク元）にアクセスできてしまうことに起因します。技術的には、新しく開いたページのJavaScriptからwindow.openerオブジェクトを通じて、元のページを操作できてしまうのです。
タブナビング攻撃の仕組み
タブナビング攻撃とは、target=”_blank”で開いたページから元のページのURLを書き換え、フィッシングサイトに誘導する手法です。攻撃者は以下のような流れでユーザーを騙します。
まず、ユーザーが信頼できるサイトAから、target=”_blank”付きのリンクをクリックします。すると悪意のあるサイトBが新しいタブで開きます。このとき、サイトBのJavaScriptがwindow.opener.location.hrefを使って、バックグラウンドにあるサイトAのURLを偽のログインページなどに書き換えます。ユーザーがサイトAのタブに戻ると、本物そっくりの偽ページが表示されており、気づかずにログイン情報を入力してしまう危険性があります。
window.openerの危険性
window.openerとは、新しいタブを開いた元のウィンドウ（親ウィンドウ）への参照を保持するJavaScriptのプロパティです。通常、この機能は親子間でのデータやり取りに使用されます。
しかし、外部サイトにこの参照を渡してしまうと、悪意のあるスクリプトに元のページを自由に操作される可能性が生じます。具体的には、元のページのURLを変更したり、DOMを操作したりすることが可能になります。これがタブナビング攻撃の根本的な原因となっています。
パフォーマンスへの影響
セキュリティリスクに加えて、target=”_blank”にはパフォーマンス面での懸念もあります。対策を施さない場合、新しく開いたページと元のページが同じプロセスで実行される可能性があります。
この状態では、新しいタブで重い処理が実行されると、元のページの動作にも影響を与える場合があります。特にJavaScriptで複雑な処理を行うページでは、この問題が顕著になることがあります。適切な対策を講じることで、タブ間のプロセスを分離し、パフォーマンスを改善できます。
以下の表で、対策の有無によるリスクの違いを確認しましょう。
| 状況 | セキュリティリスク | パフォーマンス影響 |
|---|---|---|
| 対策なし | タブナビング攻撃の危険あり | プロセス共有の可能性 |
| noopener指定 | window.openerが無効化 | プロセス分離される |
| noreferrer指定 | 参照元情報も非送信 | プロセス分離される |
target=”_blank”の危険性を理解することが、安全なWeb制作の第一歩となります。次のセクションで具体的な対策方法を確認していきましょう。
バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！
target=”_blank”の安全な使い方
target=”_blank”を安全に使用するためには、rel属性を併記することが不可欠です。具体的には「rel=”noopener noreferrer”」を追加することで、前述したセキュリティリスクとパフォーマンス問題を解決できます。
現在では多くのブラウザがこの問題に対応し、target=”_blank”を指定すると自動的にnoopenerが適用される仕様に変更されています。しかし、古いブラウザへの対応や確実な安全性を担保するためには、明示的にrel属性を指定することが推奨されます。
noopener属性の役割
rel=”noopener”は、新しく開いたタブからwindow.openerへのアクセスを無効化する属性です。この属性を指定することで、リンク先のページから元のページを操作することができなくなります。
実装方法は非常にシンプルで、「<a href=”https://example.com” target=”_blank” rel=”noopener”>リンクテキスト</a>」のように記述します。これにより、タブナビング攻撃のリスクを排除でき、同時にパフォーマンスの改善も期待できます。
noreferrer属性の役割
rel=”noreferrer”は、リンク元のページ情報（リファラー）をリンク先に送信しないようにする属性です。この属性にはnoopenerの機能も含まれているため、セキュリティ対策としても有効です。
noreferrerを指定すると、リンク先のサイトはどこからアクセスされたかを知ることができなくなります。アクセス解析への影響を考慮する必要がありますが、プライバシー保護の観点からはメリットとなる場合もあります。
推奨される記述方法
実務では、noopenerとnoreferrerの両方を指定する「rel=”noopener noreferrer”」という記述が広く使われています。これにより、最大限のセキュリティを確保できます。
以下に、実際のコーディング例をまとめました。
target=”_blank”を使用する際の安全なコード例
- 外部リンク：<a href=”URL” target=”_blank” rel=”noopener noreferrer”>
- PDFリンク：<a href=”file.pdf” target=”_blank” rel=”noopener”>
- 信頼できるサイト：<a href=”URL” target=”_blank” rel=”noopener”>
リファラー情報を送信しても問題ない信頼できるサイトへのリンクでは、noopenerのみの指定でも十分な場合があります。状況に応じて適切な属性を選択してください。
ブラウザの対応状況
2024年現在、主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）では、target=”_blank”を指定すると自動的にnoopenerが適用されるようになっています。この変更は、セキュリティリスクの認知が広まったことによるものです。
ただし、Internet Explorer 11などの古いブラウザでは自動適用されません。幅広いユーザーに対応する必要がある場合は、明示的にrel属性を記述することをお勧めします。レガシーブラウザのサポートが不要な場合でも、コードの意図を明確にするために記述しておくとよいでしょう。
rel=”noopener noreferrer”を併記するだけで、target=”_blank”を安全に使用できます。これを習慣化すれば、セキュリティリスクを気にせずリンクを設置できますよ。
バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！
バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
サービス導入事例
株式会社ヤマダデンキ 様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る
target=”_blank”の使用判断
target=”_blank”は便利な機能ですが、すべてのリンクに使用すべきではありません。ユーザー体験やアクセシビリティの観点から、使用するかどうかを慎重に判断する必要があります。
基本的な考え方として、「ユーザーが元のページに戻る必要があるか」を基準に判断するとよいでしょう。外部サイトへのリンクや参考資料へのリンクでは使用価値がありますが、サイト内のナビゲーションでは避けるべきです。
使用すべき場面
target=”_blank”が効果的なのは、ユーザーが元のページの内容を参照し続けたい場面です。具体的には以下のようなケースが該当します。
外部サイトへのリンクは、最も一般的な使用場面です。ユーザーが外部の情報を確認した後、スムーズに元のサイトへ戻れるようにするためです。PDFやドキュメントファイルへのリンクも同様に、内容を確認しながら元のページの文脈を維持できます。
入力フォームのあるページからのヘルプリンクや利用規約へのリンクも、target=”_blank”の使用が推奨されます。ユーザーが入力途中のデータを失わずに情報を確認できるからです。
使用を避けるべき場面
サイト内の通常のナビゲーションリンクでは、target=”_blank”の使用を避けるべきです。サイト内を移動するたびに新しいタブが開くと、ユーザーのブラウザがタブで溢れかえってしまいます。
ユーザーの意思に反して新しいタブを開くことは、アクセシビリティの観点からも問題があります。スクリーンリーダーを使用するユーザーや、操作に不慣れなユーザーにとって、予期しないタブの開放は混乱の原因となります。
以下の表で、使用の判断基準を整理しました。
| リンクの種類 | target=”_blank” | 理由 |
|---|---|---|
| 外部サイト | 使用推奨 | 元サイトに戻りやすい |
| PDF/ドキュメント | 使用推奨 | 内容を参照しながら操作 |
| ヘルプページ | 状況により使用 | 入力データ保持のため |
| サイト内移動 | 使用非推奨 | タブが増えすぎる |
| 決済ページ | 使用非推奨 | フロー維持のため |
アクセシビリティへの配慮
target=”_blank”を使用する場合は、リンクが新しいタブで開くことをユーザーに事前に伝えることが推奨されます。リンクテキストに「（新しいタブで開く）」などの説明を追加する方法が一般的です。
視覚的なアイコンで示す場合も、スクリーンリーダー用のテキストを併記することが重要です。「<span class=”sr-only”>新しいウィンドウで開きます</span>」のような記述を追加することで、視覚に障害のあるユーザーにも情報を伝えられます。
アクセシブルなtarget=”_blank”リンクのチェックポイント
- リンクテキストに新しいタブで開く旨を明記しているか
- アイコン使用時はスクリーンリーダー用テキストを追加しているか
- キーボード操作でも正常に機能するか
- rel=”noopener noreferrer”が設定されているか
target=”_blank”を使うかどうかは、ユーザー体験を最優先に考えて判断しましょう。必要な場面で適切に使用することが、良いWeb制作につながります。
target属性の種類と使い分け
target属性には_blank以外にも複数の値が用意されています。それぞれの動作を理解し、適切に使い分けることで、より意図した通りのリンク動作を実現できます。
現代のWeb開発では、フレームを使用する機会は減少していますが、_self、_blank、_parent、_topの4つの予約語と、任意の名前を指定する方法について知っておくと役立つ場面があります。
_selfの動作と用途
_selfはtarget属性のデフォルト値で、リンクを同じタブ（フレーム）で開きます。target属性を省略した場合と同じ動作となるため、明示的に指定する機会は多くありません。
しかし、CSSやJavaScriptでベースターゲットを変更している場合には、意図的に_selfを指定することでデフォルトの動作を維持できます。また、コードの可読性を高めるために明示的に記述する開発者もいます。
_parentと_topの動作
_parentと_topは、主にiframeやフレームセットを使用している環境で効果を発揮します。_parentは親フレームでリンク先を開き、_topは最上位のウィンドウ全体でリンク先を開きます。
フレームがネストされている場合、_parentは一つ上の階層で開き、_topはすべてのフレームを無視してブラウザウィンドウ全体に表示します。フレームを使用していない通常のページでは、どちらも_selfと同じ動作となります。
以下の表で各値の動作をまとめました。
| 属性値 | フレームなし環境 | フレーム環境 |
|---|---|---|
| _self | 同じタブで開く | 同じフレームで開く |
| _blank | 新しいタブで開く | 新しいタブで開く |
| _parent | 同じタブで開く | 親フレームで開く |
| _top | 同じタブで開く | 最上位で開く |
任意の名前を指定する方法
target属性には、予約語以外に任意の名前を指定することも可能です。「target=”mywindow”」のように指定すると、その名前を持つウィンドウまたはタブが存在しない場合は新しく作成され、存在する場合はそのウィンドウでリンク先が開きます。
複数のリンクに同じtarget名を指定すると、それらのリンクはすべて同じタブで開くようになります。これにより、外部リンクを一つのタブにまとめて開かせるといった制御が可能になります。
target属性の命名規則に関する注意点
- アンダースコアで始まる名前は予約されているため使用しない
- 半角英数字とハイフン、アンダースコアが使用可能
- 大文字と小文字は区別される
target属性には複数の選択肢がありますが、一般的なWeb制作では_selfと_blankを理解しておけば十分対応できるでしょう。
よくある質問
- target=”_blank”を使わずに新しいタブで開く方法はありますか
-
JavaScriptのwindow.open()メソッドを使用することで、プログラムから新しいタブを開くことができます。ただし、ポップアップブロッカーによって制限される場合があるため、ユーザーの操作（クリックなど）に紐づけて実行することが推奨されます。また、この方法でも同様にnoopener対策が必要となります。
- WordPressでtarget=”_blank”を自動的に安全にする方法はありますか
-
WordPressの投稿エディタでは、外部リンクにtarget=”_blank”を指定すると自動的にrel=”noopener”が追加される仕様になっています。ブロックエディタ（Gutenberg）を使用している場合は、リンク設定で「新しいタブで開く」をオンにするだけで安全な設定が適用されます。カスタムテーマやプラグインで独自にリンクを生成する場合は、明示的にrel属性を追加する必要があります。
- すべての外部リンクにtarget=”_blank”を付けるべきですか
-
すべての外部リンクに付ける必要はありません。ユーザーが元のページに戻る必要があるかどうかを基準に判断してください。参考情報や補足資料へのリンクでは有効ですが、外部サイトへの遷移がユーザーの主目的である場合（例えば購入サイトへの移動など）は、新しいタブで開く必要がない場合もあります。ユーザー体験を最優先に考えて判断することをお勧めします。
まとめ
target=”_blank”は、リンク先を新しいタブで開くための便利なHTML属性です。外部サイトへのリンクやPDFファイルへのリンクで活用することで、ユーザーが元のページに戻りやすくなるメリットがあります。
ただし、適切な対策を講じないとタブナビング攻撃のリスクにさらされる危険性があります。必ずrel=”noopener noreferrer”を併記し、window.openerへのアクセスを無効化することが重要です。モダンブラウザでは自動対策が施されていますが、確実な安全性のために明示的に記述することをお勧めします。
使用の判断においては、ユーザー体験とアクセシビリティを最優先に考えてください。サイト内のナビゲーションリンクでは避け、外部リンクや参考資料へのリンクで効果的に活用することで、より使いやすいWebサイトを構築できます。
