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

HTML


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

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

 

 

といった方に対する記事となります。

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

今回は右クリックで別タブを開く必要なく、普通にクリックすれば別タブを開くようにする方法をご紹介します。

 


別タブで開く方法

 

リンクを別タブで開くには、aタグに以下のコードを追記すればOKです。

target=”_blank”

通常のリンクとの違いは以下の通りです。

<a href=”リンク先のURL”>サイト名やページ名</a>

<a href=”リンク先のURL” target=”_blank”>サイト名やページ名</a>

 

これだけです。

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

 

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

 

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

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

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

 


rel=”noopener noreferrer”を追記

 

先ほどのセキュリティ上のリスクを回避するためには、aタグに以下のコードを追記します。

<a href=”リンク先のURL”target=”_blank”>サイト名やページ名</a>

<a href=”リンク先のURL”target=”_blank” rel=”noopener noreferrer”>サイト名やページ名</a>

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

 

WordPressでは自動付与される

 

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

例えば投稿ページでサイト名を選択してlink設定します(リンクにしたい範囲のテキストを選択します)

 

するとこちらの画面が表示されるので、リンクを新しいタブで開くにチェックしてから右下のリンク追加をクリックします。

 

 

すると rel=”noopener” が書いてあるのが分かります。

 

 

それじゃ noreferrer の方はどうなんだ?と思いますが、このまま下書き保存や公開をすれば自動で追記されます。

 

 

またこれは最初のlinkボタンからではなく、手動でaタグを書いた時でも同じです(target=”_blank”を書いた時だけです)

以上です。