MENU

【HTML】セキュリティは大丈夫?aタグで別タブを開く方法を解説

「ページを別タブで実装する方法ないかな?」

実はaタグの指定方法を少し変更するだけで別タブでページを開く実装が可能になります。

目次

別タブで開く方法

<a href="https://~~">リンク</a>

通常aタグはこのように実装してhref属性でリンク先を指定するのみですが、

<a href="https://~~" target="_blank">リンク</a>

このようにtarget="_blank"を指定することで別タブでページを開けるようになります。

セキュリティ上の問題

実はtarget="_blank"で指定しただけだと、親ページのURLを書き換えれてしまいます。

元ページのURLを変えられてしまうとフィッシング詐欺にかかるリスクがあるため対策する必要があります。

それを防ぐために以下のような記述を行います。

<a href="https://~~" target="_blank" target="_blank" rel="noopener noreferrer">リンク</a>

追加したのは、target="_blank" rel="noopener noreferrer"です。
こうすることで、前述したようなリスクを回避できます。

ちなみに、WordPressのブロックエディタでリンクを別タブで開く場合は自動で付与されるので問題ないです。

よかったらシェアしてね!
  • URLをコピーしました!

即戦力級のWeb制作者になるためのLINEマガジン

LINEマガジン登録特典のサムネイル
即戦力級のWeb制作者になるためのLINEマガジン
目次