HTML Web制作

HTMLでリンクを別タブ・別ウィンドウで開く方法【脆弱性に対する対応も記載】

※ 当サイトではアフィリエイト広告を利用しています

右クリックしないでリンクを別タブ・別ウィンドウで開くように設定出来ない?

通常リンク先をクリックしたら同じタブのままページを開くので、元のページに戻るときは戻るボタンをクリックする必要があります。

なので別タブで開くには閲覧者が右クリックで別タブ・別ウィンドウを開く必要がありますが、実務では『別タブで開くようにして下さい』と、よく言われます。

今回は右クリックしなくても普通にクリックすれば別タブ・別ウィンドウを開くようにする方法を解説します。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

HTMLでリンクを別タブ・別ウィンドウで開く方法【脆弱性に対する対応も記載】

リンクを別タブ・別ウィンドウで開くには、aタグにtarget="_blank"を追記すればOKです。

<!-- 通常 -->
<a href="リンク先のURL"></a>

<!-- 別タブ -->
<a href="リンク先のURL" target="_blank"></a>

ただしこれだけだとセキュリティ上の問題があります。

 

セキュリティ上の問題とは?

先ほどのtarget="_blank"だけだと、リンク先からJavaScriptwindow.openerを使用して元のページを操作することが出来てしまいます。

また『window.opener.location = newURL』を使用することで、元ページのURLを変えることも出来てしまいます。

このように元ページのURLを変えられてしまいフィッシング詐欺にかかってしまう危険があるため、対策をする必要があります。

 

rel="noopener noreferrer"を追記

先ほどのセキュリティ上のリスクを回避するためには、aタグにrel="noopener noreferrer"を追記します。

<!-- 通常 -->
<a href="リンク先のURL"></a>

<!-- 別タブ -->
<a href="リンク先のURL" target="_blank"></a>

<!-- セキュリティ対策 -->
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer"></a>

このnoopenerが先ほどのリスクを回避するための記述ですが、これは未対応のブラウザもあるのでそれに対応するためにnoreferrerを追記します。

ただし2022年現在、使用されているほとんどのブラウザでnoopenerはサポートされているのでrel="noopener"だけでもほぼ問題はありません(あくまでも『ほぼ』です)

 

WordPressでは自動付与される

rel="noopener noreferrer"ですが、WordPressの場合はtarget="_blank"を付けると自動で付与されます。

 

クラシックエディタの場合

まずはリンクを設定したいテキストを選択して、リンクボタンをクリックします。

リンクを設定(クラシックエディタ)

リンクを設定(クラシックエディタ)

次は『リンク設定』ボタンをクリックします。

リンクを設定(クラシックエディタ)

リンクを設定(クラシックエディタ)

そして『URL』を入力して『リンクを新しいタブで開く』にチェックを入れて右下の『リンク追加』ボタンをクリックすればOKです。

リンクの挿入/編集(クラシックエディタ)

リンクの挿入/編集(クラシックエディタ)

クラシックエディタの場合はnoreferrerは付かないので、入力する場合は自分で入力しましょう(以前は自動で付きましたが・・・)

rel="noopener"の確認(クラシックエディタ)

rel="noopener"の確認(クラシックエディタ)

 

ブロックエディタの場合

まずはリンクを設定したいテキストを選択して、リンクボタンをクリックします。

リンクを設定(ブロックエディタ)

リンクを設定(ブロックエディタ)

そしてURLを入力して『新しいタブで開く』をONにすればOKです。

『新しいタブで開く』をON(ブロックエディタ)

『新しいタブで開く』をON(ブロックエディタ)

ブロックエディタの場合はクラシックエディタと違いnoreferrerも自動で付きます。

まとめ

今回はHTMLでリンクを別タブ・別ウィンドウで開く方法について解説しました。

Web制作でも『リンクは別タブで開くようにして下さい』と言われることがあるので、覚えておきましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-HTML, Web制作