Web制作 HTML

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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も自動で付きます。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, HTML