基本のリンクコードと別タブでリンクを開くコード＆注意点のまとめ
HTML基本のリンク
<a href="リンク先URL">リンクはこちら</a>基本のリンクは<a>タグで記述し、同じタブでリンク先が表示されます。
「リンクはこちら」の部分にテキストを入れると、そのテキスト部分にリンク機能が付きます。
リンクを別タブ（新規タブ）で開く
<a href="リンク先URL" target="_blank">リンクはこちら</a>リンク先のページを別タブで開く場合は、target=”_blank”を追記します。
ちなみにtarget=”blank”と_がないもので覚えている方も多いと思いますが
- target=”blank” …一つの別タブ内で開く
- target=”_blank” …いくつも別タブを開くことができる
という違いがあります。一般的にはtarget=”_blank”がよく使われます。
target=”_blank”を使用する場合の注意点
このtarget=”_blank”非常に便利かつ多くのサイトで使用されていますが、下記のような脆弱性があるようです。
例えば
- 当サイトから別タブリンクを開く
- 新しく開いたタブを閲覧してから元のタブ（当サイト）に戻る
- 元タブが別サイトにすり替えられてしまっている
すり替えられたURLが安全なものなら良いですが（例え安全でも迷惑ですが…）
フィッシングサイトや悪意のあるサイトへ誘導されてしまう場合も考えられます。
サイトを作成した自分に悪意がなくても、被害者を出してしまうかもしれません。
target=”_blank”の脆弱性への対策
target=”_blank”の脆弱性を回避するために、rel=”noopener noreferrer”を追加します。
<a href="リンク先URL" target="_blank" rel="noopener noreferrer">リンクはこちら</a>noopener で、新しいタブを別のスレッドで開く
noreferrer で、新規タブへ参照元のリンクを渡さないようにするといった記述になります。
noopenerとnoreferrerは厳密には違うものですが、作用としては同じような効果が期待できます。
こちらの記事がとてもわかりやすかったのでご参考どうぞ。
noopener と noreferrer の整理、結局どっちを使えば良いのか
blog.ojisan.io
WordPressサイトでのtarget=”_blank”への対応
現在、WordPressではリンク作成の際に「リンクを新しいタブで開く」を選択するとrel=”noopener” が適応されるようです。
特に心配せずそのまま使用して問題ないと思います。
